内容绑定，事件绑定

v-test指令

作用：设置标签的文本值（textContent）

• 默认写法会替换全部内容，使用差值表达式可以替换指定内容
• 内部支持写表达式

 <div id="app"><h2 v-text="message+'!'">标签原文本值</h2><h2>{{ message +'!'}}标签原文本值</h2></div><script>var app = new Vue({el:"#app",data:{message:"设置标签的文本值",}})
</script>

运行结果：

v-html指令

作用：设置标签的innerHTML

• 内容中有html结构会被解析为标签

v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

<div id="app"><p v-html="content"></p></div> <script>var app = new Vue({el:"#app",data:{content:"<span>标签内容</span>"}})</script>

v-on基础

作用：为元素绑定事件

• 事件名不需要写on
• 指令可以简写为on
• 绑定的方法定义在methods属性中
• 方法内部通过this关键字可以访问定义在data中数据

<div id="app"><input type="button" value="点击" @click="doIt(666,'老铁')"><input type="text" @keyup.enter="sayHi">
</div><script>var app = new Vue({el:"#app",methods: {doIt:function(p1,p2){console.log("做it");console.log(p1);console.log(p2);},sayHi:function(){alert("吃了没");}},})
</script>