Vue.js教程 (2) : 指令 Directives
发布在Vue.js 中文入门2014年2月17日view:34179
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

如果你没用过 Angular,那你可能不知道 directive 是什么。上一篇教程里出现了 v-model 这个 directive:

<input v-model="message">

简单来说,这是一个特殊的 HTML 属性 (attribute),当 Vue.js 看到 v-model 这个属性的时候,就知道要对当前的 DOM 元素做些什么。在这里,v-model 是个双向绑定,意味着:

  1. "message" 在当前 ViewModel 上所对应的数据发生改变时,更新 <input> 的值;
  2. 当用户在 <input> 中修改或输入内容的时候,同步 ViewModel 上 "message" 对应的数据。

Vue.js 中的 direcitve 和 Angular 当中的概念很相似,但进行了大幅度的简化:

  1. Vue.js 的 directive 只有属性这一种形式;
  2. Vue.js 的自定义 directive API 更为简单。

定义一个 directive 只需要3个函数:bind(), update(), unbind()。这三个函数分别在 directive 和元素被绑定、对应的数据发生变化,以及解除绑定的时候被调用,而且都是可选的。下面这个例子我们自定义了一个 v-disable 的 directive:

Vue.directive('disable', {
    // 每当绑定的数据变化时,这个函数就被调用啦
    update: function (value) {
         // 这里的 this 指向一个directive对象。
         // this.el 指向当前被绑定的DOM元素
         // value则是所绑定数据的新值
         this.el.disabled = !!value
    }
})

假如你只需要 update() 这一个函数的话,你可以省略外面那个对象,直接提供一个函数:

Vue.directive('disable', function (value) {
    this.el.disabled = !!value
})

然后我们就可以在 HTML 里使用了:

<div id="demo">
    <button v-disable="disabled">
        {{disabled ? 'Disabled' : 'Submit'}}
    </button>
</div>
var demo = new Vue({
    el: '#demo',
    data: {
        disabled: false
    }
})

实例:http://jsfiddle.net/yyx990803/LPfpS/ 这时候如果我们改变 demo.disabled 的值,就会看到按钮的状态变化。

可以看到,API 虽然很简单,但可以在数据变化时进行任意的 DOM 操作。Vue.js 自带了大量有用的 direcitve,比如最基本的 {{ }} 风格文字绑定其实是利用了 v-text,操作属性可以用 v-attr,重复数组可以用 v-repeat 等等(后面会详细讲)… 更多内容可以在 API 参考里面找到。

评论
发表评论
3年前

v-on:click= “disabled = !disabled”

3年前

v-on:click= “disabled = !disabled”

3年前

纠正:

自定义指令

{{disabled ? 'Disabled' : 'Submit'}} toggle

3年前
添加了一枚【评注】:所以这个disabled是什么意思?? =!!value之后为什么可以在这里定义为false?
3年前
赞了此文章!
3年前

wtf

3年前
添加了一枚【评注】:这种讨论怎么实现的 好吊的样子
3年前

评论都是好久的了

3年前

this.el.disabled = !!value ,,,,当值为false时怎么没有效果???

3年前
添加了一枚【评注】:这个value是绑定数据传入的disabled吗
3年前
赞了此文章!
4年前
添加了一枚【评注】:v-指令id = ‘监听的属性key’
4年前
添加了一枚【评注】:这里是指令id,
4年前

v-on:click= "disabled = !disabled" 例子中的时间这样写才行

4年前
赞了此文章!
4年前

应该是v-on:click

4年前

应该是toggle

4年前

应该是toggle

4年前

例子有问题,需要改成@click才好使了

4年前
添加了一枚【评注】:gg
4年前
添加了一枚【评注】:directive对象是指哪个?
4年前
添加了一枚【评注】:vue是如何监听input的变化呢?
4年前
添加了一枚【评注】:v-model 监听input内容 为message变量
4年前

@Beverley-7 原谅我的浅薄,不愧是作者啊

4年前

膜拜,大神的学习能力真是超赞啊

4年前
赞了此文章!
5年前

directive 这里好赞!太清晰明了了,拿来就明白!angular的复杂不是一丁半点。。。ps:在css大会上看见真人了,很帅!

5年前
添加了一枚【评注】:ji
WRITTEN BY
尤小右
不会搞艺术的程序员不是好设计师
TA的新浪微博
PUBLISHED IN
Vue.js 中文入门

Vue.js 是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API,让编写动态的UI界面变得轻松简单。本专栏是Vue.js的中文版入门教程。

我的收藏