1.v-text指令
- v-text这个指令的作用：设置标签的内容（textContent）
- 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。
- 内部支持写表达式
2.v-html指令
- v-html指令的作用是设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么，只会解析为文本
- 解析文本使用v-text，需要解析html结构使用v-html
3.v-on指令
- v-on指令的作用是：为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法的内部通过this关键字可以访问定义在data中数据
4.计数器案例
// 由于这里主要学习Vue的知识，CSS代码就不放进来了 <body> <div id="app"> <button class="left" @click="sub">-</button> <span>{{ num }}</span> <button class="right" @click="add">+</button> </div> <script> var app = new Vue({ el: "#app", data: { num: 1 }, methods: { add: function () { if (this.num < 10) { this.num++; } else { alert("不能再加啦！") } }, sub: function () { if (this.num > 0) { this.num--; } else { alert("不能再减啦！") } } } }) </script> </body>
总结：
- 创建Vue实例时：el设置的是挂载点，data设置的是数据，method设置的是方法
- v-on指令的作用是绑定事件，简写为@
- 方法的内部通过this关键字获取data中的数据
- v-html指令的作用是：设置元素的innerHTML
