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