search

haledeng / haledeng.github.io

http://haledeng.github.io/
0 stars 0 forks source link

Vue.js 简介 #2

Open haledeng opened 9 years ago

haledeng commented 9 years ago

Vue.js 是一个基于 MVVM 模型的 web 库。通过双向数据绑定连接View和Model层。实际的 DOM 操作被封装成 Directives 和 Filters。

基本定义

每个Vue对象的实例是一个ViewModel。创建方式：

var vue = new Vue({
    el: view,
    data: model
});

其中 vue.$el用于管理 View 层上的 DOM 。而 vue.$data 用于管理 Model 层的数据，可以通过 vue.$data.property 访问 Model 层数据，也可以直接 vue.property 访问。

Hello World 入门

<div id="example">
    <h1>{{ title }}</h1>
    <ul>
        <li v-repeat='todo:todoList'>{{ todo | uppercase }}</li>
    </ul>
</div>
// 对应 js
var demo = new Vue({
    el: '#example',
    data: {
        title: 'todo list',
        todoList: ['do work', 'read book', 'shopping']
    }
});

从上面的例子可以看出：

在 DOM 节点上通过 v-on 绑定处理函数（可以是表达式）。函数的第一个参数是 DOM Event 对象，该对象附带 targetVM 指向 DOM 对应的 ViewModel。

<div id="example" v-on="click : clickHandler"></div>
var vue = new Vue({
    el: '#example',
    data: {},
    methods: {
        clickHandler: function(e){
            console.log(e.targetVM); // 指向vue对象，可以理解为this。
        }
    }
});

自定义指令

内置的指令不够用怎么办？想自定义数据变化对 DOM 的影响怎么破？ Vue.js 允许自定义全局指令，格式：

Vue.directive(id, {
    bind: function(){
    // 仅在初始化绑定元素时调用
    },
    update: function(newVal, oldVal){
    // 初始化时调用一次，以后每次数据变化，就被调用
    },
    unbind: function(){
    // 仅在指令解绑时被调用
    }
});

同时，在指令函数中，提供了一些 this 上下文的公开属性（这里列举了几个常用的）：

举个栗子。

<div id="example" v-demo="args: message" v-on="click: onClick"></div>
Vue.directive('demo', {
    acceptStatement: true,
    bind: function(){
        this.el.style.cssText = 'color: red; background: #666;';
    },
    update: function(newVal, oldVal){
        this.el.innerHTML = 'name = ' + this.name + '<br/>' + 
            'arg = ' + this.arg + '<br/>' + 
            'expression = ' + this.expression + '<br/>';
        console.log(this.vm.$data);
        console.log(this.el === this.vm.$el);
    }
});
var demo = new Vue({
    el: '#example',
    data: {
        message: 'hello world!'
    },
    methods: {
        onClick: function(){
            // custom directive update will be called.
            this.$data.message = 'hahaha!';
        }
    }
});

自定义过滤器

Vue.js 允许使用全局函数 Vue.filter() 定义过滤器，将 Model 数据输出到 View 层之前进行数据转化。

Vue.filter(id, function(){});

双向过滤器允许 View 层数据（ input 元素）变回写到 Model 层之前，进行转化，定义方式如下：

Vue.filter(id, {
    read: function(val){},
    write: function(newVal, oldVal){}
});

举个栗子：

<div id="example">
    <p>{{ message }}</p>
    <input type='text' v-model="message | twoWays"></div>
</div>
Vue.filter('twoWays', {
    read: function(val){
        return 'read ' + val;
    },
    write: function(newVal, oldVal){
        console.log(newVal, oldVal);
        return ov + ' write';
    }
});

var demo = new Vue({
    el: '#example',
    data: {
        message: 'hello'
    }
});

总结

Vue.js 提供的核心是 MVVM 中的VM，确保视图和数据的一致性。同时，借鉴了 Angular 中的 Directive 和 Filter 的概念，但是却简化了API。

haledeng commented 9 years ago

monthly report