介绍

vue 主要应用html 和json + vue实例
mvc 轻型框架比较小巧易上手比较实用移动端 spa首选框架
国人编写文档清晰资料较多
缺点需要配合其他组合搭配库

官网     http://cn.vuejs.org/

创建vue实例 new Vue({
el:’’, el 外围盒子元素 vue的应用范围（id class 标签名皆可）
data:{}, data 主要存储数据
methods:{} methods 存储方法

})

指令封装好的标签的扩展

数据双向绑定

<div id="app">
   <input type="text" v-model="message" />
   <p>{{message}}</p>
</div>
new Vue({
    el : '#app',
    data : {
        message : 'Hello Vue!'
    }
})

循环数据

v-for="name in arr" //循环数组、自带{{$index}}索引
v-for="name in json" //循环json 自带{{$index}}索引 {{$key}} key值
v-for="(key,val) in json" //循环json key键值 val值

<ul id="app">
    <li v-for="name in arr">{{name}}-{{$index}}</li>
</ul>

<ul id="app">
    <li v-for="name in json">{{name}}-{{$index}}</li>
</ul>

<ul id="app">
    <li v-for="(name,value) in json">{{name}}-{{value}}</li>
</ul>    
new Vue({
    el : '#app',
    data : {
        arr : ['a','b','c','d'],
        json : {
            "a" : "apple",
            "b" : "banana",
            "w" : "waterMelon"
        }
    }
})

事件绑定

v-on //事件绑定 v-on:click/mouseover/... 简写@click/@mouseover/@...

<div id="myApp">
    <input type="button" v-on:click="show()" value="点击" /> -->@click="show()"
    <ul>
        <li v-for="list in arr">
         {{list}}  
        </li>
    </ul>
</div>
new Vue({
    el : '#myApp',
    data : {
        arr : ['a','b','c','d']
    },
    methods : {
        show : function(){
            this.arr.push('e')
        }
    }
})

显示/隐藏

<body id="myApp">
    <input type="button" @click="show()" value="点击"/>
    <p v-show="flag">我将被显示和隐藏</p>    //true显示 false隐藏
</body>

new Vue({
    el : '#myApp',
    data : {
        flag = true
    },
    methods : {
        show : function(){
            this.flag = !this.flag;
        }
    }
})

事件对象

$event 事件对象 @click = 'show($event)'
stop 阻止冒泡事件 @click.stop = 'show()' -->event.stopPropagation()
prevent 阻止默认行为 @click.prevent = 'show()'-->event.preventDefault()
键盘事件 '.'+keyCode值 @keyup.13 = 'show()' @keyup.enter = 'show()'  -->或者通过event.keyCode判断键码