Vue.js 創建一個 CNODE 社區(3)
Vue 中的內置指令 demo
通過 demo 了解 Vue 中一些常用的內置指令。
涉及到 v-cloack / v-once / 條件循環指令(v-if / v-else-if / v-else) / v-show / 列表遍歷渲染 (v-for) / 數組更新、過濾排序 / 方法和事件 (修飾符) 等...
以下是全部的 demo：
JSbin
v-cloak
作用：解決初始化慢導致頁面閃動的最佳實踐（初始化慢時會顯示未渲染好的頁面，而 v-cloak 則讓沒有渲染好的部分隱藏起來，渲染好之後再去掉 v-cloak，讓頁面正常顯示）
常與 display：none 搭配
<style> [v-cloak]{ display:none; } </style> <div v-cloak>{{ msg }}</div>
v-once
作用：定義它的元素和組件只渲染一次
<div v-once>{{ msg }}</div>v--if / v--else-if / v--else
條件循環指令：
<div v-if=‘isActive‘>{{ msg }}</div> <div v-else-if=‘6>3‘>{{ oncedata }}</div> <div v-else>如果前面兩個都是 false，那就顯示這個</div> <button @click=‘changeMsg‘>點我切換</button>
JS:
data:{
msg:‘this‘,
oncedata:‘is‘,
isActive:true
},
methods:{
changeMsg:function(){
this.isActive = !this.isActive
}
}v-if的弊端 :
Vue 在渲染元素時 ，出於效率考慮，會盡可能地復用已有的元素而非重新渲染， 因
此會出現烏龍
只會渲染變化的元素，也就是說，input元素被復用了
解決方法：提供key值可以來決定是否復用該元素
<div v-if=‘type==="name"‘> 用戶名 ：<input type="text" placeholder="Username" key=‘username‘> </div> <div v-else> 密碼 ：<input type="text" placeholder="Password" key=‘password‘> </div> <button @click=‘changeInput‘>點擊切換輸入欄</button>
JS:
data:{
type:‘name‘
},
methods:{
changeInput:function(){
this.type = (this.type===‘name‘?‘password‘:‘name‘)
}
}v-show
作用：控制元素是否顯示
<div v-show=‘isActive‘>{{ msg }}</div>data:{
isActive:true
}v-show 和 v-if 的區別
v-show 和 v-if 的作用同樣是控制元素的顯示，但是：
v-if 是將元素給移除，即 DOM 樹中並不會渲染這個元素
v-show 是將元素給隱藏，即 DOM 樹中渲染了這個元素，只是改變了 css 的 display 的屬性
v-for
列表渲染指令
- 遍歷多個對象
<ul>
<li v-for=‘item in objs‘>{{ item.name}}</li>
</ul>data:{
objs:[
{name:‘Li‘},
{name:‘Wang‘},
{name:‘Chen‘}
]
}添加索引：
<ul>
<li v-for=‘(item,index) in objs‘>{{index}}-{{ item.name}}</li>
</ul>- 遍歷對象屬性
直接打印屬性的值：
<ul>
<li v-for=‘value in obj‘>{{ value }}</li>
</ul>data:{
obj:{
name:‘zhangsan‘,
age:23,
gender:‘male‘
}
}添加鍵和索引：
<ul>
<li v-for=‘(value,key,index) in obj‘>{{ index }}-{{ key }}-{{ value }}</li>
</ul>數組更新、過濾和排序
<ul>
<li v-for=‘value in arr‘>{{ value }}</li>
</ul>data:{
arr:[213,345,3465,67,457,6,7,687,]
}- push() 在末尾添加元素
methods:{
arrpush:function(){
this.arr.push(2334)
}
}- pop() 將數組的最後一個元素移除
methods:{
arrpop:function(){
this.arr.pop()
}
}- shift() 刪除數組的第一個元素
methods:{
arrshift:function(){
this.arr.shift()
}
}- unshift（）：在數組的第一個元素位置添加一個元素
methods:{
arrunshift:function(){
this.arr.unshift(234234)
}
}- splice() ：可以添加或者刪除函數—返回刪除的元素
這個方法接受三個參數：
第一個參數 表示開始操作的位置
第二個參數表示：要操作的長度
第三個為可選參數：
methods:{
arrsplice:function(){
this.arr.splice(1,1,2)
}
}
// 操作數組的下標為 1 的數組成員之後的 1 個數組成員，把他的數值變為 2- sort() ：排序
methods:{
arrsort:function(){
this.arr.sort(function(a,b){
return a > b
})
}
}
// 數組成員由大到小排列- reverse()
數組翻轉
methods:{
arrreverse:function(){
this.arr.reverse()
}
}註意
兩個數組變動vue檢測不到:
改變數組的指定項
改變數組長度
解決方法：
set :
改變指定項： Vue.set(app.arr,1,”car”)
splice :
改變數組長度: app.arr.splice(1)
方法和事件
基本用法：
記得：如果方法中帶有參數，但是你沒有加括號，默認傳原生事件對象event
data:{
cout:0
},
methods:{
handle:function(cout){
count = count || 1
this.cout = this.cout + count
}
}html:
<button @click=‘handle(4)‘>點擊 +4</button>修飾符：
多用於事件中：
- stop 阻止事件向上冒泡
不然他會執行完點擊按鈕的事件後，繼續執行父元素的事件
正確做法：添加修飾符 stop：
<div @click=‘divClick‘ style=‘background-color:red;width:100px;height:100px‘>
<button @click.stop=‘buttonClick‘>點擊就送</button>
</div>- prevent 提交事件並且不重載頁面
當我們頁面中有表單，點擊表單提交按鈕 submit 時，要阻止頁面重載：
<form action=‘‘ @submit.prevent=‘handle‘>
<button type=‘submit‘>提交表單</button>
</form>methods:function(){
handle:function(){
alert(‘不需重載頁面‘)
}
}- self 只是作用在元素本身而非子元素的時候調用
<div @click.self=‘divClick‘ style=‘background-color:red;width:100px;height:100px‘>
<button @click.stop=‘buttonClick‘>點擊就送</button>
</div>- once 只執行一次的方法
<div @click.once=‘changeNum‘>{{ num }}</div>data:{
num:0
}
methods:{
changeNum:function(){
this.num = this.num + 1
}
}還可以使用 enter 等方法監聽鍵盤事件：
<div @enter=‘xxx()‘>{{ num }}</div>關於 Vue 的一些常用內置指令就整理到這裏了，等接觸到新的再添加~。
Vue.js 創建一個 CNODE 社區(3)