1. v-model
是將標籤的value值與vue實例中data屬性進行綁定
請輸入您的專業:<input type="text" v-model="major"/>
new Vue({
el:'#app',
data:{
major:'java'
}
})
2. v-on
通過配合具體的事件名,來綁定vue中定義的函數
請輸入您的專業:<input type="text" v-on="changeMajor"/>
new Vue({
el:'#app',
data:{
major:'java'
},
methods:{
changeMajor:function(){
console.log("change Title")
}
}
})
3.v-bind
我們知道差值表達式是不能寫在html的標籤的屬性內的,那如果一定要用vue中的屬性作爲html標籤的屬性的內容,就可以通過v-bind進行屬性綁定。
new Vue({
data:{
link:'http://www.baidu.com'
}
});
<a v-bind:href="link"> 百度 </a>
4.v-once
此時該標籤中的插值表達式,只獲取一次數據。之後數據的變化不影響此差值表達式的值。
5. v-hmtl 和 v-text
v-html會將vue中的屬性值作爲html的元素來使用
v-text會將vue中的屬性的值只作爲純文本來使用
<span v-html="mylink"></span>
<span v-text="mylink"></span>
new Vue({
el:'#app',
data:{
link:'http://baidu.com',
mylink:'<a href="http://www.baidu.com">百度</a>'
}
})