【vue指令什么是指令】

最新推荐文章于 2024-06-24 07:26:03 发布

啊浪艺凡

最新推荐文章于 2024-06-24 07:26:03 发布

阅读量54

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52369825/article/details/131777024

版权

什么是指令

就是在vue中给html标签添加的带有v-前缀的特殊属性（在vue中给html标签添加一些特殊性功能）

v-moedl

作用：就是给表单元素进行数据的双向绑定

双向绑定：视图改变模型也会改变，模型改变视图也会随之改变

双向绑定的原理：在vue中基于数据劫持-数据代理与发布者订阅者模式完成的

数据劫持：数据拦截就是对data中的数据在初始化的时候监听起来当数据改变setter之后vm就会知道在视图改变getter 它就会通知模型你要修改了模型改变了也会通知视图改变

发布订阅者模式：就是一个一对多的关系发布者就是数据提供者订阅者就是页面展示的一个发布者对应无数个订阅者但是发布者改变了所有的订阅者也会改变

v-show

作用：控制dom元素的显示或隐藏 v-show的显示与隐藏是通过css的display来控制的

语法：v-show=‘布尔值’ true为显示 false为隐藏

v-on

作用：就是给vue的dom绑定事件的

语法：onclick： v-on:click onchange

v-on:change 简写手法： @click=“函数”

注意：函数需要写在el datta 同级的位置使用methods来进行包裹。

注意：函数中怎么使用data数据使用this.变量名（this 指向的就是vue实例）

v-for

概念：用来遍历数据生成页面内容

语法：v-for=“（遍历的值，遍历的下标）in 你要遍历数据”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <!-- 语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据"  -->
            <ul>
                <li v-for="(v,i) in arr">
                    {{v}}------{{i}}
                </li>
            </ul>
        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                    arr:["ez","Vn","MF","noc"]
                },
          
                methods:{
                   
                    
                }
            })

            
        </script>


</body>
</html>

遍历复杂的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <!-- 语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据"  -->
            <ul>
                <li v-for="(v,i) in arr">
                    {{v}}------{{i}}
                </li>
            </ul>

            <hr/>

            <table border="1">
                <tr v-for="(v,i) in obj">
                    <td>{{v.name}}</td>
                    <td>{{v.age}}</td>
                </tr>
            </table>
        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                    arr:["ez","Vn","MF","noc"],
                    obj:[
                        {name:"xixi1",age:181},
                        {name:"xixi2",age:182},
                        {name:"xixi3",age:183},
                        {name:"xixi4",age:184},
                        {name:"xixi5",age:185},
                        {name:"xixi6",age:186}
                    ]
                },
          
                methods:{
                   
                    
                }
            })

            
        </script>


</body>
</html>

key属性

可以在是用v-for的时候搭配使用他的作用就是给遍历出来的dom起个唯一的名字相当于我们的身份证号通过添加了这个key属性可以增加我们在遍历展示的时候生成的dom元素的效率（key 里面是唯一的不建议使用我们遍历出来的下标因为如果一个页面的两次遍历的话就有可能相同）

v-bind

概念：就是html的属性插入变量

语法：

传统写法：v-bind：html的属性=“值”

简写：：html 的属性=“值”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            
            <a v-bind:href="ahref">{{text}}</a>
            <a :href="ahref">{{text}}</a>

        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                   text:"点我去百度",
                   ahref:"http://www.baidu.com"
                }
            })

        </script>


</body>
</html>

啊浪艺凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue指令什么是指令】

可以在是用v-for的时候搭配使用他的作用就是给遍历出来的dom起个唯一的名字相当于我们的身份证号通过添加了这个key属性可以增加我们在遍历展示的时候生成的dom元素的效率（key 里面是唯一的不建议使用我们遍历出来的下标因为如果一个页面的两次遍历的话就有可能相同）数据劫持：数据拦截就是对data中的数据在初始化的时候监听起来当数据改变setter之后vm就会知道在视图改变getter 它就会通知模型你要修改了模型改变了也会通知视图改变。传统写法：v-bind：html的属性=“值”
复制链接

扫一扫