Vue.js 笔记

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-for="todo in todoList">
        {{ todo | uppercase }}
        </li>
       <!-- 数组索引方法 -->
        <li v-for="(index, item) in todoList">
            {{item}}
        </li>
    </ul>
</div>
// 对应 js
var demo = new Vue({
    el: '#example',
    data: {
        title: 'todo list',
        todoList: ['do work', 'read book', 'shopping']
    }
})

从上面的例子可以看出：

• 模版替换使用的是 {{ variable }}
• Directives 格式是 v-xxx，如上 v-for。
• Filtrs 格式是 {{ variable | filter }}，如上 uppercase

事件

---

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

<!-- 自定义元素 -->
<div id="app" v-on:click="doSomething">div</div>
<!-- 按钮 -->
<!-- <button id="app" v-on:click="doSomething">doSomething</button> -->
<!-- 缩写 -->
<!-- <button id="app" @click="doSomething">doSomething</button> -->
对应js
new Vue({
  el: '#app',
  methods: {
    doSomething: function () {
      console.log("输出");  
    }
  }
})

自定义指令

---

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

<div v-my-directive="someValue"></div>

Vue.directive('my-directive', { 
bind: function () {
 // 准备工作 // 例如，添加事件处理器或只需要运行一次的高耗任务 },
 update: function (newValue, oldValue) { 
// 值更新时的工作 // 也会以初始值为参数调用一次 }, 
unbind: function () { 
// 清理工作 // 例如，删除 bind() 添加的事件监听器 }})

**bind**：只调用一次，在指令第一次绑定到元素上时调用。

**update**： 在 bind之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与旧值。

**unbind**：只调用一次，在指令从元素上解绑时调用。

在注册之后，便可以在 Vue.js 模板中这样用（记着添加前缀 v-）：

自定义过滤器

---

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' }
});