Vue 常用指令

vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。

Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

    
            
    
             {
   { message }}    
    
    
            
        
        

首先创建一个vue实例，并在创建实例的过程中传入一个对象。

该对象的第一个属性名为el，它的值是我们需要渲染的目标标签，我们通过属性查找定位这个标签。

该对象的第二个属性名为data，里面就是我们要渲染给浏览器标签的数据，另外还有其他属性，我们在后面的章节中一一介绍。

看了上面的代码，可能大家觉得vue也不过如此，原生js代码两行就能完成的事情，vue需要6行代码来实现，还是原生js比较简洁，其实，上面的代码只是给大家演示了挂档的技术，究竟是汽车比较快，还是骑马比较好，我们通过后面的不断学习，来解释这个问题。

接下来，我们来介绍踩油门的技术。

上面的代码中，我们演示了如何将数据渲染进DOM标签，vue帮助我们找到标签并且渲染，对于程序员来说，我们不再需要重复的找标签，绑定事件，然后再找标签，再绑定事件这样的工作了，vue帮我们都做好了，我们只需要关注具体的数据，以及业务逻辑。这也是vue给自己的定位，数据模板引擎。

它是引擎，引擎帮助我们驱动数据渲染到模板。

所以，vue的大部分内容，都是为了渲染数据用的，接下来，我们介绍vue中用来渲染数据的常用指令。

一、vue.js模板语法之常用指令

常用指令: v-html

双大括号语法无法渲染HTML标签，我们需要使用v-html。

常用指令：v-text

类似双大括号语法渲染数据的另一种方式是使用v-text。

常用指令：v-for

接下来，我们看看数组和对象的渲染方式

    
                
    
        
     
dogfa的爱好
        
     
            
      
{
   { item }}
        
     
        
     
学生的爱好
        
     
            
      
{
   { stu.name }}的爱好是{
   { stu.hobby}}
        
     
    
    
    

常用指令：v-if

渲染数据的时候，同样也可以使用条件判断，我们来看看。

    
                
    
        
     
            
      
欢迎小美女
        
     
        
     
            
      
欢迎小龙女
        
     
        
     
            
      
滚~~~
        
     
    
    
    

通过上面的代码我们可以看出，v-if的作用是控制标签的显示，它通过判断添加标签，底层采用的是appendChild来实现的，下面我们来看一个同样也是控制标签显示的另一个指令v-show。

常用指令：v-show

    
                
    
        
     
Hello Vue!
    
    
    

与v-if不同的是，v-show通过样式的display控制标签的显示。

v-if和v-show的性能比较

我们简单比较一下二者的区别：

实现方式：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异；

加载性能：v-if加载速度更快，v-show加载速度慢

切换开销：v-if切换开销大，v-show切换开销小

v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-show 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

常用指令：v-bind

绑定属性，不多说了，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。

    
                    
    
        
     去百度    
    
    

常用指令：v-on

另一个非常重要的指令是v-on，使用v-on我们可以在标签上面绑定事件，注意我们新建的vue实例app01中多了一个属性，methods，在methods中，是我们具体事件的实现方式。

    
                    
    
        
             
     去百度        
             
                 点我今晚吃鸡~~~            
    
    

常用指令：v-model

上面演示的是通过vue实例将数据渲染进模板，并且在控制台，我们修改数据之后，修改后的数据能够及时（官方称之为响应式）的渲染到模板层，那么，如果有这样的需求，比如有一个input标签，当用户修改渲染的原始数据后，打印修改后的数据，简单说，我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，如果用户在标签上面修改了数据（之前的修改，指的是通过vue实例app01进行的数据修改），我们需要获取到数据，针对这个需求，我们可以使用v-mode指令。

    
            
    
        
     
请选择你的性别
        
     
        
             
     
        
     
                                
        
     
        {
   { name }}        {
   { gender }}        
     
请选择你的女朋友
        
                 dogfa            djb            oldniu                
     
        {
   { girlFriends }}        
     
                    
        
     
        {
   { article }}    
    
        

常用指令：指令修饰符

用户可以输入任何数据类型，但有时候，我们需要限定用户输入的数据类型，可以在指令后面加上number修饰符。

    
                
    
        
     
                  
                       
                            
学科
                            
成绩
                       
                  
                  
                       
                            
Python基础
                            
                       
                       
                            
前端
                            
                       
                       
                            
Django
                            
                       
                  
             
    
    
    

常用指令：计算属性

计算属性用来监听多个数据，每次页面加载，计算属性中的函数立即执行，但是只要原数据不被修改，那么，就不会触发重新计算，计算属性会使用计算后的缓存结果，只当原数据修改时，才会重新计算并将结果缓存起来。计算属性的计算结果可以当做data中的数据一样使用。

    
                
    
        
     
                  
                       
                            
学科
                            
成绩
                       
                  
                  
                       
                            
Python基础
                            
                       
                       
                            
前端
                            
                       
                       
                            
Django
                            
                       
                       
                            
总分
                            
{
   { python + web + django }}
                       
                       
                            
平均分
                            
{
   { avgScore }}
                       
                  
             
    
    
    

计算属性是通过过滤多个数据之后的结果，不一定是data中已存在的数据。

常用指令：侦听属性

计算属性用来监听多个属性，我们也可以使用它来监听一个属性，但是页面加载即执行计算并不符合我们的需求，如何只在数据被修改后出发相应事件，vue提供给我们的是watch，即侦听属性。

    
              
    
    
     
Original message: {
   { message }}
    
     
Computed message: {
   { reversedMessage }}
    
     
Full name: {
   { fullName }}
    
     
    
     
  
    
  

侦听属性必须是data中的已存在的数据。

常用指令：自定义指令

遇到一些复杂的需求，vue提供的指令不能完美的处理，有时候我们需要自定义指令，针对这一需求，vue提供了自定义指令，如下所示：

el是我们自定义指令所在的DOM元素；

bindding是自定义指令的一些具体数据，请记住，最重要的一点是，不管是现在还是将来，任何情况下，我们都需要根据数据进行业务处理，所以，此处最关键的也是数据，即bindding.value。

常用指令：获取DOM元素

某些情况下，我们需要直接获取DOM元素，并对元素进行一些加工处理。vue提供给我们$refs来获取DOM元素

    
                
    
        
     
      dogfa
     
        
     点击dogfa变红    
    
    

在DOM元素上面绑定了ref之后，vue根实例上面就会出现$refs变量，它是一个object类型，key为ref后面的自定义名称，而value为DOM元素。我们通过this.$refs拿到object，之后就可以通过自定义的key名，来找到DOM元素

二、案例：todoList

  
            
    
    
     
      
            
      
        
               
       添加待办      
      
      
            
      
        
               
       
          
        待办事项          
        
            
         
 
          
 { { todo }} 
 
         
          
        
        
       
        
               
       
          
        已办事项          
        
            
         
 
          
 { { done }} 
 
         
          
        
        
       
      
      
    
     
  
    
  

三、案例：轮播图

四、案例：音乐播放器

  
            
    
    
         
     
      
      
        
歌手：{
    { song.artist }}
        
歌名：{
    { song.name }}
      
    
     
  
    
  

好了，以上就是vue常用指令介绍。