今天先介紹Vue最簡單最基本的語法,聲明式渲染。
Vue實例
上篇文章中我們使用new關鍵字創建了一個Vue實例:
<div id="app">
<div>messgae:{{message}}</div>
</div>
<script>
var vm = new Vue({
//el是css選擇器,或者HTMLElement實例,提供Vue實例掛載的Dom節點
el:'#app',
data:{
message:'hello vue'
}
});
</script>
或者(如果沒有提供el選項,需要手動調用mount方法)
var vm = new Vue({
data:{
message:'hello vue'
}
}).$mount('#app');
插值
普通文本
使用 {{ }} 實現數據綁定到視圖:
<div>messgae:{{message}}</div>
var vm = new Vue({
data:{
message:'hello vue'
}
}).$mount('#app');
運行效果:
使用js表達式
可以在{{}}使用簡單的js表達式,例如:
<div>{{num+1}}</div>
<div>{{isRight? name1:name2}}</div>
<div>{{str.split('_').join('')}}</div>
原始html
{{}} 語法會將數據解釋爲普通文本,而不是html。有時我們確實需要插入html而非普通文本(雖然這種情況很少見,至少目前我沒有遇到過這樣的需求,所以這裏簡單帶過。真正用到時,可以去官方文檔查看)。
使用v-html指令:
<div id="app">
<div>message:{{message}}</div>
<div>原始html:{{html}}</div>
<div v-html="html">原始html:</div>
</div>
<script>
var vm = new Vue({
data: {
message: 'hello vue',
html: '<div style="color: red;">hello world</div>'
}
}).$mount('#app');
</script>
運行效果:
新的屬性
注意:由於Vue底層的實現,Vue無法監聽新加的屬性變化。
Vue只在初始化的時候,遞歸data的屬性轉換爲setter/getter方法,使data的屬性可以響應數據變化。所以一個屬性如果沒有在data中聲明,而是後期加進去的,vue監聽不到該屬性的變化,也就無法做到視圖的同步改變。
解決方案有兩種:
data 中聲明所有屬性
既然無法監聽到新添加的屬性,那在data中聲明所有要用到的屬性,並賦予其默認值就可以了。後期屬性改變的時候,vue就可以監聽到屬性變化,做到視圖同步改變了。
Vue的$set()
set api
set()方法向響應式對象中添加一個屬性,並確保這個新屬性同樣是響應式的,且觸發視圖更新。
如下例:info中未聲明weight屬性,在add中直接新增,視圖不會響應改變,使用this.$set()方法可以將新增屬性設置爲響應式的。
<div>height:{{info.height}}</div>
<div>weight:{{info.weight}}</div>
<button @click="add">add</button>
data: {
name: 'ayy',
info: {
height: 165
}
},
methods: {
add() {
//直接新增,響應不到
// this.info.weight = 60;
/*
* vue的set方法可以新增響應屬性
* 第一個參數爲要新增的對象
* 第二個參數爲要新增的屬性名
* 第三個爲屬性值
*/
this.$set(this.info,'weight',60);
}
}
但是set方法不允許動態添加根級響應式屬性,所以如果是根級屬性(data數據對象中第一層屬性),必須在data中聲明。
如果你使用了未在data中聲明的屬性,Vue 將警告你渲染函數正在試圖訪問不存在的屬性。