第3章指令

来源：互联网发布：php所有的数据类型编辑：程序博客网时间：2024/06/04 18:56

指令的一个重要特性，提供了一种机制将数据的变化映射为DOM行为。

3.1 内置指令
3.1.1 v-bind
动态绑定DOM元素属性，即元素属性实际的值是由vm实例中的data属性提供的。
简写为:

<img :src='avatar' />

3.1.2 v-model
表单控件绑定数据

3.1.3 v-if/v-else/v-show

3.1.4 v-for

3.1.5 v-on
事件绑定
在组件上使用v-on指令只监听自定义事件，即使用$emit触发的时间。

3.1.6 v-text
作用是更新元素的textContent，与直接使用{{}}不同的是，v-text需要绑定在某个元素上，能避免未编译前的闪现问题。

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

3.1.7 v-HTML
作用为更新元素的innerHTML，和v-text类似，比起{{{}}}，能避免编译前闪现问题。

3.1.8 v-el
v-el指令为DOM元素注册了一个索引，可以通过所属实例的$els属性调用。

<div v-el:demo>there is a el demo</div>vm.$els.demo.innerText //->there is a el demo

3.1.9 v-ref
与v-el类似，只不过v-ref作用于子组件上。

3.1.10 v-pre
v-pre指令相对简单，就是跳过编译这个元素和子元素。

3.1.11 v-cloak
在元素上添加一个[v-cloak]的属性，直到关联的实例结束编译。

3.1.12 v-once
标明元素或组件只渲染一次

3.2 自定义指令基础

3.2.1 指令的注册

Vue.directive(id,definition)

id是指令的唯一标识；definition则是指令的相关属性及钩子函数。

3.2.2 指令的定义对象

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div id="app">        <div v-if="isExist" v-my-directive="param"></div>    </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script>    Vue.directive('my-directive',{        bind : function () {            console.log('bind',arguments);        },        update : function (newValue, oldValue) {            console.log('update',newValue,oldValue);        },        unbind : function () {            console.log('unbind',arguments)        }    })    var vm = new Vue({        el : "#app",        data : {            param : 'first',            isExist : true        }    })</script></body></html>

3.2.3 指令实例属性

3.3 指令的高级选项

3.3.1 params

3.3.2 deep
已废

3.3.3 twoWay

3.4 指令在Vue.js 2.0中的变化

3.4.1 新的钩子函数
componentUpdated

3.4.2 钩子函数实例和参数变化
取消了指令实例这一概念，即在钩子函数中的this并不能指向指令的相关属性。

3.4.3 update函数触发变化

3.4.4 参数binding对象
binding对象为不可更改

阅读全文

0 0

第3章 指令

第3章指令