指令和修饰符

最新推荐文章于 2024-07-14 17:09:06 发布

qq_41283785

最新推荐文章于 2024-07-14 17:09:06 发布

阅读量30

点赞数

分类专栏： Vue笔记文章标签： html vue.js

本文链接：https://blog.csdn.net/qq_41283785/article/details/130569688

版权

Vue笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

// 模板语法 {{}}
// 指令 v-前缀的属性作用：表达式的值改变，DOM改变
// v-on 绑定事件
// v-bind 更新HTML的属性
// v-html 显示DOM结构在页面上,更新innerhtml
// v-text 等价于{{}},替换元素内容
// v-once 只渲染一次
// 动态参数绑定的参数是动态的 //
修饰符.特殊后缀，指出指令以特殊方式绑定.prevent组织默认事件

v-on v-bind 后面的动态的参数

<!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>动态参数的使用</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
    
    <div id="root">
        <a v-bind:[attributeName]="msg" 
        v-on:[eventname]="changeMsg"
        href="https://www.lanqiao.cn/courses"
        >{{msg}}</a>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    msg:'hi',
                    attributeName:"title",
                    eventname:"click"
                
                }
            },
            methods: {
                changeMsg() {
                    // event.preventDefault();
                    this.msg = 'nihoa'
                }
            }
        }).mount('#root')
    </script>
</body>
</html>

v-bind 绑定样式

<!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>v-bind指令</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
    <div id="root">
        <img v-bind:src="dog.imgPath" :width="500"/>
        <p :style="{background:'#87CEFA',fontSize:'30px'}">{{dog.name}}</p>

    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    dog: {
                        name: "二哈",
                        imgPath:
                        "https://labfile.oss.aliyuncs.com/courses/5428/1.jpg", 
                    }
                };
            }
        }).mount("#root")

    </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>v-once 指令</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
    <div id="root">
        <h1>{{num}}</h1>
        <h1 v-once> {{num}} </h1>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    num: 0,
                };
            },
            created() {
                this.counter(); // 实例化完成自动调用methods中的counter方法
            },
            methods: {
                counter() {
                    setInterval(() => {
                        this.num++;
                    },1000)
                },
            },
        }).mount("#root")
    </script>
    
</body>
</html>

只渲染一次
在这里插入图片描述

qq_41283785

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
指令和修饰符

修饰符.特殊后缀，指出指令以特殊方式绑定.prevent组织默认事件。// v-html 显示DOM结构在页面上,更新innerhtml。// 指令 v-前缀的属性作用：表达式的值改变，DOM改变。// v-text 等价于{{}},替换元素内容。// 动态参数绑定的参数是动态的 //v-on v-bind 后面的动态的参数。// v-bind 更新HTML的属性。// v-once 只渲染一次。// 模板语法 {{}}// v-on 绑定事件。v-bind 绑定样式。阻止默认事件，修饰符。
复制链接

扫一扫