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

相关文章

来自专栏彭湖湾的编程世界

谈谈出入React框架踩过的坑

1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop value ...

1986
来自专栏偏前端工程师的驿站

Java魔法堂:String.format详解

  目录                               一、前言 二、重载方法 三、占位符 四、对字符、字符串进行格式化 五、对整数进...

1918
来自专栏北京马哥教育

35个Python黑魔法级别

从我开始学习python的时候,我就开始自己总结一个python小技巧的集合。后来当我什么时候在Stack Overflow或者在某个开源软件里看到一段很酷代码...

3177
来自专栏我是业余自学C/C++的

二维变长数组

1135
来自专栏九彩拼盘的叨叨叨

选择器:nth-child使用摘要

IE9+,Firefox,Chrome。 让IE6+支持:nth-child方法是,可以用selectivizr

613
来自专栏个人分享

二维数组中的查找

在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该...

782
来自专栏liukaili_666888999

Swift空格和打印

853
来自专栏DT乱“码”

jQuery.data() 的实现方式

jQuery.data() 的实现方式     jQuery.data() 的作用是为普通对象或 DOM Element 附加(及获取)数据。      ...

2317
来自专栏Android自学

Java中如何保证一个类在内存中的对象唯一性

1014
来自专栏全沾开发(huā)

学习zepto.js(Hello World)

学习zepto.js(Hello World) Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery...

4108

扫码关注云+社区