Vue介绍：

特点：MVVM框架    易学，轻量，灵活

MVVM框架：Model（数据） View（视图） View Modle（视图数据）

　　　　　　  VM:通过视图去操作数据，也能通过数据操作视图（双向数据绑定）

　　拓展 MVC：Model View Control (数据、视图、控制器)

Vue和angular简单对比：
Vue----简单，易学，弱主张，只要会点html、css、js，加点vue的思想就能学会（自由）
　　指令以v-xxx，属性方法均挂在Vue的实例上，适用于移动端项目
angular---学习曲线陡峭，框架粘性很强（强主张）只要一开始用，那么这个项目就要一直用它，不能喝别的框架耦合。
　　指令以ng-xxx，属性方法均挂在$scope上，使用与pc端项目
均不支持IE8以下版本
Vue全家桶：vuejs + vue-router + vuex + vue-cli
项目全家桶：框架全家桶 + node + 数据库
 
 
js发展：原生js -> jquery（库） -> angular（框架） -> react（框架） -> vue（框架）
 
 
使用vue的步骤：
 
   
　　1.引入vue
 
   
　　2.在body中创建一个元素，并且给它一个class或者id
 
   
　　3.实例化Vue
 
   
　　　　new Vue({
 
   
　　　　　　el:第二步的名字,（#app | .app）,
 
   
　　　　　　data:{
 
   
　　　　　　　　数据: ' '  |  { }  |  [ ]
 
   
　　　　　　}
 
   
　　　　})
 
   
　　4.显示数据:
 
   
　　　　在第二步的元素中输入
 
   
　　　　　　{{ 数据名称 }}



例子--选项卡：



<style>
.active{
    background: yellow;
}
</style>
/************************************/
<body>
    <div id="ppa">
        <!-- 循环数据，当点击的时候把当前的key传到changeC中 -->
        <button 
            v-for="(val,key) in content"
            @click="changeC(key)" 
            :class="{active:key==num}"
        >
        按钮{{key+1}}
        </button>
        <!-- 循环数组，只要key等于num的就显示 -->
        <div 
            v-for="(val,key) in content"
            v-show="key==num"
        >{{val}}</div>
    </div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#ppa',//父元素的id 或 class
        methods:{//method 方法 :{ 放事件函数 }
            changeC(key){
                this.num = key;
            }
        },
        data:{//放数据
            content:['1111','2222','3333'],
            num:0
        }
    })
</script>
</body>





v-if
 
     
只要条件成立，就显示if中的元素
 
     
 v-else
 
     
 如果if条件不成立显示当前的元素
 
     
 v-else-if
 
     
v-show
 
       
条件成立就显示，不成立就display:none
 
       
性能比 v-if 略好。
 
       
<li v-for="(val,key,index) in obj">{{index}}</li>
 
         
val:数组中的每个值，对象每个值
 
         
key:数据就下标，对象key值
 
         
index:下标0,1,2
 
         
 v-for="(val,key)" in obj
 
         
 注意:
 
         
 {{里面只能写一个变量}} -> {{index}}{{key}}
 
         
v-text
 
           
v-html
 
           
v-on:事件名
 
             
缩写:@事件名
 
             
 事件函数写在 methods 下
 
             
 methods在根实例下，值为一个对象
 
             
 methods:{
 
             
 　　函数名( ){
 
             
 　　　　this指向实例
 
             
 　　　　this的数据修改，直接this.数据名即可
 
             
 　　}
 
             
 }
 
             

                 
             
 
             

                 
             
 
             
比如：<button @click="fn">按钮</button>
 
              
　　 
               
在事件函数中，如果不加括号就默认传入event对象,那么事件函数的第一个参数就是event对象。
 
                
　　*** 如果在事件函数中，已经有参数了，但是还要使用event对象，那么就使用$event。
 
                

                    
                
 
                

                  修饰符： 
                
 
                
.stop => event.stopPropagation() // 阻止冒泡 
                 
 　　.prevent => 调用 event.preventDefault() // 阻止默认行为
 
             
 
             
 
 
              
v-bind:class 给元素绑定class
 
                
　　缩写：
 
                
:class
 
                
　　一般是用来操作属性的。 class   src   href   style
 
                
　　:class='c'   可以写数据
 
                
　　:class='{red:true}'   也可以是个对象   red->类名：布尔值，只有为true的时候才显示。
 
                
　　:class='[c1,c2]'   c1和c2为对象{red：true}



例子： 

<style>
        #app-div div{
            width: 100px;
            height: 100px;
        }
        .red{
            background: red;
        }
        .green{
            background: green;
        }
    </style>
</head>
<body>
    <div id='app-div'>
        <button @click='changeC'>点击变绿</button>
        <button @click='changeR'>点击变红</button>
        <button @click='change'>变</button>
        <!-- <div :class="c"></div> -->
        <div :class='[c1,c2]'></div>//c1.class,c2.class哪个是true，就显示哪个class。都为true，后面的会覆盖前面的
    </div>
    <script src="./Vue.js"></script>
    <script>
        new Vue({
            el:'#app-div',
            methods:{
                changeC(){
                    this.onOff = false;
                    this.c1.red=this.onOff;
                    this.c2.green=!this.onOff;
                },
                changeR(){
                    this.onOff = true;
                    this.c1.red=this.onOff;
                    this.c2.green=!this.onOff;
                },
                change(){
                    this.onOff=!this.onOff
                    this.c1.red = this.onOff
                    this.c2.green = !this.onOff
                }
            },
            data:{
                onOff:true,
                c1:{
                    red:''
                },
                c2:{
                    green:''
                }
            }
        })
    </script>
</body>