“这是我参与更文挑战的第17天，活动详情查看： 更文挑战”
vue指令v-on：
可以搭配事件使用，后面跟上事件处理函数，如：
点击事件：v-on:click="clickFunction"
鼠标移动事件：v-on:mousemove="getPosition"
如果函数没有传参，可以不写小括号，依然会被当作函数来解析，如果传参，就需要写小括号
v-on:事件=事件处理函数(形参, $event)
两个参数可选
当没有传入形参时，默认有一个事件参数event，不用手动传
v-on:的缩写：@，v-on:click可以缩写成：@click
事件修饰符：
如：
阻止冒泡：.stop
取消默认事件：.prevent
匹配回车触发：.enter
alt+回车触发：.alt.enter
匹配空格触发：.space等等
事件修饰符可以串联使用，如.stop.prevent，功能叠加
小demo：
涉及：
1.vue实参形参的传递与使用 / data字段的获取和使用
2.阻止冒泡的使用：不触发父级鼠标移动事件，不再获取鼠标坐标
3.取消默认事件：点击a标签不跳转
<div id="app">
<button v-on:click="clickCount(10,$event)">点击此处</button>
<p>{{count}}</p>
<p v-on:mousemove="getPosition">输出鼠标位置：{{x}}/{{y}}
<span v-on:mousemove.stop>不输出鼠标位置</span>
</p>
<a v-on:click.prevent href="https://www.baidu.com">百度一下</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
count:0,
x:0,
y:0
},
methods:{
clickCount:function(step, e){
this.count += step;
console.log(e);
},
getPosition:function(e){
this.x = e.clientX;
this.y = e.clientY;
},
// stop:function(e){
// e.stopPropagation()
// }
}
})
</script>
效果：
1.点击button，第一个p标签的数字以10为步数累加，并输出事件e
2.在#app范围内，鼠标移动的坐标均显示在第二个p标签里，除span区域
3.点击a标签，不跳转
小demo2：
涉及：
1.简单的点击事件绑定
2.p标签的显示内容随输入框而改变
3.仅回车后，文本框的内容才改变p标签的内容(.enter的使用)
<div id="app">
<button v-on:click="btnClick">点击</button>
<p>{{value}}</p>
<p><input type="text" v-on:input="inputMethod" ref="input1">{{value1}}</p>
<p><input type="text" v-on:keyUp.enter="inputMethod" ref="input2">{{value2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
value:"",
value1:"",
value2:""
},
methods:{
btnClick: function(){
this.value = '点击按钮显示'
},
inputMethod: function(e){
this.value1 = this.$refs.input1.value;
this.value2 = this.$refs.input2.value;
}
}
})
</script>
效果：
1.点击按钮，输出文字
2.在第一个文本框输入内容，每改变一次，文本框右侧就会相应改变
3.在第二个文本框输入内容，仅回车后，文本框右侧才会做出改变
\
