Vue.js是一个轻巧、高性能、可组件化的MVVM库。Vue 的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的API（中英文都有提供）

Vue快速入门

准备：

1. Vue.js 地址：http://cn.vuejs.org/
2. Bootstrap.js 地址：http://v3.bootcss.com/getting-started/#download

两个概念：

MVVM ---- M model模型(当前视图中可用的数据) V view视图(渲染UI HTML) VM

MVC------ M model模型(当前视图中可用的数据) V view视图(渲染UI HTML) C 控制器

JS代码

window.onload=function () {
    new Vue({
        el:'#my', //2.0不允许写html,body
        data:{
            msg:'heldddddo World',
            name:'sonia',
            age:22,
            flag:true,
            arr:['a','b','c','d'],
            obj:{
                id:1,
                name:'aa'
            },
            obj2:[{name:'a1',age:10},{name:'a2',age:20}],
            like:false,
        },
        methods:{
            reverseMsg:function () {
                this.message=this.message.split('').reverse().join('');
            },
            action:function () {
                // console.log("被点击了");
                this.msg="click";
            },
            action2:function () {
                this.age=20;
            },
            action3:function () {
                this.age=22;
            }
        }
        /*
        //钩子函数的执行顺序
        beforeCreate(){
            console.log("创建前");
        },
        created(){
            console.log("创建后");
        },
        beforemount(){
            console.log("挂载前");
        },
        mounted(){
            console.log("挂载后");
        },
        beforeUpdate(){
            console.log("更新前");
        },
        updated(){
            console.log("更新后");
        },
        beforeDestroy(){
            console.log("销毁前");
        },
        destroyed(){
            console.log("销毁后");
        }
        */
    })
};

HTML代码

<div id="my">
    <!--v-model 双向数据绑定-->
    <input type="text" v-model="msg"/>
    {{msg}}
    <!-- v-for 数组-->
    <div>

        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <!-- v-for 数组 v表示value i表示索引-->
        <ul>
            <li v-for="(v,i) in arr">{{v}}=={{i}}</li>
        </ul>
        <!-- v-for 对象 v表示value k表示键 -->
        <ul>
            <li v-for="(v,k) in obj">{{v}}=={{k}}</li>
        </ul>
        <!-- v-for 数组对象 v表示value i表示索引 -->
        <ul>
            <li v-for="(v,i) in obj2">{{v.name}}={{v.age}}={{i}}</li>
        </ul>

    </div>
    <button v-on:click="action">点击</button>
    <button v-on:mouseover="action2" v-on:mouseout="action3">移入移出</button>{{age}}
    <button v-on:dblclick="action2">双击</button>{{age}}

    <button @click="action">点击</button>
    <p><button v-show="flag">显示</button>{{flag}}</p>
    <p v-if="age>21">{{age}}</p>
    <p v-else>{{name}}</p>
</div>