Vue学习笔记（一）

一. 数据绑定

1，hello world（new Vue()）

<div id="app">
    {{message}}
</div>

new Vue({
    el : '#app',
    data : {
    message : 'hello world!'
    }
})

2，双向绑定（v-model）

<!--v-model指令-->
<div id="app">
    <p>{{message}}</p>
    <input v-model="message">
</div>

3，渲染（v-for）

<div id="app">
    <ul>
    <!-- v-for指令中，遍历数据 -->
    <li v-for="todo in todos">
        {{todo.text}}
    </li>
    </ul>
</div>

new Vue({
    el : '#app',
    data : {
        todos : [
                { text : 'Learn javascript'},
                { text : 'Learn Vue.js'}
        ]
    }
})

4，方法处理（v-on）

<!-- v-on处理事件 -->
<p>{{message}}</p>
<button v-on:click="reverseMessage">点击</button>

new Vue({
    el : '#app',
    data : {
        message : "hello world",
        todos : [
            { text : 'Learn javascript'},
            { text : 'Learn Vue.js'}
    ]
    },
    methods :{
    reverseMessage : function(){
        this.message = this.message.split('').reverse().join('');
    }
    }
})    

 二. Vue实例

1，构造器

构造函数Vue来创建一个vue根实例

var vm = new Vue({});

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。

可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器：

var MyComponent = Vue.extend({
  // 扩展选项
})

// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

2，属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性：

var data = { a: 1 }
var vm = new Vue({
  data: data
})

vm.a === data.a // -> true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2

// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

除了这些数据属性，Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$，以便与代理的数据属性区分

3，实例生命周期

Vue 实例在创建时有一系列初始化步骤——例如，它需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。

钩子created、compiled、ready、destroyed在实例生命周期的不同阶段调用，钩子的 this 指向调用它的 Vue 实例。

例如：created 钩子在实例创建后调用