vue常用指令用法汇总，过滤器 自定义修饰符及指令

  经过一段时间的vue学习，一次文章做个汇总。

一，

1.v-text， v-html ，{{ }} 插值表达式，都可以将vue中data中的数据显示到指定的标签位置中， v-html会将含有html规范的字符串，以此规范解析， v-html ，{{ }}会将数据原样解析

2.v-bind 属性绑定，可简写为 ：   ：class=“{red:true,thin:false}”  (这里的red thin 是在style中定义好的样式)

3.v-on 事件绑定，可简写为 @  ，如 <option type="button" @click=“handClick” >  ，在vue中与data平级的methods中定义        handClick方法

     (1)事件的修饰符：.stop   阻止冒泡事件

                                    .prevent   阻止默认事件

                                     .once  事件只触发以此

                                      .self  只有直接触发本元素时才会触发，不会被动触发

                                      .capture  添加事件侦听器时 使用事件捕获模式

4.v-mode  vue中唯一的数据双向绑定元素，只能用在表单元件中（input，radio text adress email 。select checkbox textarea）

5.v-for  可以遍历数组，对象中的属性， 迭代数字v-for=“item in 10” 当在组件中使用v-for时，必须绑定key ，key作为每个值得唯一标识

    key值 必须是有number获取的String 在一些特殊情况下，如果v-for有问题，在必须使用v-for时 使用唯一的 数字或字符串绑定key值

6.v-if 和v-show  前者有更高的切换消耗，后者有更高的渲染消耗，如果频繁的 隐藏和显示就使用v-show  如果较少就使用v-if

二，过滤器可以写在差值表达式中 用 |  分割开  如{{ 数据 | 过滤器1 | 过滤器2}}

   1. 全局过滤器 在script标签中  filter的第一个参数就是 过滤器的名字  后面方法中第一个参数是差值表达式中的数据，第二个是要替换的数据。

2.私有过滤器 

在私有过滤器与全局过滤器名称一样时 优先使用私有过滤器

如图 times是过滤器名称

三，

    1.自定义修饰符

         例如 @keyup是绑定键盘

@keyup.enter是绑定键盘上的回车键 同时还有.esc /.tab/ .delete/.up /.down /,right /.left 也可以通过查询键盘码进行自定义 如f12的键盘码是113 @keyup.113 ="add()"

在script中   

//这样定义完成之后， @keyup.f2="add()" 之后 点击f2就可以执行add方法了

Vue.config.keyCodes.f2=113;   

   2.自定义指令

定义  全局指令  Vue.directive

私有指令定义  以及简写  直接上图了

         

这里补充  el为绑定的元素对象 地问个是绑定时传回来的参数