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 条评论
登录 后参与评论

相关文章

来自专栏大内老A

ASP.NET Web API中的Controller

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

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

正则三剑客-sed

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

3095
来自专栏用户画像

H5中的标记方法

要使用H5标记,必须先进行如下的doctype声明,不区分大小写。Web浏览器通过判断文件开头有没有这个声明,来判断解析器和渲染类型是否切换到对应的H5模式。

821
来自专栏Golang语言社区

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

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

3559
来自专栏源哥的专栏

给textarea增加长度的限制

给textarea增加长度的限制     我们知道文本框可以有一个为maxlength的属性,可以限制文本框的长度,当时备注框textarea却没有,那么 要怎...

962
来自专栏Golang语言社区

Go语言错误与异常处理机制

1 Error接口 Go语言中的error类型实际上是抽象了Error()方法的error接口

1223
来自专栏杨龙飞前端

js中的this关键字,setTimeout(),setInterval()的执行过程

1415
来自专栏Golang语言社区

转--Golang语言-- Web 编程

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

3728
来自专栏前端知识分享

第11天:JS中变量、字符串基础知识

js页面效果:轮播图、选项卡、地图、表单验证javascript是弱变量类型的语言,变量只需要用var来声明。而java要根据变 量类型来声明,

3873
来自专栏nummy

ECMAScript 6 特性ECMAScript 6 特性

ECMAScript 6,也被称做ECMAScript 2015,是ECMAScript标准的下一个版本。这个标准预计将于2015年6月被正式批准。ES6是这门...

901

扫码关注云+社区

领取腾讯云代金券