v-once、v-pre、v-html、v-text、v-clo

1. v-once 只执行一次
   v-pre 输出源代码
   例子：

html:

    <div class="itany">
            <input type="text" v-model="mas">
           <p v-once>{{mas}}</p>
           <p v-pre>{{mas}}</p>
     </div>

js:

       <script src="vue.js"></script>
        <script>
        new Vue({
            el:".itany",
            data:{
               mas:"你好，Vue" 
                    }
            })
      </script>

2. v-html 与 v-text 的区别是v-html会自动解析标签，而v-text 不可以解析标签
   例子：
   html：

         <div class="itany">
               <input type="text" v-model="mas">
               <p v-html="mas">{{mas}}</p>
               <p v-text="mas">{{mas}}</p>
   
         </div>
   
        js:
   
             <script src="vue.js"></script>
            <script>
                new Vue({
                    el:".itany",
                    data:{
                    mas:"你好，Vue" 
                            }
                  })
             </script>
   

3. v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
   例子：
   html：

        <div class="itany">
               <p v-cloak>{{mas}}</p>
       </div>
   
      css：
   
           [v-cloak] {
              display: none;
            }
   
    js：
   
            <script src="vue.js"></script>
            <script>
                  new Vue({
                  el:".itany",
                  data:{
                      mas:"你好"
                        },
                  beforeMount:function(){
                      alert('111111111111')
                     }
              })
   

4. v-if v-else v-else-if

   例子：
   html：

     <div class="itany">
           <p v-if="num==0">0000000000</p>
           <p v-else-if="num==1">1111111111111111</p>
           <p v-else-if="num==2">22222222222</p>
           <p v-else="3">3333333333333333</p>
     </div>
   
      js:
               
         <script src="vue.js"></script>
         <script>
               new Vue({
                   el:'.itany',
                   data:{
                     num:Math.floor(Math.random()*(3-0+1)+0)
                   }
                 })
         </script>
   

5.v-filter 过滤器的使用
例：
html：

    <div id="itany">
         <p>{{6|head}}</p>
    </div>

js：

      <script src="vue.js"></script>
      <script>
            Vue.filter('head',function(data){
                    if(data<10){
                      return "0"+data;
                     }else{
                      return data;
                    }
                  })
            new Vue({
                el:'#itany'
            })
      </script>

v-filter过滤器：对显示在页面上的数据进行处理筛选
js解释：

// 全局过滤器
Vue.filter("过滤器的名字",function(参数){
})
html:{{值|过滤器名字}}

// 局部过滤器

   <script src="vue.js"></script>
  <script>

    new Vue({
        el:'.itany',
        filters:{
        //  zero 是过滤器的名字  function（参数）
            zero:function(data){
                return   一个值
            }
        }
    })

</script>