vue.js笔记——指令

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指令系统的一个入门= =

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小壮和前端

js写插件教程

1231
来自专栏张善友的专栏

命令行解析的规则以及Command Line Parser Library

编写命令行程序的时候,难免需要处理命令行解析的规则,MSDN的文章如下:http://msdn2.microsoft.com/en-us/library/aa2...

2328
来自专栏mySoul

DOM概述 选取文档元素

有些html标签会有name元素,区别于id,name属性的值不必是唯一的,多个元素可能存在相同的名字。

886
来自专栏Laoqi's Linux运维专列

正则三剑客-sed

与grep不同的是,当使用sed匹配字符串的时候如下: #sed -n ‘//‘p file             // 内填写需要匹配的字符串 例如: #s...

3005
来自专栏Rgc

json.loads()的字符串中为单引号引发的错误

Traceback (most recent call last): File "G:/FastWorkStateServer/logs/redis_fabu....

1141
来自专栏Golang语言社区

转-Go语言开发常见陷阱,你遇到过几个?

Go作为一种简便灵巧的语言,深受开发者的喜爱。但对于初学者来说,要想轻松驾驭它,还得做好细节学习工作。 初学者应该注意的地方: 大括号不能独立成行。 未使用变量...

3429
来自专栏Nian糕的私人厨房

JavaScript 常见面试题分析(二)

④ call() 方法 apply() 方法 bind() 方法 (this 指向第一个参数)

843
来自专栏Golang语言社区

转--Golang语言-- Web 编程

1.golang的安装工具 1.1 GVM 第三方开发的Go多版本管理工具 2.golang环境变量 2.1 GOROOT=D:\go (golang 安装目录...

3526
来自专栏大内老A

ASP.NET Web API中的Controller

虽然通过Visual Studio向导在ASP.NET Web API项目中创建的 Controller类型默认派生与抽象类型ApiController,但是A...

18310
来自专栏mySoul

TypeScript入坑

安装插件 https://github.com/Microsoft/TypeScript-Sublime-Plugin

1161

扫码关注云+社区