Vue常用指令及介绍

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue对象的属性

new Vue({
	el: ''         //用于绑定页面中的控件
    data: ''       //设置绑定在控件上的变量的值（通过指令）
    created: ''    //当Vue对象创建时首先执行其内代码
    methods: ''    //用来定以控件绑定的事件处理函数
    filters: ''    //用来定义过滤器
    computed: ''   //用来定义计算属性
    watch: ''      //用来定义监听器
    components: '' //用来注册组件
})

v-show：根据表达式的真假值来显示和隐藏元素

<div id="vs">
  <p v-show="temp">如懿传</p>
  <p v-show="ok">还珠格格</p>
</div>

<script>
  var vs = new Vue({
      el:'#vs',
      data:{
          temp:true, //显示
          ok:false //隐藏
      }
  })
  window.setInterval(function(){
      vs.temp = !vs.temp;
  },1000)
</script>

v-if 和 v-else：根据表达式的真假值来动态插入和移除元素

v-show 和 v-if v-else 同为显示隐藏元素，其区别为：

• 实现方式
• v-if采用appendChild实现，v-show通过display控制显示
• v-if加载速度块，v-show加载速度慢
  v-if切换开销大，v-show切换开销小

v-html：插入标签
v-text：插入文字

v-for：根据条件渲染

<div id="ab">
  <ul>
   <li v-for="(item,index) in arr">
      {{ index }}:{{ item }}
   </li>
  </ul>
  <table border="1">
     <tr>
       <th width="100px">编号</th>
       <th width="100px">姓名</th>
       <th width="100px">年龄</th>
       <th width="100px">性别</th>
     </tr>
     <tr v-for="item in tab">
       <td>{{item.id}}</td>
       <td>{{item.name}}</td>
       <td>{{item.age}}</td>
       <td>{{item.sex}}</td>
     </tr>
  </table>
</div>
<script>
   new Vue({
     el:"#ab",
     data:{
      arr:['Java','Python','JavaScript','Vue','React'],
      tab:[{id:1,name:'弘历',age:25,sex:'男'},{id:2,name:'富察',age:18,sex:'女'},{id:3,name:'如懿',age:16,sex:'女'}]
     }
  })
</script>

v-bind：绑定元素，并由相应效果 （简写：：设定值）

<div id='a'>
  <a v-bind:href="link" v-bind:class="{info:flag}" target="_blank">百度</a>
  <!-- 简写：<a :href="link" :class="{info:flag}" target="_blank">百度</a> -->
</div>
<script>
  new Vue({
    el:'#a',
    data:{
      link:'http://www.baidu.com',
      flag:true
    }
  })
</script>

v-on：绑定函数

<div id="tupian">
  <img v-bind:src="url" alt="图片" v-on="{mouseleave:leave,mouseenter:enter}">
 </div>

 <script>
   new Vue({
     el:'#tupian',
     data:{
       url:'./1.jpg'
     },
     methods:{
       leave:function(){
         this.url = './1.jpg'
       },
       enter:function(){
         this.url = './2.jpg'
       }
     }
   })
 </script>

v-model：是将input的值和变量进行绑定 ——典型的数据双向绑定

<div id="sex">
  <p>请选择性别：</p>
  <label for="male"><input type="radio" value="男" id="male" v-model="gender" name="sex">男</label>
  <label for="female"><input type="radio" value="女" id="female" v-model="gender" name="sex">女</label>
  <br><br>
  <p>性别：{{gender}}</p>
</div>

<script>
  new Vue({
    el:'#sex',
    data:{
      gender:''
    }
  })
</script>

v-once：让元素或组件值渲染一次，一但绑定，数据就不会改变

v-pre：用于跳过该元素和其子元素的编译过程。对于大量没有指令的节点使用该指令，加快编译速度

v-cloak：指令解决初始化慢导致的页面闪动