- 數(shù)據(jù)綁定
直接輸出
<div id="app">
{{message}} 直接輸出
</div>
var app = new Vue({
el : "#app",
data : {
message : "hello world"
}
})
input輸入與message雙向綁定
<div id="app">
<input type="text" v-model="message" />
</div>
var app = new Vue({
el : "#app",
data : {
message : "hello world"
}
})
數(shù)據(jù)只綁定一次
<div id="app">
<p v-once>{{message}}</p>
<p>{{message}}</p>
<input type="text" v-model="message"/>
</div>
var app = new Vue({
el : "#app",
data : {
message : 1
},
created : function () {
this.message = 2
}
})
- 屬性綁定
<div id="app">
<span v-bind:title="message"> 綁定title屬性</span>
</div>
var app = new Vue({
el : "#app",
data : {
message : "span的title顯示我"
}
})
可簡寫
<span :title="message" > </span>
- 判斷條件
<div id="app">
<span v-if="message">如果message為true 顯示，false不顯示</span>
</div>
var app= new Vue({
el : "#app",
data : {
message : true
}
})
- 循環(huán)
<div id="app">
<ol>
<li v-for="item in datas"> {{item.name}} </li>
</ol>
</div>
var app = new Vue({
el:"#app",
data : {
datas : [
{name : 'xiao ming'},
{name : 'xiao fang'}
]
}
})
向數(shù)組中追加
app.datas.push({name:'xiao hua'})
- 事件監(jiān)聽
<div id="app">
<p> {{message}} </p>
<button v-on:click="reverse">翻轉(zhuǎn)message</button>
</div>
var app = new Vue({
el:"#app",
data : {
message : '1.2.3'
},
methods : {
"reserve" : function () {
this.message = this.message.split('.').reverse().join('.')
}
}
})
可簡寫
<button @click="reverse"></button>
- HTML的引入
<div id="app" v-html="ol">
</div>
var app = new Vue({
el: '#app',
data: {
ol : '<ol><li>1111</li><li>2222</li></ol>'
}
})
- 組件的使用
<div id="app">
<my-name></my-name>
<my-name></my-name>
<my-name></my-name>
</div>
Vue.component('my-name',{
template : '<span>abcdef</span>'
})
var app2 = new Vue({
el : '#app2'
})
- 組件數(shù)據(jù)的綁定
<ol id="app">
<my-template v-for="item in list" v-bind:myitem="item" v-bind:key="item.id">
</my-template>
</ol>
Vue.component('my-template',{
props : ['myitem'],
template : "<li>{{myitem.name}}</li>"
})
var app = new Vue({
el : "#app",
data : {
list : [
{id : 1, name : '小芳'},
{id : 2, name : '小明'}
]
}
})
這里的props['myitem'] 只能是小寫字母驹饺，不允許使用大寫和其他字符("-")
- 防止屬性被修改——使響應(yīng)式系統(tǒng)無法追蹤變化
<div id="app1">
{{message}}
<input type="text" v-model="message" />
</div>
var data = {
message : '123'
}
Object.freeze(data)
var app1 = new Vue({
el : "#app1",
data : data
})
message的值不隨著輸入改變
- vue的實例屬性和方法
這些屬性與方法都具有前綴 $呀闻，以便與用戶定義(user-defined)的屬性有所區(qū)分
vm.$data
vm.$el
// $watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) {
// 此回調(diào)函數(shù)將在 `vm.a` 改變后調(diào)用
})
https://vuefe.cn/v2/api/#search-form
- 實例生命周期鉤子函數(shù)
在實例創(chuàng)建后調(diào)用
var app = new Vue({
data : {
a:1
},
created : function () {
this.a = 2
console.log(this.a)
}
})
created : 實例創(chuàng)建后調(diào)用
mounted : 實例掛載之后調(diào)用
updated : 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會調(diào)用該鉤子
destroyed : 實例銷毀后調(diào)用
- 注意
不要在選項屬性或者回調(diào)函數(shù)中使用[箭頭函數(shù)]
created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())
因為箭頭函數(shù)會綁定父級上下文熙暴，所以 `this` 不會按照預(yù)期指向 Vue 實例咬腋，經(jīng)常會產(chǎn)生一些錯誤
例如
Uncaught TypeError: Cannot read property of undefined
Uncaught TypeError: this.myMethod is not a function
- computed 屬性
通過設(shè)置computed屬性吸申，不改變原始數(shù)據(jù)的值
<div id="app">
<p>{{reverse}}</p> olleh
<p>{{message}}</p> hello
</div>
var app = new Vue({
el : "#app",
data : {
message : 'hello'
},
computed : {
reverse : function () {
return this.message.split('').reverse().join('')
}
}
})
