頁面展示
基本指令
-
v-text
用于在頁面中展示數(shù)據(jù)前塔，可以簡寫為{{ }}的形式<p v-text="msg"></p> <p>{{msg}}</p> <!--這兩種寫法是等價的--> -
v-html
同樣是用于展示數(shù)據(jù)杆烁，與v-text區(qū)別相當于innerHtml和textContent<div v-html="msg"></div> -
v-pre
用來在展示頁面是跳過渲染某一段代碼民泵，該方法主要可以用來跳過沒有指令的代碼來提高加載速度<p v-pre>{{msg}}</p> -
v-once
添加了該指令的元素/組件只會渲染一次皆撩，之后vue重新渲染時會直接跳過該元素/組件，即使我們改變元素/組件引用的數(shù)據(jù)续誉，元素也不會重新渲染莱没，我們可以在內(nèi)容固定的元素/指令上使用該指令來節(jié)省性能<tem v-once></tem> <p v-once>{{msg}}</p> -
v-bind
可以綁定一個或多個動態(tài)，或者一個組件的prop酷鸦，在vue中可以使用v-bing來將元素本身的屬性變?yōu)閯討B(tài)特性饰躲， 成為動態(tài)特性后可以接受變量值，使元素更加靈活臼隔，可以簡寫為 " : " 的形式<div :style="" :class=""></div> <img :src="變量值"> -
v-on
綁定事件監(jiān)聽器属铁，事件類型由參數(shù)指定，表達式可以是一個方法的名字或者是一個內(nèi)聯(lián)語句躬翁，當用在普通元素上時只支持原生DOM事件，用在組件上時可以支持自定義事件盯拱，可以簡寫為"@"形式<div @click="click"></div> <div @click="bool=!bool"></div> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button> -
v-cloak
該指令是vue用來配合css樣式在vue沒有在頁面渲染完成之前盒发，使用該指令的元素不顯示，使用戶界面不會展示在渲染未完成之前的{{msg}}之類的修飾符狡逢，該指令會在頁面渲染完成之后自動被去除<style> [v-cloak]{ display:none; } </style> <div v-cloak></div> -
ref
ref用來給元素或者子組件設定引用信息宁舰，引用信息將會注冊在父組件的$refs對象上，如果在普通的DOM上使用奢浑，引用指向的就是DOM元素對象蛮艰，如果在組件上使用，引用指向的就是子組件對象<p ref="p">{{picked}}</p> new Vue({ ... created(){ console.log(this.$refs.p,"created"); // p undefined this.$refs.p.style.color="red"; //Cannot read property 'style' of undefined" }, mounted(){ console.log(this.$refs,"mounted"); //p:p this.$refs.p.style.color="red"; } })通過ref注冊的元素/組件可以在父組件的this.$refs中獲取雀彼，但是需要注意的是壤蚜，我們注冊的元素/組件初始渲染時不能被獲取到的即寡，只有在創(chuàng)建完成時才能被獲取，因為ref本身是作為渲染結果被創(chuàng)建的袜刷，同時refs也不是響應式的
綁定HTML class樣式
<div id="box">
<!--傳入一個對象聪富，對應值來控制當前元素的樣式-->
<p :class="{col:bool,weight:bool}" class="size" @click="change">hello</p>
<!--傳入一個實例中的計算屬性，通過計算屬性的返回值控制當前元素的樣式-->
<p :class="classList">hello</p>
<!--傳入一個實例中的對象著蟹，對象中定義的值會控制當前元素的樣式-->
<p :class="classObj">hello</p>
<!--傳入一個數(shù)組墩蔓，可以用來接收多個樣式對象-->
<!--可以通過使用三元表達式來控制當前元素樣式-->
<p :class="[bool?classList:'']">hello</p>
<!--也可以通過在數(shù)組中傳入對象來傳入多個樣式-->
<p :class="[classList,{col:bool}]">hello</p>
</div>
<script>
new Vue({
data: {
bool: true,
classList: {
colGreen: true,
style: true
},
col: true,
error: {
type: "fatal"
}
},
computed: {
classObj: function () {
return {
col: this.col && !this.error,
weight: this.error && this.error.type === "fatal"
}
}
},
methods: {
change() {
this.bool = false;
}
}
}).$mount("#box")
</script>
:class樣式能夠和原生的class屬性共存，在元素被渲染后萧豆，：class樣式和class的樣式都會被保留
在使用組件的時候奸披，在組件上內(nèi)部添加的樣式將會和在組件上添加的樣式一同被渲染
<body>
<div id="box">
<tem class="size"></tem>
</div>
<script>
const Tem={
template:`
<div class="box">
<p class="col">hello</p>
</div>
`
}
new Vue({
el:"#box",
components:{
"tem":Tem
}
})
//模板最后的渲染結果是
//<div class="size box">
//<p class="col">hello</p>
//</div>
</script>
</body>
綁定內(nèi)聯(lián) style樣式
-
對象語法
：style的對象語法十分直觀，css屬性名可以用駝峰命名法或者短橫分割命名<div :style="{color:activeColor,fontSize:fontSize+'px'}"> data:{ activeColor:'red', fontSize:30 }直接綁定到一個樣式對象通常更好涮雷，讓模板更清晰
<div :style="styleObj"></div> data:{ styleObj:{ color:'red', fontSize:'13px' } }同樣可以集合返回對象的計算屬性使用
-
數(shù)組語法
：style的數(shù)組語法可以將多個樣式對象應用到一個元素上
<div :style="[baseStyles,overr]"><div> data:{ baseStyles:{ color:"red" }, overr:{ fontSize:"40px" } } -
自動添加前綴
當:style使用需要特定前綴的css屬性時阵面，如transform，vue會自動偵測并添加相應的前綴
條件渲染
v-if,v-else,v-else-if
v-if的判斷條件可以是數(shù)據(jù)表達式份殿，也可以是一個變量的值,或者是一條邏輯判斷語句
<div v-if="type==='A'">
A
</div>
<div v-else-if="0<1">
B
</div>
<div v-lese="bool">
C
</div>
也可以通過v-if來控制組件是否能夠顯示
<div id="box">
<tem v-if="bool"></tem>
</div>
v-show
v--show用法與v-if的大致相同膜钓，除了v-show沒有v-else，不同的是帶有v-show屬性的元素始終會被渲染并保留在DOM中卿嘲，v-show是通過切換元素的css樣式disoplay的值來控制元素是否顯示颂斜，而v-if則是通過創(chuàng)建和銷毀來控制元素是否可見，所以相比而言v-if的切換開銷更高一些拾枣，但是v-if是惰性的沃疮，如果初始的條件為false的話，那么它會保持什么也不做梅肤，直到條件發(fā)生變化司蔬，而v-show不論條件是什么都會進行渲染，一般來說姨蝴，v-show會有更高的初始渲染開銷
一般來說俊啼，如果需要非常頻繁的進行切換，那么我們會使用v-show左医，如果運行條件不是經(jīng)常改變授帕，那么我們會使用v-if
列表渲染
v-for
我們使用v-for指令根據(jù)一組數(shù)組選項的列表進行渲染，v-for指令需要以item in items形式的特殊語法浮梢，items是源數(shù)據(jù)組跛十，item是元素迭代的別名
也可以使用of代替in作為分割符
<li v-for="item of items"></li>
在v-for塊中，我們擁有對父級作用域完全的訪問權限秕硝，還支持可選的第二參數(shù)為當前項的索引值
<div id="box">
<p v-for="(item,index) in items">{{item}}{{index}}</p>
</div>
new Vue({
data:{
items:["tom","xm"]
}
}).$mount("#box")
我們也可以使用v-for通過一個對象來迭代
<div id="box">
<p v-for="value in items">{{value}}</p>
</div>
new Vue({
data:{
items:{
name:"tom",
age:18
}
}
}).$mount("#box")
vue對于對象的迭代默認會展示對象的鍵值對的值芥映，可以通過提供第二個參數(shù)來獲取對象的鍵名
<p v-for="(value,ket) in items">{{value}}{{key}}</p>
也可以傳入第三個參數(shù)來獲取索引值
<p v-for="(value,key,index) in items">{{value}}{{key}}{{index}}</p>
這里的遍歷順序遵照JS中Object.keys()的順序
:key
當vue.js在渲染是時發(fā)現(xiàn)已有元素再次被使用時會復用已有元素而不是重新渲染，這會加快vue渲染的速度，同時還有一個好處奈偏，例如下面這個例子
<body>
<div id="box">
<user></user>
</div>
<template id="userInfo">
<div>
<div v-if="loginType ==='username'">
<label>Username</label>
<input type="text" placeholder="請輸入用戶名" >
</div>
<div v-else>
<label>Email</label>
<input type="text" placeholder="請輸入郵箱">
</div>
<button @click="change">switch</button>
</div>
</template>
<script>
new Vue({
components:{
"user":{
template:"#userInfo",
data(){
return{
loginType: "username"
}
},
methods: {
change() {
this.loginType = "Email"
}
}
}
}
}).$mount("#box")
</script>
</body>
在這個例子中坞嘀，我們點擊button進行切換時，veu會復用重復的元素霎苗，template中相同的元素如llabel姆吭，input等元素只會渲染一次，在第二次出現(xiàn)時會被復用唁盏，如lable只會替換它的文字内狸，input只會替換元素的placeholder，而不會再次重復渲染標簽厘擂，所以在點擊切換時我們會發(fā)現(xiàn)輸入框中我們輸入的內(nèi)容會依然存在
這種復用會提高vue的運行效率昆淡，但是有時在實際開發(fā)中我們可能需要避免這種情況，此時需要我們用到:key刽严，我們可以通過為每一個input設置不同的:key來通知vue需要將該元素重新渲染
<input type="text" placeholder="請輸入郵箱" :key="Email">
建議在使用v-for循環(huán)時如果要使用:key要給每一個不同的元素不同的key值昂灵，推薦使用如下方法
<p v-for="item in items" :key="item.id">{{item}}</p>
顯示過濾/排序結果
有時候我們想要顯示一個數(shù)組的過濾或排序副本，而不改變或重置原始數(shù)據(jù)舞萄，在這種情況下眨补，可以創(chuàng)建返回過濾排序數(shù)組的計算屬性
<p v-for="item in items">{{item}}</p>
new Vue({
data:{
num:[1,2,3,4,5,6,7,8]
},
computed:{
items:function () {
return this.num.filter(function (item) {
return item % 2 === 0+it
})
}
}
}).$mount("#box")
在計算屬性不適用的情況下，可以使用methods來配合filter
<p v-for="item in even(nums)">{{item}}</p>
new Vue({
data:{
nums:[1,2,3,4,5,6,7,8]
},
methods:{
even(n){
return n.filter(function (n) {
return n%2===0
})
}
}
}).$mount("#box")
v-for和v-if
類似于v-if倒脓，我們也可以利用帶有v-for的<template>渲染多個元素
<ul>
<template v-for="item in items">
<li>{{item.title}}</li>
</template>
</ul>
當v-if和v-for處于同一節(jié)點撑螺，v-for的優(yōu)先級比v-if更高，這也意味著v-if將會對每一次的v-for循環(huán)進行判斷
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
如果是有條件的跳過循環(huán)的執(zhí)行崎弃，那么可以將v-if置于元素的外層上
組件的v-for
在自定義組件中甘晤，我們可以像普通元素一樣使用v-for
<my-component is="my-component" v-for="item in 10" :key="item.id" :item="item"></my-component>
但是注意在組件中不能使用item，也就是不能拿到父級的數(shù)據(jù)饲做，需要我們通過props獲取父級的數(shù)據(jù)（item）
在vue2.2.0+的版本里线婚，當組件在使用v-for時，key是必須的
表單輸入綁定
v-model會忽略所有表單元素的value盆均，checked塞弊，selected特性的初始值，因為它會選擇Vue實例來作為具體的值泪姨，我們應該通過javascript在組件的data選項中聲明初始值居砖，對于單選按鈕以及列表選項，v-model綁定的是input的value的值驴娃，對于勾選按鈕綁定的是邏輯值
文本
<input v-model='massage' placeholder='edit me'>
<p>{{massage}}</p>
多行文本
<p style="white-sapce:pre-line">{{massage}}</p>
<br/>
<textarea v-model="massage" placeholder="add multiple lines"></textarea>
復選框
-
單個復選框
<input v-model="massage" id="checkbox" type="checkbox"> <label for="checkbox"> -
多個復選框
<form action="#"> <input type="checkbox" id="jack" v-model="checkedNames"> <label for="jack">jack</label> <input type="checkbox" id="john" value="john" v-model="checkedNames"> <label for="john">john</label> <input type="checkbox" id="moke" value="mike" v-model="checkedNames"> <label for="moke">mike</label> </form> <span>checked names:{{checkedNames}}</span> new Vue({ data:{ checkedNames:[] <!--如果我們將checkedNames設置為數(shù)組，那么在復選框選中后會傳回復選框的value值循集， 如果設置為字符串唇敞，那么在復選框被選中后會傳回當前復選框的選中狀態(tài)為true/false，并且所有復選框會被同時選中/不選中 --> } })
單選按鈕
<input type="radio" value="one" v-model="picked" id="one" >
<label for="one">one</label>
<input type="radio" value="two" v-model="picked" id="two" >
<label for="two">two</label>
<p>{{picked}}</p>
new Vue({
data:{
picked:''
}
}).$mount("#box")
選擇列表
-
單選列表
<select v-model="selected"> <option value="" disabled>請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>{{selected}}</span> new Vue({ data:{ selected:'' } }).$mount("#box") -
動態(tài)選項
<select v-model="selected"> <option v-for="option in options" :value="option.value"> {{option.text}} </option> </select> <span>{{selected}}</span> new Vue({ data:{ selected:'A', options:[ {text:'one',value:'A'}, {text:'two',value:'B'}, {text:'three',value:'C'} ] } }).$mount("#box")
動態(tài)value
我們可以利用v-bind：將value綁定到Vue實例的一個動態(tài)屬性上，之后v-model將會綁定到動態(tài)value上疆柔，動態(tài)value可以是對象咒精，字符串，數(shù)組等類型
-
復選框
<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b"> <p>{{toggle}}</p> new Vue({ data:{ a:{ text:'您已經(jīng)選中' }, b:"您沒有選中", toggle:'' } }).$mount("#box") -
單選按鈕
<input type="radio" v-model="pick" :value="a"> <p>{{pick}}</p> new Vue({ data:{ a:'你已經(jīng)選中A', pick:'' } }).$mount("#box") -
動態(tài)列表
參考上一例動態(tài)列表例子
修飾符
-
lazy
<input type="text" v-model.lazy="pick"> <!--在默認情況下旷档，v-model會在input事件中同步輸入框的值與數(shù)據(jù)模叙，在使用lazy修飾符后，會變?yōu)樵赾hange事件中同步--> <!--change事件觸發(fā)條件：輸入框內(nèi)容發(fā)生改變并且失去焦點--> <!--input事件觸發(fā)條件：輸入框內(nèi)容發(fā)生變化--> -
number
<input type="number" v-model.number="pick"> <!--將用戶的輸入值轉化為number類型鞋屈，在通常的時候即使我們使用的是type="number"類型的輸入框范咨，得到的值也是string--> -
trim
<!--自動去掉用戶輸入文本的首尾空格--> <input type="text" v-model.trim="pick">
