五、课程05 事件学习
1、v-on绑定监听事件，简写用@
<body>
<div id="vue-app">
<button v-on:click="age++">增加年龄</button>
<button @click="age--">减少年龄</button>
<button v-on:dblclick="add(10)">加10岁</button>
<button v-on:click="dele()">减10岁</button>
<p>我的年龄是{{age}}</p>
<div id="canvas" v-on:mousemove="creXY">
{{X}},{{Y}}
</div>
</div>
</body>
2、app.js中定义属性和方法
//实例化vue对象
new Vue({
el: '#vue-app',//element
data() {
return {
age: 18,
X: 0,
Y: 0
}
},
methods: {
add(tmp) {
this.age += tmp
},
dele() {
this.age -= 10
},
creXY(event) {
this.X = event.clientX;
this.Y = event.clientY;
}
}
})
3、css样式
#canvas{
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333;
}
六、事件修饰符
1、.prevent - 调用 event.preventDefault()，阻止默认事件
index.html中
<a v-on:click.prevent="handleUrl()" href="http://www.baidu.com">百度</a>
app.js中
methods: {
handleUrl() {
alert('hello')
}
}
在不添加阻止默认事件prevent，在弹出hello，点击确定后会跳转至百度，添加阻止默认事件后，不跳转。
事件修饰符很多，可参考官网API，指定部分。
七、键盘事件
keyon键盘弹起，keydown键盘按下,键盘事件也可以添加修饰符，enter等
index.html
<label>姓名</label>
<input type="text" v-on:keyup.enter="logName">
<label>年龄</label>
<input type="text" v-on:keydown.alt.enter="logAge">
app.js
methods: {
logName() {
console.log('正在输入姓名。。。')
},
logAge() {
console.log('正在输入年龄。。。')
}
}
八、v-model双向绑定
<label>姓名</label>
<span>{{name}}</span>
<input type="text" v-model="name">
<label>年龄</label>
<span>{{age}}</span>
<input type="text" v-model="age">
九、ref的使用
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
<label>班级</label>
<span>{{banji}}</span>
<input type="text" ref='className' @keyup="getClassName">
getClassName() {
this.banji = this.$refs.className.value;
}
十、watch的使用
watch可以对属性的值进行监听，查看当前value和历史value，仅保留上一次的结果。一般可用于调试。
watch: {
name(val, oldVal) {
console.log(val, oldVal);
},
age(val, oldVal) {
console.log(val, oldVal);
}
}
