Vue指令和事件

模板语法

{{ msg }}

指令

VUE自带13种指令

1. v-html
2. v-text
3. v-bind
4. v-show
5. v-if
6. v-else
7. v-else-if
8. v-model
9. v-for
10. v-on
11. v-pre
12. v-cloak
13. v-once

自定义指令

注意:自定义指令中的this指向都是window

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

// 自定义获取焦点指令
Vue.directive('focus',{
    inserted: function(el){
        // el代表绑定的元素
        el.focus();
    }
})
// 使用自定义的指令


// 自定义带参数的自定义指令
Vue.directive('color',{
    bind: function(el,bingding){
        // bingding代表绑定的值
        el.focus();
    }
})
// 使用带参数的自定义的指令


// 自定义局部指令,需要在VUE实例中添加一个directives
directives: {
    focus: {
        // 指令的定义
        inserted: function (el) {
            el.focus()
        }
    },
    color: {
        bind: function(el,bingding){
            el.style.backgroundColor = binding.value.color;
        }
    }
}

文本

1. v-text
2. v-html
3. {{}}

属性 v-bind

列子:v-bind:class
简写::class

样式绑定

对象形式设置

数组形式设置


// 数组里面的值需要在data里面定义代表的class样式

混合形式

v-if和v-show

  1. 手段:v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;
  2. 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
  3. 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
  4. 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
  5. 基于以上区别,因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

表单

v-model

表单修饰符

v-model:number              // 转化为数字
v-model:trim                // 去除前后空格
v-model:lazy                // 将input事件转换成change事件

循环 v-for


  • {{ item }}
  • {{ index }} --- {{ item }}
  • {{ index }} --- {{ item }}
  • // key是为了帮助VUE提高性能的

    事件绑定

    写法

    基本写法:v-on:click

    简写:@click

    事件修饰符

    Vue.js 通过由点 . 表示的指令后缀来调用修饰符,可以多个修饰符串联一块写

    形式:事件.修饰符名称

    例子: @click.stop

    
    1. stop         // 阻止冒泡
    2. prevent      // 阻止默认行为
    3. capture      // 阻止捕获
    4. self         // 只监听触发该元素的事件
    5. once         // 只触发一次
    6. left         // 左键触发
    7. right        // 右键触发
    8. middle       // 中间滚轮触发
    

    按键修饰符

    Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

    例子:

    
    
    
    
    

    记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

    1. enter
    2. tab
    3. delete (捕获 "删除" 和 "退格" 键)
    4. esc
    5. space
    6. up
    7. down
    8. left
    9. right
    10. ctrl
    11. alt
    12. shift
    13. meta
    

    自定义按键修饰符:

    
    Vue.config.keyCodes.f1 = 112

    你可能感兴趣的