【vue】vuejs入門(一)
阿新 • • 發佈:2018-12-04
###vue物件的屬性
new Vue({
el:'#app',
data:{
msg:'',
mag:'呵呵呵',
mnb:[
{title:'啊哈哈'},
{title:'啊哈哈2'},
{title:'啊哈哈3'}
]
},
// 偵聽器
watch:{
msg(){
console. log('哈哈哈');
}
},
template:'',
// 計算屬性
computed:{
mpl(){
return this.mag+this.msg;
}
},
methods:{
mplclick(){
alert(this.mpl);
}
},
// 定義元件
components: {
'todo-item':{
template:'<li>item</li>'
}
},
})
###vue的全域性
//全域性元件
Vue.component('todo-item',{
template:'<li>item</li>'
})
###vue的指令
指令 | 詳細 |
---|---|
v-text | 純字串輸出 |
v-html | 轉成html程式碼輸出 |
v-bind: | 簡寫(:) data與元素的屬性繫結 |
v-on: | 簡寫(@) 繫結事件到元素上 |
v-modul | 雙向資料繫結 |
v-if | 銷燬或建立dom |
v-show | 改變display顯示或隱藏dom |
v-for | 迴圈顯示某陣列 |
###計算屬性和偵聽器
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 例項
return this.message.split('').reverse().join('')
}
}
})
計算屬性會快取上一次的計算結果,已達到提高效能的目的。用於內部資料的計算。
偵聽器:當需要在資料變化時執行非同步或開銷較大的操作時,這個方式是最有用的。
偵聽資料項或計算屬性是否發生變化,可用於限制ajax或者開銷較大的方法的操作頻率
在這個示例中,使用 watch 選項允許我們執行非同步操作 (訪問一個 API),限制我們執行該操作的頻率,並在我們得到最終結果前,設定中間狀態。這些都是計算屬性無法做到的。
###v-for的key和多引數