<div id="app">
<h2 v-html="msg"></h2>
<h2 v-text="msg"></h2>
<h2>{{msg}}</h2>
<h2 v-pre>{{msg}}直接打印</h2>
<h2 v-once>{{msg}}</h2>
<input type="text" v-model="msg">
<button @click="changemsg()">改變數(shù)據(jù)</button>
<button v-on:click="msg='直接寫入'">改變數(shù)據(jù)</button>
<p v-for="n in 5">薛忠海 {{n*2}}</p>
</div>
<script src="./vue.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
msg: '調(diào)用數(shù)據(jù)',
},
methods: {
changemsg() {
this.msg = "方法"
}
}
});
</script>
1.v-text：作用單純分唾，就是來渲染文本的
2.v-html：在渲染文本的時候莲趣，如果含有標(biāo)簽會解析成dom元素
3.v-cloak：這個以屬性方式定義在元素身上爬骤，當(dāng)vue初始化完畢要渲染的時候會自動取出該標(biāo)簽醋奠，利用特性可以解決插值表達(dá)式的缺陷幢竹。
4.雙大括號和v-text會將數(shù)據(jù)解析成純文本耳峦，而非html，為了輸出真正Html焕毫，需要使用v-html蹲坷，但是對于沒有html標(biāo)簽的數(shù)據(jù)綁定時作用同v-text和{{}},注意：使用v-html渲染數(shù)據(jù)可能非誠危險驶乾，因為它容易導(dǎo)致XSS(跨站腳本)攻擊，慎用循签，能使用{{}}和v-text實現(xiàn)不要使用它级乐。
5.v-pre網(wǎng)頁直接顯示原始值，不會輸出Vue中的data值县匠。
image.png
image.png
7.v-model：
- .lazy取代input監(jiān)聽change事件
- .trim自動將輸入的內(nèi)容首尾空格去掉
- .number自動將輸入的字符串轉(zhuǎn)為數(shù)字
