蝈蝈领你玩--Vue.js前端库（三）

指令

---

指令是什么？由于Vue.js实现了MVVM模式，将DOM和Model进行了双向绑定，那么当数据模型中的数据变化的时候，就不需要我们进行DOM操作。指令就是当数据变化的时候，按照指令规则将变化体现到DOM中。这样我们就只关注数据变化即可，而不必管理DOM的状态和变化了。

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue.js中定义了许多指令，下面介绍一些常用的指令。

• v-if
• v-else
• v-show
• v-for
• v-bind
• v-on

v-if和v-else是用来按照模型数据中布尔型变量或者表达式的值来渲染DOM的。下面的例子将根据学生的模型数据，显示学生的信息。

    
    



    

        

            
姓名
            
{{name}}
        
        

            
性别
            
            
男
            
女
        
        

            
生日
            
{{birthday}}
        
        

            
选择课程
            
{{course}}
        
        

            
成绩评定
            
            
及格
            
不及格
        
    

运行效果如下：

image.png

v-show和 v-if运行的效果一样，但是有区别。v-if对于不满足条件的HTML，不加入DOM中，而v-show不管条件是否成立，都存在于DOM中，只是条件不满足的时候，其CSS的display属性为 none。

    
    



    
Hello World!
    
Hello World!

运行的结果两个h1都看不到，但是他们在DOM中的情况不同，用开发者工具可以看到如下内容，id为aaa的元素在DOM中不存在，而id为bbb的元素存在，样式为none：

image.png

v-for是用来遍历数组，集合等模型数据的。也是用来显示表格，列表等必不可少的内容。v-for在遍历的时候可以定义获取到的对象变量，如果需要获取循环因子，那么在后面加入循环因子变量名。

    
    
    
    
    



    

        

            
序号
            
学号
            
姓名
            
专业
        
        

            
{{index+1}}
            
{{item.id}}
            
{{item.name}}
            
{{item.major}}
        
    

运行的结果如下：

image.png

v-bind是一个非常重要的指令，他是用来根据模型数据设置HTML元素属性值的指令。例如，有.aaa的样式和.bbb样式，如果DOM需要根据模型中的变量来设置HTML属性，那么就需要使用 v-bind指令。 v-bind指令常用与绑定CSS的class属性和style样式，也可以用于其他属性的绑定。

    
    
    
    
    
    



    
 
    

        

            
序号
            
学号
            
姓名
            
专业
        
        

            
{{index+1}}
            
{{item.id}}
            
{{item.name}}
            
{{item.major}}
        
    

运行结果是，CSS按照模型中的变量进行CSS的class绑定。效果如下：

image.png

用开发者工具查看DOM，id值按照模型进行绑定。

image.png

v-on指令是用来绑定HTML元素事件的。可以通过调用模型中的方法来操作模型数据。

    
    
    
    
    
    



    
 
    

        

            
序号
            
学号
            
姓名
            
专业
            
操作
        
        

            
{{index+1}}
            
{{item.id}}
            
{{item.name}}
            
{{item.major}}
            
删除
        
    

运行后，点击删除按钮，可以调用模型中的del方法，并传递学号给del方法。运行结果如下：

image.png