Vue（二）——常用内置指令

前言

Vue指令是带有v-前缀的特殊属性，它们作用于HTML元素，表示它们是Vue提供的特殊属性。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。

常用的Vue.js内置指令：

• v-if指令
• v-show指令
• v-else指令
• v-for指令
• v-bind指令
• v-on指令
• v-model指令
• v-once指令

v-if指令

——条件渲染指令，根据表达式的真假删除和插入元素。

基本语法：

v-if="expression"

例：

       

        
Hello Vue!
        
Hello World!
        
Not Found 404
    

    

页面显示：

 

v-show指令

——条件渲染指令，根据表达式的真假删除和插入元素。

同为条件渲染指令，它和v-if指令的区别见 v-if和v-show指令及其区别 。

基本语法：

v-show="expression"

例：

  

        
Hello Vue!
        
Hello World!
        
Not Found 404
    

    

页面显示结果：

 

v-else指令

——使用v-else指令可以为v-if或v-show添加一个“else块”。

————v-else元素必须跟在v-if元素后面，否则它不能被识别。

例：

    

        
Hello Vue!
        
Hello World!
        
Not Found 404
    

    

页面显示结果：

 

v-for指令

——基于一个数组渲染一个列表。

基本语法：

v-for="item in items"

其中，items是一个数组，item是当前被遍历的数组元素。

遍历数组示例：

    

        
        

            
{{ item }}
        

        
        

            
{{ index }}-{{ item }}
        
    

    

页面显示：

遍历对象示例：

    

        
        

            
{{ value }}
        
        


        
        

            
{{ value }}-{{ key }}
        
        


        
         

            
{{ value }}-{{ key }}-{{ index }}
        
    

    

页面显示：

v-bind指令

——绑定元素的属性并执行相应的操作，动态绑定。

v-bind:style示例：

    

        
{{ message }}
    

    

页面显示结果：

动态绑定a元素的href属性示例：

​
    

        点击前往Vue官网
    

    ​

页面显示结果：

动态绑定img元素的src属性示例：

页面显示结果：

v-on指令

——监听DOM事件，并执行相应的操作。

————有两种调用方法：绑定一个方法或使用内联语句。

v-on绑定一个事件示例：

      

        
{{ counter }}
         + 
         - 
    

    

页面显示结果：

 

v-on绑定多个事件示例：

页面显示结果：

v-model指令

——实现数据和视图的双向绑定。

v-model其实是一个语法糖，本质上它包含两个操作：v-bind绑定一个value属性和v-on给当前元素绑定input事件。

例：

    

        
{{ message }}
        
    

    

页面显示结果：

从页面显示结果可以看出，当改变文本框中的值时，p标签内容也会被相应地更新。

反之同理，如果通过浏览器控制台改变p标签内容的值，文本框中的值也会被相应更新，页面显示结果如下：

v-once指令

——让元素或组件只渲染一次，一旦绑定，数据就不会改变。

例：

    

        
{{ message }}
        
{{ message }}
        
    

    

页面显示结果：

通过和v-model指令的对比可以看出v-once指令的作用。