vue

angular: 国外 上手难 庞大

vue: 国产 上手简单 小巧

下载：
1.官网下载
2.bower install vue
npm install -g bower
bower:
初始化，生成包的配置文件 ： bower init
生成一个 bower.json
安装特定版本的包文件 ： bower install vue#2.2.1

查看所有版本：  bower info vue 

一、
基本写法：
let vm = new Vue({
el: '#div1' //element 要控制的元素，选择器，
data:{
a:1//数据
}
});

二、基本用法
1、vue的数据都在 data里
2、函数，方法都要放在指定的一个地方
methods:{}
3、事件 v-on:
v-on: click

    没有参数：
        v-on:click="show"
    有参数时：
        v-on:click="show2(12)"
4、el:'#div1'
    指明了 vue对象控制的范围，不能是body也不能是html
5、v-on:click —— 简写：   @click

6、在methods中，this —— 表示的是 new 出的vue对象:vm
    不能用箭头函数，因为箭头函数里面，this表示的是父级作用域——window
7、v-show/hide
    true:显示   false:隐藏
    通过控制 display 属性，来实现的隐藏和显示
8、v-model
    绑定数据
9、v-if
    通过增加、删除DOM元素，来实现的显示和隐藏
10、v-else
    必须和v-if配对使用，必须得在一起              
11、v-for: 循环 相当于ng-repeat
数组：
    v-for="val in arr"
    v-for="(val,index) in arr"
    v-for="val in 数字"
        数字：从1开始 
JSON:
    v-for="val in json"
    v-for="(val,name) in json"
    v-for="(val,name,index) in json"            
12、vue里，$index track by不再使用，解决了数组不允许重复的问题
13、属性
    v-bind:属性名
    简写：  省略 v-bind

14、 :class    'red bor'
    数组：
        :class = "['red','bor']"
    JSON:
        :class="{'red':false}"
15、style
    :style
        :style="{width:'200px',heigth:h+'px',fontSize:'20px'}"
16、computed  
        el:
        methods:
        data:
        computed:           
17、解决闪烁的问题
    [v-clock]{
        display:none;
    }
    <div v-clock>

总结:
1.v-on:click
@click
2.v-bind
:class
[]
''
{}
3.v-if
v-else
v-show/hide
v-for
arr
json
number 1...
(v,n,i)
4.el
data
methods
computed
5.v-modle
6.v-clock
7.v-bind:style
{} 解构赋值
[]