Vue几个重要的指令

1、v-bind 作用：给html标签的属性绑定。例如、给a标签的href绑定动态的链接；给calss、style绑定动态的属性。

事例代码：

<!-- 给html标签的属性绑定 -->
    <div id="app">
        <a v-bind:href="link">GoGoGo</a>
           <!-- class,style  {class名: 加上赋值名} -->
        <span v-bind:class="{active:isActive,'text-danger':hasError}" v-bind:style="{color:color1,fontSize:size}">你好</span>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
              el:"#app",
              data:{
                  link:"http:www.baidu.com",
                  isActive:true,
                  hasError:true,
                  color1:'red',
                  size:'36px'
              }
        })
</script>

事例效果：

2、v-model 作用：实现数据双向绑定。即可以通过改变代码的值，而改变页面的值。也可以通过改变页面的值，从而改变代码中的值。

事例代码：

<div id="app">
        精通语言：
           <input type="checkbox" v-model="language" value="java">java<br/>
           <input type="checkbox" v-model="language" value="PHP">PHP<br/>
           <input type="checkbox" v-model="language" value="Python">Python<br/>
        选择的语言有{{language.join(",")}}
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:"#app",
            data:{
                language:[],
            }
        });
</script>

事例效果：

                              图1

                              图2

3、v-on 作用：给标签绑定事件， v-on的简写@

事例代码：

<div id="app">
         <!-- 事件中直接写js片段 -->
        <button v-on:click="num++">点赞</button>
        <!-- 事件指定一个回调函数，必须是Vue实例中定义的函数 -->
        <button @click="cancle">取消点赞</button>
        <h1>有{{num}}个赞</h1>
        <!-- 事件修饰符 -->   
        <!-- 这里如果不写冒泡阻值事件，当你点击小的div的时候大的div的事件也被触发 -->
          <!-- 在click的后面添加.stop ,.once这个是只点击一次--> 
        <div style="border:1px solid red;padding:20px;" v-on:click.once="hello">
        大 div 
            <div style="border:1px solid blue;padding:20px" @click.stop="hello">
             小 div<br/>
               <!--   这里原本是先弹出提示框，然后在去百度   在click的后面添加.prevent="你想调用的方法"  ，添加这个.prevent是阻值前面的功能或者重写定义 -->
             <!-- .stop是阻值默认行为 -->
               <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>     
        </div>
        <!-- 按键修饰符 -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br/>
        提示：
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods: {
              cancle(){
                  this.num--;
              },
              hello(){
                  alert("你被点击了");
              }
            },
        })
</script>

事例效果： 这里的有几个比较特殊的实际就，不在做演示了。

4、v-for 用来变量对象

事例代码：

  <div id="app">
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender=='女'">
                <!-- 1、显示user信息：v-for="item in items" -->
              当前索引值：  {{index}}  {{user.name}}  ==>  {{user.gender}}   ==>   {{user.age}}  <br/>
                <!-- 2、获取数组下标：v-for="(item,index) in items" -->
                <!-- 3、遍历对象：
                v-for="value in object"
                v-for="(value,key) in object"
                v-for="(value,key,index) in object" -->
                对象信息： <span v-for="(v,k,i) in user">{{k}} == {{v}}  == {{i}};</span>
                <!-- 4、遍历的时候都加上 ：key来区分不同的数据，提高vue渲染效率 -->
            </li>
        </ul>
        <ul>
            <li v-for="(num ,index) in nums" :key="index">{{num}},  {{index}}</li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
    let app=new Vue({
        el:"#app",
        data:{
          users:[{name:'柳岩',gender:'女',age:'21'},
          {name:'张三' , gender:"男" , age:"18"},
          {name:'范冰冰', gender:'女',age:'24'},
          {name:'刘亦菲', gender:'女' , age:'18'},
          {name:'古力娜扎',gender:'女',age:'25'}],
          nums:[1,2,3,4,4]
        }
    })
    </script>

事例效果：

5、v-if和v-show 作用：v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。v-show,当得到结果为true,所在的元素才会被显示。

事例代码：

<div id="app">
         <button v-on:click="show=!show">点我呀！</button>
         <!-- 1、使用v-if显示 -->
         <h1 v-if="show">if=看到我</h1>
         <!-- 2、使用v-show显示 -->
         <h1 v-show="show">show=看到我</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
       let app=new Vue({ 
           el:"#app",
           data:{
               show:true,
           }
       })
</script>

事例效果：带有v-if的标签消失，而v-show的标签则不显示罢了。

6、v-else和v-else-if 作用：这两个判断和java的中if-else的意思是一样的。

事例代码：

  <div id="app"> 
      <button v-on:click="random=Math.random()">点我呀！</button>
      <span>{{random}}</span>
      <h1 v-if="random>=0.75">看到我啦 ? &gt;=0.75</h1>
      <h1 v-else-if="random>=0.5">看到我啦 ? &gt;=0.5</h1>
      <h1 v-else-if="random>=0.2">看到我啦 ? &gt;=0.2</h1>
      <h1 v-else>看到我啦 ? &gt;=0.2</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
       let  app=new Vue({
           el:"#app",
           data:{random:1}
       })
</script>

事例效果：点击按钮随机生成一个随机数，进行判断