vue的指令

【vue的指令，都是以前缀v-开头，表示他们是vue提供的一种特殊的特性】

• v-if ：判断，如果值为true则显示，如果没有则隐藏 （真的不见了，相当于直接删除了）
  v-show ：显示  ，如果值为true则显示，如果没有则隐藏    （只是看不见而已）
                  如果是多个同时操作，而且只是为了显示和隐藏，那么建议使用v-show

       实例：

       html部分：

<div id="app">
        <!--在指令里面不能加{{}}-->
        <h1 v-if="flag">秃头少女</h1>
        <h2 v-show="flag">真的是秃头少女</h2>
        <!--根据js语法规则，if只会进入到一个里面去   注意：这三个不能隔开，必须连着写-->
        <h3 v-if="login">Hi~ o(*￣▽￣*)ブVIP用户秃头少女</h3>
        <h4 v-else-if="login2">hi~普通用户</h4>
        <h5 v-else>请登录</h5>
 </div>

        js部分：

<script>
        var app=new Vue({
            el:"#app",
            data:{
                flag:true,
                login:true,
                login2:true
            }
        });
</script>

• v-for ：循环      

      实例1：

       html部分：

<div id="app2">
     <ul>
         <!--v-for想循环哪个就添加到哪一个里面-->
          <li v-for="val in arrs">
             {{val}}
          </li>
     </ul>
</div>

       js部分：

<script>
     var app2=new Vue({
        el:"#app2",
        data:{
             arrs:["a","b","c"]
        }
    });
</script>

     实例2

      html部分 ：

<div id="app3">
     <ul>
         <li v-for="value,key,index in lists">   <!-- value：值  key：键  index：索引-->
             {{value}}-{{key}}-{{index}}
         </li>
     </ul>
</div>

        js部分：

<script>
var app3=new Vue({
    el:"#app3",
    data:{
        lists:{
              name:"秃头少女",
              age:18,
              height:155
        }
    }
});
</script>

• v-text :      直接展示内容
• v-html：   直接展示内容   可以识别里面的标签
• v-once：  只会渲染一次   如果值发生改变，是不会更改的
• v-pre：     直接展示内容，不会渲染
   

        实例：

        html部分：

<div id="app">
     <!--直接写，电脑比较卡的时候，就会出现{{message}}-->
     {{message}}
     <span v-text="message1"></span>
     <span v-html="message2"></span>
     <span v-once>{{message1}}</span>
     <span v-pre>{{message2}}</span>
     <input type="text" v-model="message1">
</div>

         js部分：

<script>
     var app=new Vue({
         el:"#app",
          data:{
              message1:"Hello world",
              message2:"<h1>Hello world</h1>"
          }
     });
</script>

• v-model：双向绑定 ，当网页内容发生改变，那么值发生改变，当值发生改变，对应的网页内容发生改变

       实例：

       html部分：

<div id="app">
     {{message}}     <br/>
     {{num}}     <br/>
     {{flag}}     <br/>
     <div>
          <!--v-model一般是用在拥有value属性的标签里面，默认取value值-->   
          <input type="text" v-model="message" />    <br/>
          <!--当失去焦点之后才会更改-->
          <input type="text" v-model.lazy="message" />    <br/>
          <!--只接受数字相关的内容，但是如果一开始就是字符，那么就没有效果-->
          <input type="text" v-model.number="num" />    <br/>
          <input type="checkbox" v-model="flag" />    <br/>
          <input type="radio" id="boy" value="男" v-model="sex" /> 男   <br/>
          <input type="radio" id="girl" value="女" v-model="sex" />  女  <br/>
          <p>您选择的性别为:{{sex}}</p>
          <input type="checkbox" id="banana" value="banana" v-model="names" /> 香蕉   <br/>
          <input type="checkbox" id="apple" value="apple" v-model="names" /> 苹果   <br/>
          <input type="checkbox" id="pear" value="pear" v-model="names" /> 梨子   <br/>
          <p>{{names}}</p>

     </div>
</div>

              js部分：

<script>
    var app=new Vue({
        el:"#app",
        data:{
             message:"Hello world",
             num:10,
             flag:true,
             sex:'男',
             names:[]
        }
    });
</script>

• v-bind：基本用途是控制元素的属性，比如id，class href，语法糖表示为：：（冒号）

         实例：

         html部分：

<div id="app">
     <img src="up6.jpg" width="201" height="127"/>
     <img v-bind:src="imgsrc" width="201" height="127" />
     <a v-bind:href="baiduurl">百度</a>
     <div v-bind:class="className">绑定class</div>
     <p v-bind:class="flag?ca:cb">测试文字</p>
     <!--数组：可以同时拥有多个样式-->
     <p :class="[ca,cc]">多个样式</p>
</div>

         js部分：

<script>
     var app=new Vue({
         el:"#app",
         data:{
             imgsrc:'up8.jpg',
             baiduurl:'http://www.baidu.com',
             className:'classa',
             flag:false,
             ca:'classa',
             cb:'classb',
             cc:'classc'
         }
     });
</script>

• v-on:绑定事件监听器，事件类型由参数指定，语法糖表示为：@   

         实例：

        html部分：

<div id="app">
     <p v-if="show">{{message}}</p>
     <!--可以是一个方法的名字或一个内联语句-->
     <button v-on:click="show=true">点击显示</button>
     <button v-on:click="show=false">点击隐藏</button>
     <button v-on:click="change">点击显示，并且改变文字</button>
</div>

        js部分：

<script>
     var app=new Vue({
         el:"#app",
         data:{
             message:"测试文字",
             show:false
         },
         //所有的方法，注意要加s
         methods:{
             change:function (e) {
                 console.log(this);
                 this.message="hello";       //如果想要改变data里面的数据，那么要使用this
                 this.show=true;
                 console.log(e);             //vue里面的方法的事件对象，同平常方法的事件对象
             },
             //传参数
             init:function (text) {
                 this.message=text;
             }
         }
     });

     app.message="";
     //同属性数据  方法，也可以直接在vue的实例里面调用
     app.change();
     app.init("初始化数据");
 </script>