<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()">改变数据</button>
<button v-on:click="msg='直接写入'">改变数据</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: '调用数据',
},
methods: {
changemsg() {
this.msg = "方法"
}
}
});
</script>
1.v-text：作用单纯，就是来渲染文本的
2.v-html：在渲染文本的时候，如果含有标签会解析成dom元素
3.v-cloak：这个以属性方式定义在元素身上，当vue初始化完毕要渲染的时候会自动取出该标签，利用特性可以解决插值表达式的缺陷。
4.双大括号和v-text会将数据解析成纯文本，而非html，为了输出真正Html，需要使用v-html，但是对于没有html标签的数据绑定时作用同v-text和{{}},注意：使用v-html渲染数据可能非诚危险，因为它容易导致XSS(跨站脚本)攻击，慎用，能使用{{}}和v-text实现不要使用它。
5.v-pre网页直接显示原始值，不会输出Vue中的data值。
image.png
image.png
7.v-model：
- .lazy取代input监听change事件
- .trim自动将输入的内容首尾空格去掉
- .number自动将输入的字符串转为数字
