vue指令

v-text,v-html

v-html可以过滤掉html标签

v-for

数组:v-for="(item, index) in arrList"
对象:v-for="(value, key) in objList"
组件:<componentA v-for="(value, key) in objList" :key="key"></componentA>

v-bind

class\style绑定

class:
    支持三目运算
      :class="classA ? 'class-a' : 'class-b' "

    对对象的绑定要加{}。
      :class="{ 'class-a': isA, 'class-b': isB}"

      isA:true,isB:true为data对象

    对数组数据绑定
      :class="[classA, classB]"

style:
    :style="{color:item.tit_color}"

v-if、v-else、v-show

• v-if

     v-if接收bool类型。true的话则生成html，false则不生成。或者直接将元素remove掉。

     举例如：
     <div v-if="true">你好</div>
     

• v-else

     v-else紧跟在v-if后边，否则将不被识别
     举例如：
      
     <div v-if="flase">错的</div>
     <div v-else>不是错的</div>

• v-show

     通过此指令控制元素的显示隐藏，即控制元素的display。
     举例如：
     1 <div v-show="true" style="display:none">我显示</div>
     2 <div v-show="false" style="display:none">我隐藏</div>

• v-hide

     与v-show相反。

 

•      v-if与v-show区别:

        频繁切换 v-show，否则 v-if。 
         一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-on

•      简写@
•      @click
•      @keydown.enter
•      @keydown.13
•      @my-event this.$emit('my-event') 注意:自定义事件不支持驼峰命名
•      @touchstart,@touchend,@touchmove => touch事件
•      @blur

修饰符

click

• .stop     => 阻止事件冒泡 => e.stopPragation()
• .prevent  => 阻止默认事件 => e.preventDefault()
• .capture  => 事件捕获模式
• .self     => 父元素触发，子元素不触发
• .once     => 只触发一次
•  router-link 支持@click 、@mouseover特殊：@mouseover.native="Over()" @mouseout.native="click()"

keyup/keydown

• .enter
• .tab
• .delete (捕获 "删除" 和 "退格" 键)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta

v-model

• v-model.lazy   => 在enter或blur事件之后触发刷新
• v-model.number => 只输入数字时,为number类型
• v-model.trim   => 自动过滤掉空格

自定义指令

     全局:
         Vue.directive()
     局部:
         directives: {
            focus:{
            	inserted(el,binding){
            		el.focus()
            	}
            }
         }
      ->实现功能 进入页面就对input实现高亮。