Vue.js指令详解-CSDN博客

本文链接：https://blog.csdn.net/fjxcsdn/article/details/87250013

1.什么是vue.js指令

以 v- 开头的特殊属性，作用于html元素，指令提供了一些特性，指定绑定元素，产生不同的行为。

**V-cloak**
v-cloak	解决插值表达式闪烁的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> 
       [v-cloak]{
           display: none;
       }
    </style>   
</head>
<body>
      <!--Vue 实例控制的元素区域就是我们的 V -->
      <div id="app"> 
          <!-- v-cloak能够解决 插值表达式闪烁的问题--> 
            <p v-cloak>111111{{msg}}111111 </p>           
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
        <script>
         //我们new出来的 VM 对象就是MVVM中的 VM调度者    
                var vm =new Vue({
                    el: '#app',   //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
                    //这里面的data就是 MVVM中的 M，专门用来保存页面数据
                    data:{        //data属性中存放的是el 中需要的数据
                        msg:'欢迎学习Vue' , //通过Vue提供的指令，很方便的将数据渲染到Vue界面上，程序员不需要操作DOM元素【前端的Vue框架不提倡手动操作DOM元素】                            
                    }                             
                })
        </script>  
</body>
</html>

不加v-cloak指令之前与加v-cloak指令之后如下图所示：

不加v-cloak:浏览器会将HTML中插值表达式显示出来，该代码端显示的插值表达式为{{msg}}

加v-cloak：解决了插值表达式显示的问题

我们发现如果在{{msg}}前后添加内容，该指令不会覆盖P元素中的原本内容。

**v-text**
默认 v-text无插值表达式闪烁的问题，
会覆盖标签元素中原本的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
</head>
<body>
      <!--Vue 实例控制的元素区域就是我们的 V -->
      <div id="app"> 
          <!--默认 v-text无插值表达式闪烁的问题，但是会覆盖元素中原本的内容--> 
            <p v-text="msg">你好帅 </p>           
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
        <script>
         //我们new出来的 VM 对象就是MVVM中的 VM调度者    
                var vm =new Vue({
                    el: '#app',   //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
                    //这里面的data就是 MVVM中的 M，专门用来保存页面数据
                    data:{        //data属性中存放的是el 中需要的数据
                        msg:'欢迎学习Vue' , //通过Vue提供的指令，很方便的将数据渲染到Vue界面上，程序员不需要操作DOM元素【前端的Vue框架不提倡手动操作DOM元素】                            
                    }                             
                })
        </script>  
</body>
</html>

V-text指令使用效果如下，当页面刷新的时候并不会出现元素中插值表达式显示的问题，但是会覆盖元素中的内容，例如下图“你好”一词没有显示。

**v-html**
将数据当做HTML来解析
不存在插值删除的问题

效果如下图所示：

**v-bind**
属性绑定机制
简写方式用 : 代替

**v-on**
事件绑定机制
简写方式用 @ 代替

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
</head>
<body>
      <!--Vue 实例控制的元素区域就是我们的 V -->
      <div id="app"> 
        <!--v-bind:属性绑定机制，是Vue中提供的用于绑定属性指令  为了简写方便 v-bind:title等同于 :title-->
        <input type="button" value="按钮" :title="mytitle+'你好帅'">
        <!--v-on:事件绑定机制，是Vue中提供的用于绑定事件指令  为了简写方便 v-on:click等同于 @click-->
        <input type="button" value="按钮1" @click="show">        
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
        <script>
         //我们new出来的 VM 对象就是MVVM中的 VM调度者    
                var vm =new Vue({
                    el: '#app',   //表示当前我们new的这个Vue实例，要控制页面上的哪个区域 
                    //这里面的data就是 MVVM中的 M，专门用来保存页面数据
                    data:{        //data属性中存放的是el 中需要的数据
                                                   
                        mytitle:'哈哈哈'       
                    },
                    methods:{
                        show:function(){
                            alert('我正在学习v-on指令')
                        }
                    }               
                })

效果如下：

v-model 指令可以实现表单元素和model中数据的双向绑定

v-model 只能运用在表单元素中，例如input（radio，text， address， email）select ，CheckBox，textarea

效果如下：

v-for指令
循环普通数组
循环对象数组
循环对象
迭代数字

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
</head>
<body>
      <div id="app"> 
          <!-- 循环普通数组 -->
        <p v-for="item in list">{{item}} 
        <div style="border:solid 1px red"></div>   
        <p v-for="(item,i) in list">索引：{{i}} -- 值：{{item}} </p>
        <div style="border:solid 1px blue"></div> 
         <!--循环遍历对象数组  -->
        <p v-for="(user ,i) in list2">ID：{{user.id}} -- 名字：{{user.name}}--索引：{{i}}</p>
        <div style="border:solid 1px green"></div> 
         <!--循环遍历对象  -->
        <p v-for="(val,key,i) in person">值：{{val}} -- 键：{{key}}--索引：{{i}}</p>
        <div style="border:solid 1px yellow "></div> 
         <!--迭代数字 前面的count值是从1开始的  -->
         <!-- in 后面可以放普通数组 ，对象数组，对象，数字 -->
        <p v-for="count in 4">{{count}}</p>

     </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
        <script>          
                var vm =new Vue({
                    el: '#app',    
                    data:{                          
                     list:[1,2,3,4,5] ,
                     list2:[
                        {id:1,name:'小哲哲'},
                        {id:2,name:'小臭臭'},
                        {id:3,name:'小屁哲'},
                        {id:4,name:'啦啦啦'}
                    ] ,
                    person:{
                        id:1,
                        name:'Jason',
                        gender:'男'                       
                    }                           
                    },
                                     
                })
        </script>  
</body>
</html>

效果展示：

**v-if ="expression"**
v-if：条件渲染指令，根据表达式true与false 来添加和删除元素，每次重新添加或删除元素如果结果为true，显示用户数据如果结果为false，删除元素，也就是将元素转换成注释
语法： v-if ="expression" expression是一个bool返回值的表达式