1.v-on
on就是可以理解为监听的意思,可缩写为@
比如说我们可以监听click事件,当点击事件发生的时候,出发对应的方法
<div id="app">
<button v-on:click="handelBtn">show alter</button>
</div>
<script>
let vm = new Vue({
el: '#app',
methods: {
handelBtn: function() {
alert('hello world')
}
}
})
</script>
methods是vue的参数,主要用于存放方法,
当点击按钮后,就会弹出alter,所触发的方法必须写在methods内,
因为v-on可以缩写为@
所以上述button代码可以改为如下所示
<button @click="handelBtn">show alter</button>
2.v-bind
官方的说法是单向绑定一个DOM元素,但按照我的理解,不如说是v-bind会将内容转换为js表达式更加容易理解
比如说 input = “text”,意思是input的值是“text”,
若改为v-bind:input = “text” ,意思是input的值是 text这一个变量,此时的text是一个js表达式,而不是一个字符串。
v-bind: 可以缩写为 :
以下为示例
<div id="app">
<div :style="styleObj" @click="handleClick">
hello world
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
styleObj: {
color: 'red'
}
},
methods: {
handleClick: function() {
this.styleObj.color =
this.styleObj.color === 'black' ? 'red' : 'black'
}
}
})
</script>
此示例为当该div标签检测到click事件的时候,会触发handleClick事件。
handleClick会对styleObj这个对象中的color进行判断,若为black则改为red,否则赋值为black。
style是单向绑定(js表达式),所以styleObj发生变化的时候,style的值也会跟着发生变化。
运行效果如下所示
点击hello world后,它会变为红色,若点击红色的hello world,他会变为黑色
3.v-model
v-model是双向绑定,下面的代码所实现的功能中,当你修改输入框的内容,data中inputValue也会随着修改。
当你对data中的inputValue赋值,如在浏览器的控制台中输入vm.$data.inputValue = ‘111’,这样的命令,input框所展现的内容会变成111
<div id="app">
<input type="text" v-model="inputValue" />
<button v-on:click="handelBtn">show alter</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
inputValue: '',
btnValue: ''
},
methods: {
handelBtn: function() {
alert(this.inputValue)
alert(this.btnValue)
}
}
})
</script>
v-model 没有缩写