乐趣区

关于vue.js: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();}
})
// 应用自定义的指令
<input type="text" v-focus>

// 自定义带参数的自定义指令
Vue.directive('color',{bind: function(el,bingding){
        // bingding 代表绑定的值
        el.focus();}
})
// 应用带参数的自定义的指令
<input type="text" v-color="{color:yellow}">

// 自定义部分指令,须要在 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

款式绑定

对象模式设置

<div :class="{bgc: isActive}"></div>

数组模式设置


<div :class="[bgcClass,colorClass]"></div>          // 数组外面的值须要在 data 外面定义代表的 class 款式

混合模式

<div :class="[bgcClass,colorClass,{bgc: isActive}]"></div>

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


<li v-for="{item in arr}">{{item}}</li>

<li v-for="{(item,index) in arr}">{{index}} --- {{item}}</li>

<li v-for="{(item,index) in arr}" :key="item.id">{{index}} --- {{item}}</li>         // 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 在监听键盘事件时增加按键修饰符

例子:


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

<input @keyup.enter="submit">

记住所有的 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
退出移动版