devinran

2016-04-10 16:45

vue.js笔记——指令

Vue

本文作者:IMWeb devinran 原文出处:IMWeb社区 未经同意,禁止转载

vue.js笔记——指令

跟ng的指令系统类似,vue也拥有一套指令系统。

所谓指令,其实本质就是在模板中出现的特殊标记,根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作。

简单示例

<p v-text="msg"></p>

这里v是vue的前缀(如果是Q.js就是q前缀= =),text是指令ID,msg是expression。msg作为viewModel,当它的值发生改变时,就触发指令text,重新计算标签的textContent(innerText)。

这里expression可以使用内联方式,在任何依赖的属性变化时都会触发指令更新。

<p v-text="'hello ' + user.name + ', ' + time"></p>

内联表达式中只能访问当前上下文的vue实例的属性和方法

内联表达式只能是单一语句

对于某些指令需要在表达式之前添加参数,比如事件绑定:

<span v-on="click:openComment"></span>

使用逗号分割绑定多重指令

<div v-on="click:onClick, keyup:onKeyup, keydown:onKeydown"></div>

字面量指令不会创建数据绑定,它的值只是一个字符串字面量

<player v-ref="StringId"></player>

自定义指令

类似ng,vue也允许注册自定义指令。

Vue.directive(id, definition)

两个参数分别是指令 ID 与定义对象。其中定义对象可以定义几个可选钩子函数,如下:

钩子函数 描述
bind 构造函数,第一次绑定时调用
update bind之后以初始值调用一次,之后每当绑定值变化时调用
unbind 析构函数,解绑时调用

eg:

Vue.directive('my-directive', {
    bind: function () {
        ...
    },
    update: function (newValue, oldValue) {
        ...
    },
    unbind: function () {
        ...
    }
})

很多情况下我们只需要定义update,直接传入一个函数即可。

Vue.directive('my-directive', function (value) {
    ...
})

绑定指令的实例拥有以下属性:

属性 描述
el 绑定指令的DOM元素
vm 上下文ViewModel
expression 指令表达式
arg 参数
name 指令ID
modifiers 指令的修饰符
descriptor 指令的解析结果

eg:

<div id="chat" v-chat="msg">world</div>
Vue.directive('chat', function (value) {
    console.log(this.el); //world
    console.log(this.arg);          //hello
    console.log(this.name);         //chat
    console.log(this.expression);   //msg
});

var chat = new Vue({
    el: '#chat',
    data: {
        msg: 'hello'
    }
});

多个指令值可以传入对象字面量

<div id="chat" v-chat="{flower: true, image: false}">world</div>
Vue.directive('chat', function (value) {
    console.log(value.flower); //true
    console.log(value.image);  //false
})

ng里面对于指令的定义有一个restrict(限定符)概念,这个参数定义了指令所能存在的形式:

//Angular.js代码
angular.module('webcourse', []).directive('chat', function() {
    return {
        restrict: 'EACM', //看这里看这里看这里
        template: ...,
        scope: {},
        ....
    };
});

这个EACM分别是四种指令形式:

<!-- E : element 元素 -->
<chat></chat>

<!-- A : attribute  属性 -->
<div chat="expression"></div>

<!-- C : class 类名 -->
<div class="chat: expression"></div>

<!-- M : comment 元素 -->
<-- directive: chat expression -->
<!-- 不要问我为什么comment不是C而是M,Cross-Site Scripting为啥叫XSS,恩?有本事叫CSS? -->
<!-- 拯救强迫症:M就当是markdown可以了吧可以了吧可以了吧 -->

扯上面ng这么多其实就是想说vue支持的元素指令,其实就相当于ng的E。

Vue.elementDirective('chat', function() {
    ...
});

然后

<chat></chat>

其他选项

属性 描述
params 引入需要的属性值
deep 深层监听
twoWay 需要对属性值赋值修改(容我吐槽twoway这个名字实在太low了)
acceptStatement 允许使用内联语句
priority 指令优先级,高的先执行
terminal 自定义编译元素和后代元素的逻辑,比较高级的技巧
<div v-chat="expression" dataId="hello"></div>
Vue.directive('chat', {
    params: ['a'],
    twoWay: true,
    bind: function () {
        console.log(this.params.dataId); // -> "hello"
        this.set(this.el.value);
    }
})

以上大概是vue.js指令系统的一个入门= =

其它部分且听下回分解= =

2条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。