一：模板动态参数
默认写法：
<div @click="onceFun()">once只触发一次回调</div>
<div :title="hoverTitle">title动态参数</div>
动态参数写法：
<div @[event]="onceFun()">click动态参数</div>
// data 中定义 event:'click'
<div :[hoverEve]="hoverTitle">title动态参数</div>
// data 中定义 hoverEve:'title'二：指令修饰符
-
v-on 绑定事件监听器， 事件类型由参数指定
-
缩写 @
-
修饰符
-
.left 点击鼠标左键时触发
-
.right 点击鼠标右键时触发
-
.middle 点击鼠标中键时触发
-
.once 只触发一次的回调
-
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调
-
.stop 调用event.stopPropagation() 阻止事件冒泡
-
.prevent 调用event.preventDefault() 阻止默认事件
-
.capture 添加事件侦听器时使用capture模式
-
.{keyAlias} 仅当事件是从特定键触发时才触发回调
-
-
-
v-bind 绑定属性
-
缩写 ：
-
-
v-model 用在表单组件或者组件上的数据双向绑定
-
修饰符
-
.lazy 监听change而不是input事件
-
.number 输入字符串转为有效的数字
-
.trim 输入首尾空格过滤
-
-
<h2>指令缩写 及 修饰符</h2>
<h3>v-on</h3>
<!-- v-on 缩写是@ -->
<div v-on:click="arr.push('牛奶')">点击数组增加</div>
<div @click="arr.push('包子')">点击数组增加</div>
<!-- v-on 修饰符 -->
<div>
<span v-for="item in arr" :key="item.id">{
{item}}</span>
</div>
<!-- .left 点击鼠标左键时触发 -->
<div @click.left="arr.push('左键')">点击鼠标左键触发</div>
<!-- .right 点击鼠标右键时触发 -->
<div @click.right="arr.push('右键')">点击鼠标右键触发</div>
<!-- .middle 点击鼠标中键时触发 -->
<div @click.middle="arr.push('中键')">点击鼠标中键触发</div>
<!-- .once 点击回调，只触发一次 -->
<div @click.once="onceFun()">once只触发一次回调</div>
<!-- .{keyAlias} 仅当事件是从特定键触发时才触发回调 -->
<button @click.A="rFun">11</button>
<input type="text" @click.9="rFun">
<!-- 由于事件冒泡，点击button后btnclick和divclick事件都会触发 -->
<div @click="divClick">
点击<button type="button" @click="btnClick">按钮1</button>
</div>
<!-- .stop 调用event.stopPropagation() 阻止事件冒泡 -->
<div @click="divClick">
点击
<button type="button" @click.stop="btnClick">.stop按钮1</button>
</div>
<!-- .self 只当事件是从侦听器绑定的元素本身触发时才触发回调 -->
<div @click.self="divClick">
点击
<button type="button" @click="btnClick">.self按钮1</button>
</div>
<!-- .prevent调用event.preventDefault()：阻止默认事件 -->
<form action="https://www.baidu.com/">
<input type="submit" value="prevent提交" @click.prevent="subClick"/>
</form>
<!-- .{keyAlias} 仅当事件是从特定键触发时才触发回调 监听某个按键(回车)的点击 -->
<input type="text" @keyup.enter="keyUpFun"/>
<h3>v-bind</h3>
<!-- v-bind 缩写是: -->
<div v-bind:title="hoverTitle">v-bind</div>
<div :title="hoverTitle">v-bind</div>
<h3>v-model</h3>
<!-- v-model修饰符 -->
<!-- .lazy 监听change而不是input事件 v-model 是每次修改都会绑定值，添加了 lazy 就只会在回车后或者失去焦点后绑定 -->
<input type="text" v-model.lazy="message" @change="messFun()">
<!-- .number 默认以 string 类型保存在 data 中，通过 number 修饰符可以以 number 类型存入 data 中 -->
<!-- input 的类型为 number 只能输入数字,如果没有修饰符，保存到 data 中仍然是 string 类型 -->
<input type="number" v-model.number='message'/>
<!-- .trim 去除字符串两边的空字符 -->
<input type="text" v-model.trim='message'/> onceFun(){
alert('22')
},
rFun(){
alert('RRR')
},
divClick(){
alert('11====点击了divClick')
},
btnClick(){
alert('22====点击了btnClick')
},
subClick(){
alert(1)
},
keyUpFun(){
alert('KEYup')
},
messFun(){
console.log(this.message)
},三：.self 和 .stop的区别 以及.capture
.stop 阻止事件冒泡 不阻止冒泡的话，先冒里面的元素，再冒外面的元素
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为
.capture 事件捕捉。事件捕捉:在事件冒泡发生时，我们只想让某个div执行他的事件
注意：如果我们在div2上使用.capture，在div3上使用.stop，点击div3的区域会发现先执行div2的事件在执行div3的事件，
也就是可以理解为
.capture的优先级>.stop
<!-- ===================================================================================== -->
<h2>.stop和.self的区别 以及.capture</h2>
<!-- 注：.stop 阻止冒泡，不阻止冒泡的话：先冒里面的那个元素，再冒外面的元素 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
<!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
<!-- .self 事件捕捉:在事件冒泡发生时，我们只想让某个div执行他的事件 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div> // .stop和.self的区别
div1Handler() {
alert('这是触发了 inner div 的点击事件')
},
btnHandler() {
alert('这是触发了 btn 按钮 的点击事件')
},
linkClick() {
alert('触发了连接的点击事件')
},
div2Handler() {
alert('这是触发了 outer div 的点击事件')
},