vue：起步

关于vue

vue，基于M-V-VM设计模式（类似M-V-C，Controller控制器变为ViewModel视图模型，更多侧重视图方面和数据绑定，比NG轻很多）的渐进式（更加轻型，最大限度减少非必要组件依赖，比NG更灵活）JS框架，适合数据操作较频繁的场景中使用。模型（Model）-视图（View）-视图模型（ViewModel），这个叫法曾让我在刚刚接触vue的时候一度很困惑，我把VM理解为一种用于自动同步V和M的“C”，这样的设计模式使V和M耦合度大大降低。

hello world

<script src="vue.js"></script>
<p id="ele">{{test}}<p>

var test = 'hello world';
new Vue({
    el:'ele',
    data:{test}
});

创建Vue对象

new Vue({
    el: "选择器",
    data: {数据}
});

这里的选择器所对应的data数据对象，在该选择器内可以通过{{}}调用其属性来输出数据。创建的vue对象会监听data的每一个数据属性，并为绑定到视图中的元素创建对应的Virtual DOM。当操作数据属性时，该vue对象会调用对应属性的set方法来更新data中的数据属性和并重新生成Virtual Dom树，通过比对DOM树和Virtual DOM树的变化，进行DOM树的局部更新，避免了页面DOM大范围重绘和人工操作DOM的过程。

{{}}数据绑定

{{}}绑定方式支持变量名、属性、下标、函数调用、算数运算符、比较运算符、逻辑运算符、三目运算符来在视图中绑定数据。

<p id="ele">
    <span>{{test}}</span> <!-- 变量名 -->
    <span>{{arr.length}}</span> <!-- 4 -->
    <span>{{arr[0]}}</span> <!-- 0 -->
    <span>{{arr[0] + arr[1]}}</span> <!-- 1 -->
    <span>{{arr[0] || arr[1]}}</span> <!-- 1 -->
    <span>{{arr[0] > arr[1]}}</span> <!-- false -->
    <span>{{arr[0] ? 'y' : 'n'}}</span> <!-- n -->
    <span>{{arr.join(',')}}</span> <!-- 0,1,2,3 -->
</p>   

new Vue({
    el:'#ele',
    data:{
        test:'变量名',
        arr:[0,1,2,3]
    }
});

{{}}绑定方式不支持分支和循环写法，不能用于视图中元素属性的绑定。

v-bind视图元素属性绑定

v-bind可以用来绑定视图中元素属性的数据，写法为：

<p id="ele" v-bind:data-prop="prop"></p>

new Vue({
    el:'#ele',
    data:{
        prop:'p的data-prop'
    }
});

在使用时可以省略“v-bind”，只写“:”，形如：

<p id="ele" :data-prop="prop"></p>

v-model双向数据绑定（表单元素）

v-model可以用来实现表单元素的双向数据绑定，写法为：

<input id="name" v-model="name">

new Vue({
    el:'#name',
    data:{
        name:'input的value值'
    }
});

此时当Vue实例中的data的name属性值发生变化，input中的数据会自动改变，在input中改变其value时，data的name属性值也会自动更新。