vue常用指令

最新推荐文章于 2024-07-09 00:17:48 发布

许你今世繁华

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量207

点赞数 1

本文链接：https://blog.csdn.net/xh888zw/article/details/124468159

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.什么是指令?

指令：生活中的指令通常指代带有方向和指导性的命令

计算机中的指令：描述的是带有数据功能性处理的一段可执行命令的集合

Vue 中的指令：实现特定功能的一种用法，一般以 v- 符号开头，如 v-text

2.具体指令

①. v-text / v-html / v-once
功能描述: 网页视图中渲染展示变量中的数据

v-text：指令当成标签的属性进行使用，输出数据的变量包含在属性值中，等价于插值表达式
v-html：指令当成标签属性进行使用，输出的数据中包含的标签会被渲染，使用时注意XSS代码注入
v-once：指令经常和插值表达式在一起结合使用，用于只做一次数据渲染的操作
代码操作:

<body>
    <div id="app">
        <p v-text="msg"></p>  <!-- v-text指令：输出变量数据，指令=属性的方式-->
        <p v-html="msg"></p>  <!-- v-html指令：解释标签渲染数据-->
        <p v-once>输出数据：{{msg}} </p> <!-- v-once指令：只会在加载的时候渲染一次 -->
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: "<h1>MaKaBaKa009527</h1>"
            }
        })
    </script>
</body>

②. v-show / v-if
功能描述: 用于根据条件判断，是否渲染展示指定数据的指令

v-show：通过变量控制display:none|block完成数据的隐藏 / 显示
v-if：通过变量控制是否渲染加载DOM结构完成数据的隐藏 / 显示
代码操作:

<body>
    <div id="app">
        <p v-show="seen">MaKaBaKa009527</p>
        <p v-if="seen">MaKaBaKa009528</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                seen: true
            }
        })
    </script>
</body>

注意: 如果一个数据在页面上频繁的在显示/隐藏之间进行切换，需要使用v-show指令，反之则使用v-if指令

③. v-if / v-for
功能描述: 程序流程控制结构，选择结构、循环结构
代码操作:

<body>
    <div id="app">
        <h3>v-if指令：选择结构</h3>
        <p v-if="userRole===0">游客</p>
        <p v-else-if="userRole===1">会员</p>
        <p v-else-if="userRole===2">管理员</p>
        <p v-else>异常</p>
        <hr>
        <h3>用户权限描述：</h3>
        <ul>
            <li v-for="up in userPermissions"> {{ up.intro }}</li>
        </ul>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                userRole: 1,    // 0 游客；1会员；2管理员
                userPermissions: [
                    {id:1, name:'read', intro: "查看文章"},
                    {id:2, name:'publish', intro: "发表文章"},
                    {id:3, name:'edit', intro: "编辑文章"},
                    {id:4, name:'delete', intro: "删除文章"},
                ]
            }
        })
    </script>
</body>

④. v-bind
功能描述: 该指令主要用于操作标签属性对象
代码操作:

<body>
    <div id="app">
        <h2>v-bind操作标签属性</h2>

        <!-- <img v-bind:src="image_src" alt=""> -->
        <img :src="image_src" alt="">

        <ul>
            <!-- for循环指令，数据渲染时，必须通过key属性将数据和视图进行一一绑定 -->
            <!-- 否则会影响页面视图的更新(认识即可)-->
            <li v-for="img in images_list" :key="img.id">
                <!-- <img :src="img.image_src" alt=""> -->
                <p>{{img.image_src}}</p>
            </li>
        </ul>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                image_src: "images/lifecycle.png",
                images_list: [
                    {id: 3, image_src: "3.jpg"},
                    {id: 2, image_src: "2.jpg"},
                    {id: 1, image_src: "1.jpg"},
                ]
            }
        })
    </script>
</body>

⑤. v-on
功能描述: 该指令用于给指定标签绑定对应的事件
代码操作:

<body>
    <div id="app">
        <!-- <button v-on:click="changeImg">更换图片</button>-->
        <button @click="changeImg">更换图片</button>
        <img :src="image_src" alt="" style="width:100px;height:auto;">
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                image_src : "images/lifecycle.png"
            },
            methods: {      // Vue实例中定义函数
                changeImg() {
                    // 更换图片，不需要DOM操作，只需要更新变量数据即可
                    this.image_src = "images/image2.jpg"
                }
            }
        })
    </script>
</body>