v-text
根據(jù)官網(wǎng)的解釋，v-text更新了元素的textContent，v-text 約等于 插值
<template>
<div id="app" v-text="message">
</div>
</template>
<script>
import Slots from './components/Slot'
export default {
name: 'App',
data(){
return {
message:'Hello Vue'
}
},
}
</script>
<div id="app" v-text="message">
捏捏捏
</div>
如果在中間添加內(nèi)容，發(fā)現(xiàn)瀏覽器無顯示。說明v-text權(quán)重高于插值。
v-html
更新元素的 innerHTML 。注意：內(nèi)容按普通 HTML 插入 - 不會作為 Vue 模板進(jìn)行編譯 。
<template>
<div id="app" v-html="message">
捏捏捏
</div>
</template>
<script>
import Slots from './components/Slot'
export default {
name: 'App',
data(){
return {
message:'<span>我是html</span>'
}
},
}
</script>
同樣不會顯示文字，與v-text不同的是，v-html可以解析標(biāo)簽；如果此處使用v-text 會顯示span
v-bind(:)
用法：
動態(tài)地綁定一個或多個特性，或一個組件 prop 到表達(dá)式。
在綁定 class 或 style 特性時，支持其它類型的值，如數(shù)組或?qū)ο蟆?br>
在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
沒有參數(shù)時，可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持?jǐn)?shù)組和對象。
（v-bind的用處比較廣泛，詳情建議看一下官網(wǎng)的文檔或者直接百度相關(guān)內(nèi)容）
<template>
<div id="app" v-bind:class="{red:isRed}">
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
isRed:true
}
},
}
</script>
<style scoped>
</style>
同理可綁定其他屬性
官網(wǎng)例子就不敲了
v-show和v-if
v-show的原理 ----》jq里的 hide() display：none
v-if的原理---》jq里的 remove() DOM是否加載
<template>
<div id="app">
<input type="text" @keyup.enter="val" v-model="inputValue"/>
<p v-for="(item,index) in arr" :key="index">{{item.message}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
inputValue:'',
arr:[] //存儲輸入內(nèi)容
}
},
methods:{
val(ev){
this.arr.push({message:this.inputValue})
this.inputValue=''
}
}
}
</script>
<style scoped>
</style>
代碼很簡單，循環(huán)空數(shù)組，通過input中的value Enter動態(tài)加入內(nèi)容
<div id="app">
<input type="text" @keyup.enter="val" v-model="inputValue"/>
<p v-show="!arr.length">可見的v-show</p>
<p v-for="(item,index) in arr" :key="index">{{item.message}}</p>
</div>
在中間加段內(nèi)容，那么v-show與v-if一樣都是通過布爾值判定，初始化arr為空所以此時為true
當(dāng)輸出內(nèi)容回車之后，此時arr.length存在，則v-show此時是false
消失的同時可以看到下方DOM是有display：none的樣式的，同理換成v-if，則是沒有DOM
v-for與v-on前面講了許多就不重復(fù)了
data
關(guān)于data，很多人的第一印象就是，這個東西很簡單，不就是把數(shù)據(jù)寫到data里，就可以用雙括號綁定數(shù)據(jù)了嗎？
官方文檔：
Vue 實(shí)例的數(shù)據(jù)對象。Vue 將會遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。對象必須是純粹的對象 (含有零個或多個的 key/value 對)：瀏覽器 API 創(chuàng)建的原生對象，原型上的屬性會被忽略。大概來說，data 應(yīng)該只能是數(shù)據(jù) - 不推薦觀察擁有狀態(tài)行為的對象。
一旦觀察過，不需要再次在數(shù)據(jù)對象上添加響應(yīng)式屬性。因此推薦在創(chuàng)建實(shí)例之前，就聲明所有的根級響應(yīng)式屬性。
實(shí)例創(chuàng)建之后，可以通過 vm.$data 訪問原始數(shù)據(jù)對象。Vue 實(shí)例也代理了 data 對象上所有的屬性，因此訪問 vm.a 等價于訪問 vm.$data.a。
以 _或 $開頭的屬性 不會 被 Vue 實(shí)例代理，因?yàn)樗鼈兛赡芎?Vue 內(nèi)置的屬性、API 方法沖突。你可以使用例如 vm.$data._property 的方式訪問這些屬性。
當(dāng)一個組件被定義，data 必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)，因?yàn)榻M件可能被用來創(chuàng)建多個實(shí)例。如果 data 仍然是一個純粹的對象，則所有的實(shí)例將共享引用同一個數(shù)據(jù)對象！通過提供 data 函數(shù)，每次創(chuàng)建一個新實(shí)例后，我們能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象。
如果需要，可以通過將 vm.$data 傳入 JSON.parse(JSON.stringify(...)) 得到深拷貝的原始數(shù)據(jù)對象。
export default {
name: 'App',
data(){
return {
name:'vue'
}
},
mounted(){ //不懂這個無所謂
console.log(this.$data)
}
}
Vue 將會遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化，所以數(shù)據(jù)是通過get和set方法進(jìn)行數(shù)據(jù)綁定的。
把name改成$name or _name，控制臺可以輸出值，但無法渲染到dom上，還會報(bào)錯
mounted(){
console.log(this.$data.$name)
}
methods
methods 將被混入到 Vue 實(shí)例中?？梢灾苯油ㄟ^ VM 實(shí)例訪問這些方法，或者在指令表達(dá)式中使用。方法中的 this 自動綁定為 Vue 實(shí)例。（不多說，可以自己打印一下this自己看看）
