1.指令含義：
directive（指令）是特殊的帶有前綴 v- 的命令剧罩，指令的值限定為綁定表達(dá)式，指令的職責(zé)就是當(dāng)表達(dá)式的值改變時(shí)把某些特殊的行為應(yīng)用到DOM上套么。
2. 內(nèi)部常用指令:
- **v-if 指令 **: 根據(jù)表達(dá)式的值（true or false）在DOM中生成或者移除一個(gè)元素
<body>
<div id="app">
<p v-if=" true ">會(huì)顯示</p> //會(huì)在結(jié)構(gòu)中顯示
<p v-if=" value ">會(huì)顯示</p> //會(huì)在結(jié)構(gòu)中顯示
<p v-if=" false ">不會(huì)顯示</p> //不會(huì)在結(jié)構(gòu)中顯示
<p v-if=" msg ">不會(huì)顯示</p> //不會(huì)在結(jié)構(gòu)中顯示
</div>
<script>
new Vue({
el:'#app',
data:{
value:true,
msg : false
}
})
</script>
</body>
1、若v-if想要切換多個(gè)元素，可以這樣使用<template v-if> ..多個(gè)標(biāo)簽對...<template>
2盈咳、用key屬性可以管理可復(fù)用元素，Vue 會(huì)盡可能高效地渲染元素边翼，通常會(huì)復(fù)用已有元素而不是從頭開始渲染鱼响。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
在上面的代碼中切換 loginType 將不會(huì)清除用戶已經(jīng)輸入的內(nèi)容。因?yàn)閮蓚€(gè)模版使用了相同的元素组底，
input 不會(huì)被替換掉——僅僅是替換了它的 placeholder
Vue 為你提供了一種方式來聲明“這兩個(gè)元素是完全獨(dú)立的——不要復(fù)用它們”丈积。只需添加一個(gè)具有唯一值的 key 屬性即可：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
現(xiàn)在，每次切換時(shí)债鸡，輸入框都將被重新渲染
- **v-show 指令 **：根據(jù)表達(dá)式的值（true or false）顯示或者隱藏一個(gè)元素江滨，在DOM結(jié)構(gòu)中有顯示
<body>
<div id="app">
<p v-show=" true ">會(huì)顯示</p>
<p v-show=" value ">會(huì)顯示</p>
<p v-show=" false ">不會(huì)顯示</p>
<p v-show=" msg ">不會(huì)顯示</p>
</div>
<script>
new Vue({
el:'#app',
data:{
value:true,
msg : false
}
})
</script>
</body>
v-show和v-if不一樣，它不支持<template>語法厌均，v-if和v-show都能控制DOM元素的顯示和隱藏唬滑，但是在切換v-if模塊時(shí)，vue.js有一個(gè)局部編譯/卸載過程棺弊，因?yàn)関-if中的模板可能包括數(shù)據(jù)綁定或者子組件晶密，v-if是真是的條件渲染，它會(huì)確保條件快在切換時(shí)合適的銷毀與重建條件塊內(nèi)的時(shí)間監(jiān)聽器和子組件模她。
因此v-if有更高的切換消耗稻艰，而v-show只是簡單基于css切換，v-show有更高的初始渲染消耗侈净，所以頻繁切換使用v-show尊勿，運(yùn)行條件不大可能改變則用v-if較好
v-else 指令： 就是js中else的意思，它必須跟著v-if畜侦，還有v-else-if也是
<body>
<div id="app">
<p v-if="value">it's ok</p>
<p v-else> it's not ok</p>
</div>
<script>
new Vue({
el:'#app',
data:{
value:false,
}
})
</script>
</body>v-model 指令：用在input,select,text,checkbox,radio等表單控件上創(chuàng)建雙向數(shù)據(jù)綁定
在v-model指令后還可以添加多個(gè)參數(shù)（number元扔，lazy，debounce）
① - number： 能將用戶的輸入自動(dòng)轉(zhuǎn)成Number類型夏伊，如果轉(zhuǎn)換為NaN摇展，則返回原值
② - lazy：默認(rèn)下v-model在input事件中同步輸入框的值和數(shù)據(jù)，我們可以添加一個(gè)lazy特性，將數(shù)據(jù)改到在change事件中發(fā)生
<div id="app">
<input type="text" v-model.lazy="value">
<span>{{value}}</span>
</div>
<script>
new Vue({
el:'#app',
data:{
value:'內(nèi)容是在change事件后,輸入框失去焦點(diǎn)才改變',
}
})
</script>
③ - trim：自動(dòng)過濾用戶輸入的首尾空格咏连，<input v-model.trim="msg">
- **v-for 指令： ** vue提供的循環(huán)指令盯孙，和js的forEach差不多，先看一段代碼
<body>
<div id="app">
<!-- 模板迭代 -->
<span>模板迭代</span>
<ul>
<template v-for="(item,index) in 'items' ">
<li>{{ item }}-{{index}}</li>
</template>
</ul>
<span>對象迭代</span>
<ul>
<li v-for="(value,key,index) in obj">
<span>{{value}}-{{key}}-{{index}}</span>
</li>
</ul>
<span>數(shù)組迭代</span>
<ul>
<li v-for="(item,index) in gc">
<span>{{item.name}}-{{index}}</span>
<span>{{item.age}}-{{index}}</span>
</li>
</ul>
<span>整數(shù)迭代</span>
<ul>
<li v-for="i in 10">{{i}}</li>
</ul>
<span>字符串迭代</span>
<ul>
<li v-for="i in 'span' ">{{i}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
gc:[
{name:'zhangsan',age:10},
{name:'lisi',age:21},
{name:'wangwu',age:22},
{name:'wangwu',age:22}
],
obj:{
name :'gc',
age :28
}
}
})
</script>
</body>
v-for 在組件中的應(yīng)用：一個(gè)簡單的例子todo-list祟滴，可以先跳過振惰，學(xué)了組件再回看:(重要)
<body>
<!-- 沒看組件部分的可跳過，看了組件再來看 -->
<div id='app'>
<input type="text" v-model="todolist" @keyup.enter="addText">
<!-- 監(jiān)聽keyup事件垄懂，有修飾符.enter骑晶，指按了enter鍵了才觸發(fā)后面函數(shù) -->
<ul>
<li is="todo-list" v-for="(item,index) in gc" :title="item" @remove="gc.splice(index,1)"></li>
<!-- 若這里沒用is屬性寫,直接用的組件名稱，而且不加 :key=" xxx "屬性則會(huì)報(bào)一個(gè)警告 component lists rendered with v-for should have explicit keys -->
<!-- is 屬性可看我寫的組件中的is屬性詳解文檔 -->
</ul>
</div>
<script>
// 我們來做一個(gè)簡單的todoList的列子
// 定義一個(gè)全局組件
Vue.component('todo-list',{
template:'<li>{{title}} <button @click="$emit(\'remove\')">X</button></li>',//組件模板
//@cilck綁定的點(diǎn)擊事件草慧，@是v-on：的簡寫方式桶蛔，$emit('xx')能派發(fā)子組件的觸發(fā)的事件，父組件能通過監(jiān)聽此事件(@xx='...')然后執(zhí)行代碼
props:['title'] //接受父組件傳來的數(shù)據(jù)漫谷，然后用在此組件模板中
})
new Vue({
el:'#app',
data:{
gc:[
'第1個(gè)未做的',
'第2個(gè)未做的',
'第3個(gè)未做的'
],
todolist :''
},
methods:{
// 定義一個(gè)函數(shù)添加用
addText(){
this.gc.push(this.todolist); //往遍歷的數(shù)組中添加數(shù)據(jù)
this.todolist = '' //清空輸入框的值
}
}
})
</script>
</body>
v-for 和 v-if 當(dāng)它們處于同一節(jié)點(diǎn)仔雷， v-for 的優(yōu)先級(jí)比 v-if 更高，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }} //會(huì)先循環(huán)再判斷
</li>
vue與v-for有關(guān)數(shù)組數(shù)據(jù)變化而視圖不更新的情況以及解決辦法--傳送門
- ** v-text 和 v-html 指令： **
<body>
<div id="app">
<span v-text="gc"></span>
<!-- 和下面相同 -->
<span>{{gc}}</span>
<span v-html="gc"></span>
<!-- 和下面相同 -->
<span>{{gc}}</span>
<!-- 最終都渲染出<span>value</span> -->
<!-- v-text和v-html指令區(qū)別在于v-html能解析標(biāo)簽舔示，而text不能 -->
</div>
<script>
new Vue({
el:'#app',
data:{
gc : 'value'
}
})
</script>
</script>
</body>
** v-on 指令： ** 事件綁定和監(jiān)聽指令碟婆，用在普通元素上時(shí)，只能監(jiān)聽原生DOM事件惕稻，使用在自定義元素組件上時(shí)竖共，可以監(jiān)聽子組件觸發(fā)的自定義事件，在監(jiān)聽原生DOM事件時(shí)俺祠，可以用特殊變量$event把它傳入方法eg: v-on:click ="add($event)",其指令簡寫方式為 @click 公给，當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除锻煌。你無須擔(dān)心如何自己清理它們妓布。
事件修飾符:
- .stop 阻止單擊事件冒泡 <a v-on:click.stop="doThis"></a>
- .prevent 阻止默認(rèn)事件觸發(fā) <form v-on:submit.prevent="onSubmit"></form>
- .capture 開啟事件捕獲
- .self 僅僅本元素才觸發(fā)此綁定事件,子孫元素不能觸發(fā)
- .once 僅僅觸發(fā)一次姻蚓，不能多吃觸發(fā)
使用修飾符時(shí)宋梧，順序很重要@click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 @click.self.prevent 只會(huì)阻止元素上的點(diǎn)擊狰挡。
- 鍵值修飾符：監(jiān)聽鍵盤事件
- .enter
- .tab
- .delete (捕獲 “刪除” 和 “退格” 鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
可以通過全局 config.keyCodes 對象自定義鍵值修飾符別名：
// 可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112
- 修飾鍵
- .ctrl
- .alt
- .shift
- .meta
- 滑鼠按鍵修飾符
- .left
- .right
- .middle
- ** v-bind指令：**用于相應(yīng)更新HTML特性捂龄。
綁定src ：
是錯(cuò)誤寫法,正確為
綁定 class：
1、對象語法：
<div v-bind:class="{ active: isActive }"></div> //isActive為真就添加active樣式
2加叁、數(shù)組語法：
<div v-bind:class="[activeClass, errorClass]"> //2個(gè)類名都會(huì)渲染上
3倦沧、用在組件上：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
<my-component class="baz boo"></my-component>
最終渲染成為：<p class="foo bar baz boo">Hi</p>
綁定內(nèi)聯(lián)樣式style：
1、對象語法：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
2它匕、數(shù)組語法：
<div v-bind:style="[baseStyles, overridingStyles]">
3展融、自動(dòng)添加前綴：
當(dāng) v-bind:style使用需要使用特定前綴的 CSS 屬性時(shí)，如 transform豫柬，Vue.js 會(huì)自動(dòng)偵測并添加相應(yīng)的前綴告希。
4扑浸、多重值：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">從 2.3 開始你可以為 style 綁定中的屬性提供一個(gè)包含多個(gè)值的數(shù)組，常用于提供多個(gè)帶前綴的值
** v-pre指令：** 編譯時(shí)跳過當(dāng)前元素和它的子元素燕偶，可以用來顯示原始的標(biāo)簽及內(nèi)容喝噪，跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯。
** v-ref指令：** 此指令能拿到當(dāng)前組件內(nèi)的DOM元素包括子組件指么，通過this.$refs.xx酝惧，注意當(dāng)v-ref和v-for一起使用時(shí)，注冊的值就是一個(gè)數(shù)組,2.0已經(jīng)改版伯诬，變?yōu)閷傩酝泶剑韵率侵苯邮褂脤傩缘姆绞?/p>
<span ref='ids' ></span>
js中可以通過this.$refs.ids 拿到上面的標(biāo)簽span
