1.vue的基本概念及常见指令

今天开始学vue，但是不是很懂框架和类库的区别，jQuery是类库，Vue是框架
框架和类库的区别就是，框架里的都是写好的函数方法，直接拿来用就好了，而类库里只有那些类，还得你自己去封装函数才行

相信大家都了解MVC模型吧

但Vue是MVVM模型

Vue是双向绑定页面和数据的 ，当监测到你的页面有变化时，那么数据就会改变了。所以在Vue里面，我们就不用去操作DOM了，但是有兼容性，IE 8以下不支持vue.js ,只有IE9以上才兼容

一、引入方式

你可以下载vue.js 文件，也可以在cdn上复制个地址

二、语法

• new 一个vue，在里面有两个固定的语法，el 和 data
• el是挂载，通俗讲就是作用域，只在id为el值的元素内部好使，出了这个元素外面就不好使了，如图，作用域是id为div1的div里，在div2里就不行
• 在data里定义一些数据，如果你想在页面中引用，那就把变量名用两个大括号包住放在作用域里，这样。当data里的数据改变后，页面上的内容也会改变
• 注意一下，在vue对象里，各个键值对间用逗号分隔而不是分号

三、指令

（1） v-model
双向数据绑定，引号里面是你要绑定的data里的 数据变量名称，当输入框内容改变时，绑定的data里的msg也跟着改变，msg改变了，div里的内容也跟着改变，形成了双向绑定效果

 <div id="div1">
        {{msg}}
        <input type="text" v-model="msg">
    </div>
    <div id="div2"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el: "#div1",
        data:{
            msg :"hello world"
        }
    });

（2） v-text 和v-html

如果你比较细心，会发现用花括号包着数据名的做法会有一种效果，那就是闪（先有双引号在那又很快被换成data里的值）如果你不想让他闪，你就给他设置v-text=”xx”去代替元素里的{{xx}}

v-html和v-text的区别就是，他能把h2解析出来，而不是像text那样吧h2标签原样输出来

（3）v-for
遍历数组或对象

in后面放要遍历的数组或对象，in前面若是一个参数的话，那就是数组或对象属性值，若果是两个参数的话，那么第二个参数就是数组索引或者对象的属性名称

<div id="div1">
<ul>
    <li v-for="ccc in xue">{{ccc}}</li>
</ul>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
           el:"#div1",
           data:{
               xue:["a","b","c","d","e"],
           }
        });
    </script>

    <li v-for="(ccc,index) in xue">{{ccc}}---------------  {{index}}</li>

<div id="div1">
<ul>
    <li v-for="(ccc,index) in xue">{{ccc}}{{index}}</li>
    <li v-for=" (val ,key) in student">{{key}}: {{val}}</li>
</ul>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
           el:"#div1",
           data:{
               xue:["a","b","c","d","e"],
               student:{
                   name:"lixue",
                   age:21,
                   school:"haligong",
               },
           }
        });
    </script>

没错，遍历对象的话，第一个参数代表键值对的属性值，第二个参数代表键值对的属性名
（4）v-on
a.v-on后面跟要绑定的事件，和函数，函数在定义的vue里面的methods里定义

<div id="div1">
    <div v-on :click="fn"> hhhhhhh</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
      el:"#div1",
      data:{

      },
        methods:{
            fn:function(){
                console.log(111);
            }
        }
    });

b.v-on ： 可以用@代替

    <div @click="fn()"> hhhhhhh</div>

c.v-on 绑定事件的函数可以带参数，也可以不带参数，这要看methods里定义的函数是否传参，如果那里面传参数了，那在上面绑定的时候就得在fn()里写上$event，否则会显示undefined，如果底下function（）里不传参数的话，上面就写fn就行了

<div id="div1">
    <div @click="fn($event)"> hhhhhhh</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
      el:"#div1",
      data:{
      },
        methods:{
            fn:function(e){
                console.log(e);
            }
        }
    });

d.v-on 里除了可以放事件外，还可以传参数

e.累加

 <div id="div1">
        <div @click="fn()"> {{m}} </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
           el:"#div1",
           data:{
                m:0,
           },
           methods:{
               fn:function(){
                   this.m++;
               }
           }
        });
    </script>

（5）v-bind
a.绑定某个属性，比如说前台的图片路径不想写死，由后台去传的话，那就用bind绑定，在data里定义那个属性

<div id="div1">    
    <img v-bind:src="imgSrc" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
       el:"#div1",
       data:{
           imgSrc:"../注册3.jpg",
       }
    });

b.v-bind的简写方式 去掉v-bind 只留个冒号

    <img :src="imgSrc" alt="">

c.对于正常的属性，在data里定义属性值就好了，但对于特殊的属性如class，有两种写法，看心情任选其一
第一种：第一个参数代表class名，第二个参数是boolean值，代表有还是没有这个class

<div id="div1">
    <img :src="imgSrc" alt="">
    <div :class="{aa:isAa,bb:isBb}"></div>/
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
       el:"#div1",
       data:{
           imgSrc:"../注册3.jpg",
           isAa:true,
           isBb:false,
       }
    });

</script>

如上代码表示这个div有aa这个class，而没有bb这个class
第二种写法，数组形式，在data里如果isAa里写aa了的话，就代表这个div这个元素有aa这个class，如果没有的话，就在isAa里写空字符串

<div id="div1">
    <img :src="imgSrc" alt="">
    <div :class="[isAa,isCc]"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
       el:"#div1",
       data:{
           imgSrc:"../注册3.jpg",
           isAa:"aa",
           isBb:"cc",
       }
    });
</script>