1.事件绑定
v-on：后面加标准事件，也可以简写为@
事件后面可以跟修饰符，event代指本身
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
2. 键盘修饰符
v-on:keyup.+按键名称
自定义按键
Vue.config.keyCodes.name=按键对应的代码
通过绑定事件函数event.keyCode来获取代码
3.属性绑定
v-bind：href=“url” 也可以直接简写为：
<div id=app"> <a v-bind:href="url">百度</a>
<a :href="url">百度2</a>
<button @click="handle">切换</button>
<div>{{msg}}</div>
<div><input type="text" :value="msg" @input="msg=$event.target.value"></div></div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"123",
url:"http://www.baidu.com"
},
methods:{
handle:function(){
this.url="https://cn.vuejs.org/"
}
}
})
</script>
4.样式绑定
也是用过 v-bind来实现
通过控制class的显示来控制样式
v-bind：class="class名：isclass名（只有true和flase两个值来控制class显示与否）通过函数来修改值
v-bind：class=“【类名class，类名class】 添加类
var vm=new Vue({
el:"#app",
data:{
类名class：“类名”
类名class：“类名”
},
实例：简单计算器
<h1>简单计算器</h1>
<div>数值a:<input type="text" v-model="a"></div>
<div>数值b:<input type="text" v-model="b"></div>
<button v-on:click="add">计算</button>
<div>计算结果:<span v-text="answer"></span></div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"123",
a: "",
b:"",
answer:""
},
methods:{
add:function(){
this.answer=parseInt(this.a)+parseInt(this.b)
}
}
})
</script>