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

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

04.Java对象和类

04.Java对象和类 Java 对象和类 Java作为一种面向对象语言。支持以下基本概念: 多态 继承 封装 抽象 类 对象 实例 方法 重载 本节我们重点研...

4166
来自专栏康怀帅的专栏

PHP 面向对象

面向对象三大特性:封装、继承、多态。 官方文档:http://php.net/manual/zh/language.oop5.php 要创建一个类的实例,必须使...

2917
来自专栏Java帮帮-微信公众号-技术文章全总结

Java基础-07(01).总结private,this,封装,static,成员方法变量,局部变量匿名对象

1:成员变量和局部变量的区别(理解) (1)在类中的位置不同 成员变量:类中方法外 局部变量:方法定义中或者方法声明上 (2)在内存中的位置不同 成...

3334
来自专栏小樱的经验随笔

【Java学习笔记之十五】Java中的static关键字解析

Java中的static关键字解析   static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的...

2675
来自专栏微信公众号:Java团长

Java抽象类与oop三大特征

在了解抽象类之前,先来了解一下抽象方法。抽象方法是一种特殊的方法:它 只有声明,而没有具体的实现 。抽象方法的声明格式为:

914
来自专栏菩提树下的杨过

java基础:所有参数皆是按值参数

c#中对于参数的传递,有二种处理方式,默认情况下:值类型的参数,按值传递(即:方法体内的参数是原值的副本);引用类型的参数,"加ref关键字后“,按引用传递(即...

18110
来自专栏小灰灰

JDK容器学习之LinkedHashMap (一):底层存储结构分析

LinkedHashMap 底层存储结构分析 HashMap 是无序的kv键值对容器,TreeMap 则是根据key进行排序的kv键值对容器,而LinkedH...

1795
来自专栏小樱的经验随笔

Java学习笔记【持续更新】

一个简单的java程序如下: class Sakura {   public static void main(String[] arges)   {     ...

3855
来自专栏技术点滴

对象的传值与返回

对象的传值与返回 说起函数,就不免要谈谈函数的参数和返回值。一般的,我们习惯把函数看作一个处理的封装(比如黑箱),而参数和返回值一般对应着处理过程的输入和输出。...

1788
来自专栏海天一树

小朋友学Python(23):类的属性与方法

(一)类的私有属性 __private_attr:两个下划线开头,声明该属性为私有,不能在类的外部被使用或直接访问。在类内部的方法中使用时 self.__pri...

2538

扫码关注云+社区