vue学习经验总结（事件修饰符）

1.常见事件修饰符

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat">

<form v-on:submit.prevent></form>

1.0.16 添加了两个额外的修饰符：

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

2.数据绑定

`v-bind`    数据的单线绑定
`v-modle`  数据的双向绑定，用于表单中（input,radio,text,address,email,select,checkbox,textarea等）

3.通过动态给元素class名来改变样式

方法一：数组带对象

 <p :class=“【class1,class2,{'class3':flag}】”></p>

方法二：单纯的对象

 <p :class=“{class1:true,class2:false}”></p>

方法三：三元判断

 <p :class=“【class1？‘active’," "】”></p>

方法四：对象升级

 <p :class=“classobj”></p>
 data(){
 return{
    classobj:{class1:true,class2:false}
}

4.通过style来实现来实现样式的修改

<p :class=“styleobj”></p>
 data(){
 return{
    styleobj:{color:red}
}

5.按键修饰符：

监听pc键盘上的值

<input @keyup.enter='方法名'></input>

自定义全局按键修饰符
Vue.config.keyCodes.f2=113,就可使用了

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">

全部的按键别名：

enter
tab
delete
esc
space
up
down
left
right

6.使用ref获取dom元素

 <h3  id='myh3' ref='myh3'> </h3>
 methods:{
   getElement(){
     console.log( this.$refs.myh3.innerText)
  } 
 }