vue常用事件

            <!-- 方法处理器 -->
            <button v-on:click="doThis"></button>
            <!-- 内联语句 -->
            <button v-on:click="doThat('hello', $event)"></button>
            <!-- 缩写 -->
            <button @click="doThis"></button>
            <!-- stop停止冒泡 -->
            <button @click.stop="doThis"></button>
            <!-- 阻止默认行为.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() -->
            <button @click.prevent="doThis"></button>
            <!-- 阻止默认行为，没有表达式 -->
            <form @submit.prevent></form>
            <!--  串联修饰符 -->
            <button @click.stop.prevent="doThis"></button>
            <!-- 键修饰符，键别名 -->
            <input @keyup.enter="onEnter">
            <!-- 键修饰符，键代码 -->
            <input @keyup.13="onEnter">

            <!-- 阻止单击事件冒泡 -->
            <a v-on:click.stop="doThis"></a>
            <!-- 提交事件不再重载页面 -->
            <form v-on:submit.prevent="onSubmit"></form>
            <!-- 修饰符可以串联  -->
            <a v-on:click.stop.prevent="doThat"></a>       v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
            <!-- 只有修饰符 -->
            <form v-on:submit.prevent></form>
            <!-- 添加事件侦听器时使用事件捕获模式 -->
            <div v-on:click.capture="doThis">...</div>
            <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
            <div v-on:click.self="doThat">...</div>
            <!--只触发一次-->
            vue2.1新增，也有 v-once
            <a v-on:click.once="doThis"></a>      @click.native  可以在 router-link 中使用原生事件
        全部的按键别名：
            @keyup.enter=""
            .tab
            .delete (捕获 “删除” 和 “退格” 键)
            .esc
            .space
            .up
            .down
            .left
            .right

            2.1.0 新增
            .ctrl
            .alt
            .shift
            .meta

多个class绑定[]，类似jq.addclass
<div id="app" class="bor" :class="[colr,bgo]">
v-model.lazy离开焦点生效
v-model.trim去首尾空格

使用v-if/else会影响内部数据,需要v-model:key标识，:key相同的文本一起单独渲染
  <div v-if="name == 'yuge'">
    用户名：<input :key="1" type="text">
  </div>
  <div v-else>
    密码：<input :key="2" type="text">
  </div>
  <input type="text" v-model="name">
  data () {return {name:'yuge'}}
   tip:输入yuge或其他切换用户名、密码,key分开渲染

$set/Vue.set动态生成数据的控制

directives自定义指令对DOM元素进行底层操作：https://cn.vuejs.org/v2/guide/custom-directive.html   获取dom用ref

钩子直译hook，事件劫持机制，比事件执行更早。

beforeRouteEnter(to,from,next){
//在渲染组件的对应路由被confirm前调用，不能获取组件实例this，钩子未执行，组件实例也未被创建
}
beforeRouteLeave(to,from,next){
//导航离开该组件的对应路由时用，可用this
}

v-model.lazy 只有在input输入框发生blur事件时才触发
v-model.trim 去除首尾空格
v-model.number 输入的字符串转换成number