基本指令
1. v-cloak
使用場景：頁面加載慢而出現(xiàn)閃動的問題涝涤。
用法：一般是與display:none；一起使用
<span v-cloak>{{msg}}</span>
<style>
[v-cloak]{
display: none;
}
</style>
2. v-once
使用場景：想只渲染組件和元素一次
<span v-cloak v-once>{{msg}}</span>
5.2條件渲染指令
5.2.1 v-if沪摄、v-else、v-else-if
用法：必須跟著屁股走
<span v-if="6<3">{{apple}}</span>
<span v-else-if="6<3">{{banana}}</span>
<span v-else>{{pineapple}}</span>
</div>
v-if有個弊端
就是vue在渲染頁面的時候會偷懶纱烘，對相同的元素和組件會進行復用而不是重新渲染
<div v-if="username">
用戶：<input type="text" placeholder="username">
</div>
<div v-else>
密碼：<input type="text" placeholder="password" >
</div>
<button @click="toggle">切換</button>
解決方法在元素處加個key
<div v-if="username">
用戶：<input type="text" placeholder="username" key="username">
</div>
<div v-else>
密碼：<input type="text" placeholder="password" key="password">
</div>
<button @click="toggle">切換</button>
v-show
v-show后面跟布爾值
v-show和v-if的區(qū)別是：
前者存在于頁面中杨拐，只是display為none。而后者凹炸，為值為false時戏阅，不存在于文檔中。
v-for指令
遍歷數(shù)組
<ul>
遍歷一個數(shù)組的各項元素
<li v-for="item in mmmsg">{{item['name']}}</li>
</ul>
<hr>
<ul>
遍歷一個數(shù)組的各項元素和序號
<li v-for="(item,index) in mmmsg">第{{index+1}}個名字是{{item['name']}}</li>
</ul>
----------
data: {
mmmsg: [
{name: 'yejianqiang '},
{name: 'frank'},
{name: 'Jack'}
]
}
遍歷對象
<ul>
遍歷一個對象：value
<li v-for="value in object">{{value}}</li>
</ul>
<hr>
<ul>
遍歷一個對象：value key index
<li v-for="(value,key,index) in object">第{{index}}的key是{{key}}啤它，value是{{value}}</li>
</ul>
-------
object: {
username: '葉建強',
age: 14,
school: '廣東技術師范學院'
}
數(shù)組的各種方法
- push() 從后面添加元素
- pop() 刪除最后一個元素
- shift() 從前面添加元素
- unshift() 刪除第一個元素
- splice()
splice(0,1) // 從0個開始數(shù)（包括第0個）奕筐，刪除一個元素
splice(2,3) // 從2個開始數(shù)（包括第2個）舱痘，刪除三個元素
splice(0,0,'hello') // 從第0個前面，添加一個元素
- sort() // sort里面接受一個函數(shù)离赫，函數(shù)接受兩個參數(shù)芭逝，前面參數(shù)減后面的參數(shù)就從小到大排列
sort: function(){
this.array.sort(function(a,b){
return a.length - b.length
})
}
- reverse() // 把數(shù)組順序顛倒
注意：==有兩種數(shù)據改變vue是不會重新渲染頁面的==
- 數(shù)組中的某一項的值發(fā)生改變，如：
this.array[0] = 'car'
解決方法：用Vue提供的Set方法
Vue.set(app.array,1,'car')
// 意思是把app里的array數(shù)組中的第1項改為car渊胸，這樣才會觸發(fā)渲染
- 改變數(shù)組的長度
如果只是單純的把array.length改為0旬盯，那么這是不會觸發(fā)渲染的。
應該使用splice方法
如：
splice(0) // 從數(shù)組的第0項開始刪翎猛，即數(shù)組的長度等于0
splice(1) // 從數(shù)組的第一項開始往后刪胖翰，即數(shù)組的長度等于1
method最好寫括號
<div>你的賬戶余額為{{value}}</div>
<button @click="plus(1)">加1</button>
<button @click="plus(5)">加5</button>
------------
methods: {
plus: function (value) {
console.log(value)
var value = value || 1
this.value += value
}
}
如果沒有在標簽寫括號，那么在methods里傳入的是事件本身
阻止冒泡和阻止默認事件
.stop
// 點擊兒子會有兩個彈窗
<div @click="father">
<button @click="child">child</button>
</div>
阻止向上冒泡切厘，相當于原生JS的e.stopPropagation
<div @click="father">
<button @click.stop="child">child</button>
</div>
.prevent
阻止默認事件萨咳，相當于e.preventDefault,阻止刷新頁面
<form action="" @submit.prevent>
<input type="submit">
</form>
.self
只能在作用于元素本身，而不作用于子元素時被調用
<div @click.self="father">
<button @click="child">child</button>
</div>
此時也不會出現(xiàn)冒泡
.once
只執(zhí)行一次的方法
<button @click="alert">無限次</button>
<button @click.once="alert">一次</button>
