class 2: vue.js 3 模板语法和内置指令

最新推荐文章于 2024-08-29 20:00:00 发布
最新推荐文章于 2024-08-29 20:00:00 发布
阅读量300 收藏 7
点赞数 13
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roadtohacker/article/details/141417470
版权

目录

插值语法

  • 多数情况下，Vue.js 3使用HTML模板(template)语法，通过声明式将组件开发实例的数据与DOM绑定在一起。模板语法的核心是插值(mustache)语法和指令。在Vue.js 3中，要将数据显示到模板中，常见的方式是使用插值语法，也称双大括号语法
  • 下面的代码演示了插值语法的具体应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h4> {{ message }} - {{ isShow }}</h4>
        <h4> {{ counter * 100 }}</h4>
        <h4> {{ message.split(" ").join(",")}}</h4>
        <h4> {{ getReverseMessage() }} </h4>
        <h4> {{ isShow ? "三元运算符": ""}}</h4>
        <button @click="toggle">切换控制显示</button>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    message: 'Hello World',
                    counter: 100,
                    isShow: true,
                }
            },
            methods: {
                getReverseMessage() {
                    return this.message.split(" ").reverse().join(" ")
                },
                toggle() {
                    this.isShow = !this.isShow
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

  • 效果如下
    在这里插入图片描述

  • 上述例子说明插值语法支持绑定data中的属性、还支持javascript表达式、调用方法、三元运算符等

基本指令

  • 在template中，我们会经常看到以v-开头的属性(attribute)，它们被称为指令，通常，指令带有前缀v-，意味着这是Vue.js 3提供的特殊属性。它们会在渲染的DOM上应用特殊的响应式行为。下面介绍几种常见的指令

v-once

  • v-once指令用于指定元素或组件只渲染一次。当数据发生变化时，元素或组件及其所有的子组件将被视为静态内容，跳过更新。通常在需要进行性能优化时使用v-once指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2>h2 : {{ counter }}</h2>
<!--        下面的内容只会被渲染一次-->
        <h3 v-once>h3 : {{ counter }}</h3>
        <div v-once>
            <h4>h4 : {{ counter }}</h4>
            <h5>h5 : {{ message }}</h5>
        </div>
<!--        点击触发重新渲染-->
        <button @click="increment">+1</button>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: "#my-app",
            data() {
                return {
                    counter: 100,
                    message: "Hello World!"
                }
            },
            methods: {
                increment() {
                    this.counter += 1
                }
            }
        }
        Vue.createApp(App).mount("#app")
    </script>
</body>
</html>
  • 效果如下，只有<h2>标签的元素会被重新渲染，其他的都只渲染一次
    在这里插入图片描述

v-text

  • v-text指令用于更新元素的textContent，也就是说，实际上v-text指令就相当于插值语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
<!--        这两种用法效果一样-->
        <h2 v-text="message"></h2>
        <h2> {{ message }}</h2>
    </template>
</body>
<script src="./js/vue.js"></script>
<script>
    const App = {
        template: '#my-app',
        data() {
            return {
                message: "Hello World"
            }
        }
    }
    Vue.createApp(App).mount('#app')
</script>
</html>

在这里插入图片描述

v-html

  • 当展示的内容是HTML字符串时，Vue.js 3不会对其进行特殊的解析。如果希望HTML字符串的内容可以被Vue.js 3解析出来，那么可以使用v-html指令，如下所示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
<!--        这段代码会将message对应的HTML代码解析出来-->
        <h2 v-html="message"></h2>
        <h2> {{ message }}</h2>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    message: '<span style="color: red; background: blue"> Hello Vue.js 3</span>'
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

v-pre

  • v-pre指令用于跳过元素及其子元素的编译过程，从而加快编译速度，如下所示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2 v-pre> {{ message }}</h2>
    </template>
<script src="./js/vue.js"></script>
<script>
    const App = {
        template: '#my-app',
        data() {
            return {
                message: "Hello World"
            }
        }
    }
    Vue.createApp(App).mount('#app')
</script>
</body>
</html>
  • 上面的代码会原样显示{{ message }}，而不会显示message的值，因为绑定v-pre指令后的<h2>元素和它的子元素将会跳过编译过程

v-cloak

  • v-cloak指令需要隐藏未编译的mustache标签，直到组件实例完成编译。它需要和CSS规则一起使用，例如[v-cloak] { display: none}
  • 在Vue.js 3中，这个指令的使用频率不高。因为生产阶段的模板已提前编译完成，所以不需要使用v-cloak指令

v-bind

1. 绑定基本属性

  • 上面的指令用于为元素绑定内容，元素除了绑定内容之外，还需要绑定各种各样的属性。此时，可以使用v-bind指令来绑定这些属性
  • 很多时候，元素的属性是动态的，比如<a>元素的href属性、<img>元素的src属性等。通常需要动态插入值，这时可以使用v-bind指令来绑定这些属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <img v-bind:src="imgUrl" alt="">
        <a v-bind:href="link">百度一下</a>
        <img :src="imgUrl" alt="" sty>
        <img src="imgUrl" alt="">
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const app = {
            template: '#my-app',
            data() {
                return {
                    imgUrl: "https://v2.cn.vuejs.org/images/logo.svg",
                    link: "https://www.baidu.com"
                }
            }
        }
        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>
  • :是v-bind指令的简写，:src=“imgUrl”的意思就是把imgUrl变量绑定到src属性上

2. 绑定class属性

  • v-bind可以用于绑定元素或者组件的class属性，支持绑定的类型有字符串、对象和数组类型。代码示例如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
    <div :class="'abc'">class绑定字符串1</div>
    <div :class="className">class绑定字符串2</div>
    <div :class="{'active': isActive}">class绑定对象1</div>
    <div :class="{active: isActive, title: true}">class绑定对象2</div>
    <div class="abc cba" :class="{active: isActive, title: true}">默认class和动态class结合</div>
    <div class="abc cba" :class="classObj">绑定属性中的对象</div>
    <div class="abc cba" :class="getClassObj()">绑定methods/computed返回的对象</div>
    <button @click="toggle()">切换isActive</button>
</template>
<script src="./js/vue.js"></script>
<script>
    const app = {
        template: '#my-app',
        data() {
            return {
                className: "hello world",
                isActive: true,
                classObj: {
                    active: true,
                    title: true
                }
            }
        },
        methods: {
            toggle() {
                this.isActive = !this.isActive
            },
            getClassObj() {
                return {
                    active: false,
                    title: true
                }
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>
</body>
</html>
  • 此外v-bind还可绑定其他类型。具体可以参考其他资料

v-on

  • 交互是前端开发非常重要的一部分，，例如处理单击、拖拽、键盘事件等。在Vue.js 3中，使用v-on指令可以实现对这些事件的监听，这个指令简写为@

1. 绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
    <button v-on:click="btn1Click">监听按钮单击(完整写法)</button>
    <div class="area" v-on:mousemove="mouseMove">监听鼠标移动事件</div>
<!--    @是v-on的语法糖-->
    <button @click="btn1Click">监听按钮点击(简写)</button>
    <button @click="counter++">单击+1: {{ counter }}</button>
    <div class="area" v-on="{click: btn1Click, mousemove: mouseMove}">监听鼠标移动事件</div>
    <div class="area" @="{click: btn1Click, mousemove: mouseMove}">监听鼠标移动事件(简写)</div>
</template>
<script src="./js/vue.js"></script>
<script>
    const app = {
        template: '#my-app',
        data() {
            return {
                message: 'Hello World',
                counter: 100
            }
        },
        methods: {
            btn1Click() {
                console.log('按钮1发生了单击')
            },
            mouseMove() {
                console.log('鼠标移动')
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

2. 事件对象和传递参数

  • 事件在发生时会产生事件对象，我们可以在事件回调函数中获取事件对象，还是用上面的例子，但是btn2Click加了个name参数，$event是固定写法，专门用于获取事件对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
    <button v-on:click="btn1Click">监听按钮单击(完整写法)</button>
    <div class="area" v-on:mousemove="mouseMove">监听鼠标移动事件</div>
<!--    @是v-on的语法糖-->
    <button @click="btn2Click($event, 'hello')">监听按钮点击(简写)</button>
    <button @click="counter++">单击+1: {{ counter }}</button>
    <div class="area" v-on="{click: btn1Click, mousemove: mouseMove}">监听鼠标移动事件</div>
    <div class="area" @="{click: btn1Click, mousemove: mouseMove}">监听鼠标移动事件(简写)</div>
</template>
<script src="./js/vue.js"></script>
<script>
    const app = {
        template: '#my-app',
        data() {
            return {
                message: 'Hello World',
                counter: 100
            }
        },
        methods: {
            btn1Click(event) {
                console.log(event);
            },
            btn2Click(event, name) {
                console.log(event, name)
            },
            mouseMove() {
                console.log('鼠标移动')
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

3. 修饰符

  • 在JavaScript中，可通过event.stopPropagation阻止事件冒泡；在Vue.js 3中，可使用v-on指令的.stop修饰符阻止事件冒泡
...
<template id="my-app">
    <div @click="divClick" :style="{width: '100px', 'height': '65px', backgroundColor:'#ddd'}"
    >
        div
<!--        如果不用.stop修饰符, 那么触发完这个button, 事件会冒泡到父级组件中, 也就是会触发divClick函数-->
        <button @click.stop="btnClick">button按钮</button>
    </div>
<!--    .enter修饰符的作用是只有用户输入enter的时候, 才会触发enterKeyup函数的回调-->    
    <input type="text" @keyup.enter="enterKeyup">
</template>
<script src="./js/vue.js"></script>
<script>
    const app = {
        template: '#my-app',
        data() {
            return {
                message: 'Hello World',
                counter: 100
            }
        },
        methods: {
            divClick() {
                console.log('divClick')
            },
            btnClick() {
                console.log('btnClick')
            },
            enterKeyup(event) {
                console.log('keyup', event.target.value)
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>
...
  • 如上面代码的演示

条件渲染

  • 在前端开发中，有时需要根据当前条件决定是否渲染特定的元素或组件。Vue.js 3提供了v-if,v-else,v-else-if,v-show指令，用于实现条件判断

v-if

  • 下面的代码实现了单击按钮的时候切换显示和隐藏上面<h2>标签内容的功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2 v-if="isShow">v-if条件渲染基本使用</h2>
        <button @click="toggle()">单击切换显示和隐藏内容</button>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    isShow: true
                }
            },
            methods: {
                toggle() {
                    this.isShow = !this.isShow
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>
  • 使用v-if指令时，必须将其添加到某一个元素上，，例如<div>元素等，但是如果希望显示和隐藏多个元素，有两种常见的实现方式。第一种是使用<div>元素包裹多个元素，然后使用v-if指令控制该<div>元素的显示和隐藏即可，缺点是<div>元素也会被渲染；第二种实现方式是使用HTML5的<template>包裹多个元素，优点是<template>元素不会被渲染出来，也就是说template不会出现在最终的DOM中，这可以通过js的document.getElementById方法验证。推荐是使用这种方式

v-show

  • v-show也可以用于控制显示和隐藏某一块内容，用法和v-if一致，区别如下
  1. v-show不支持在<template>标签上使用
  2. v-show不可与v-else一起使用
  3. v-show控制的元素无论是否需要显示到浏览器上，它的DOM都会被渲染。本质上是通过CSS的display属性来控制显示和隐藏
  4. 当v-if的条件为false时，对应的元素不会被渲染到DOM中

开发过程中的选择建议如下

  • 如元素需要在显示和隐藏之间频繁切换，则使用v-show
  • 如不需要频繁切换显示和隐藏，则使用v-if
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2 v-if="isShow">v-if控制显示和隐藏</h2>
        <h2 v-show="isShow">v-show控制显示和隐藏</h2>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    isShow: false
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

在这里插入图片描述

  • 可以看到第一个<h2>不会被渲染到DOM中，第二个<h2>通过CSS的display属性来控制显示和隐藏

列表渲染

  • 在真实的开发过程中，通常需要从服务器获取一组数据并渲染到页面上。这是可以使用Vue.js 3中的v-for指令来实现。v-for指令类似于JavaScript中的for循环，可以用于遍历一组数据，并将每个元素渲染到页面上

v-for

  • 在Vue.js 3中，使用v-for指令语法的方式为v-for="item in 数组" 或 v-for="(item, index) in 数组"
  • 数组：通常来自data或prop，也可以来自methods和computed
  • item：可以给数组中的每项元素起一个别名，这个别名可以自行命名。item在循环过程中代表当前遍历到的数组元素
  • index：表示当前元素在数组中的索引位置
  • 代码示例如下所示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2>遍历数组</h2>
        <ul>
            <li v-for="j in my_list">
                {{ j }}
            </li>
        </ul>
        <ul>
            <li v-for="(my_l, index) in my_list">
                {{index + 1}}.{{my_l}}
            </li>
        </ul>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    my_list: [
                        'first',
                        'second',
                        'third'
                    ]
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>
  • 此外v-for还支持对象类型和数字类型的遍历

数组的更新检测

  • 在data中定义的变量属于响应式变量，修改这些变量时会自动触发视图的更新。对于定义为数组类型的响应式变量，在调用filter()、concat()和slice()方法时不会触发视图更新，而调用push()、pop()等方法会触发
  • 可以用下面的代码来进行测试
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2>遍历数组</h2>
        <ul>
            <li v-for="(my_l, index) in my_list">
                {{index + 1}}.{{my_l}}
            </li>
        </ul>
        <input type="text" v-model="new_list">
        <button @click="addToList">添加</button>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    my_list: [
                        'first',
                        'second',
                        'third'
                    ],
                    new_list: ""
                }
            },
            methods: {
                addToList() {
                    this.my_list.push(this.new_list)
                    this.new_list = ""
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>
Clarence Liu
关注
  • 13
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue.js（3）：模版语法
游王子的博客
10-03 346
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应性系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染...
【优质书籍推荐】Vue.js 3.x+Element Plus从入门到精通
热门推荐
weixin_43178406的博客
04-30 4万+
本文深入讲解了全栈开发巨作：《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，希望能对学习Vue.js+Element Plus框架的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书作者 2.3 本书目录 2.4 适合读者 3. 购买链接
Vue3 模板语法及指令
qq_39194983的博客
07-08 976
跳过这个元素和它的所有子元素的编译过程，用于显示原始 Mustache 标签，防止 Vue 编译，该指令可用于优化大量静态内容的渲染性能。修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，用于修改指令的默认行为。“Mustache”语法仅支持单一的表达式，必须是能够计算出结果的JavaScript 代码，而不是任意的JavaScript 代码。Vue 指令是以 v- 为前缀的特殊属性，Vue 提供了许多内置指令，下面列举一些比较常用的指令。
vue.js模板语法
Duiz33237的博客
01-01 1313
Vue.js 使用了基于HTML的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
vue.js 数据替换_Vue.js实战笔记之Vue内置指令
weixin_39777404的博客
12-21 386
指令是Vue模板中最常用的一项功能，它带有前缀v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。基本指令v-clockv-clock 不需要表达式，它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除，经常和 css 的 display: none; 配合使用。用于解决初始化慢导致的页面闪动问题，对于简单的项目很实用。{{ message }}[v-cloak] {...
Vue.js模板语法
qq_1323660865的博客
04-24 82
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
3.Vue3.0模板语法——《跟老吕学Vue》
Python老吕的博客
07-07 965
Vue3.0 的模板语法在保持简洁和直观的同时，增加了许多新的功能和优化，使得开发者能够更高效地构建用户界面。通过插值表达式、指令、组件、插槽、过渡与动画等特性，Vue3.0 的模板语法为开发者提供了强大的工具和灵活性，帮助开发者构建出更加复杂和动态的用户界面。
项目总结：vue.js2.5饿了么APP（1）概述+项目准备
Sabrina_cc的博客
06-05 4055
一、概述 1. 项目简介 使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化） 本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产环境来开发：代码开发及测试环节：UI标注完美还原设计图、以真实外卖APP数据做演示，以保证代码无兼容性问题。 代码规范：（1）架构设计；（2）组件抽象；（3）模块拆分；（4）代码风格统一；（5）JS变量命名规范；（6）CSS代码规范；致力于编写
vue模板语法介绍及内置指令用法
qq_43628158的博客
03-16 710
vue模板语法介绍，属性绑定，class绑定，style绑定，条件渲染、列表渲染、事件处理及常见指令汇总介绍
vue.js指令和组件详细介绍及实例
10-20
在Vue.js的模板语法中，指令被设计为以“v-”为前缀。 例如，v-text指令用于更新元素的文本内容： ```html <div v-text="message"></div> ``` ```javascript var app = new Vue({ el: '#app', data: { ...
Vue.js面试题.pdf
05-01
Vue.js提供了多种内置指令，用于实现视图层的动态行为。以下是一些常用指令： - **v-if/v-else/v-else-if**：条件渲染，用于根据条件显示或隐藏DOM元素。 - **v-for**：循环渲染，用于遍历数组或对象并生成一系列...
Vue.js待办事项清单代码.rar
04-13
6. **指令**：Vue.js提供了多种内置指令，如`v-if`和`v-show`用于条件渲染，`v-for`用于循环渲染，`v-bind:class`和`v-bind:style`用于动态绑定CSS类和样式，`v-on`用于事件处理。 7. **事件处理**：Vue.js的事件...
练习代码1-模板语法&内置指令
12-19
在Vue3中，模板语法和内置指令是开发者构建用户界面的核心工具。Vue3对原有的Vue2模板语法进行了优化，使其更加简洁、高效。本练习旨在帮助开发者深入理解Vue3的模板语法和内置指令的用法。 一、模板语法 1. 双大...
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 84
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
vue ref和reactive区别
灰海
08-25 1557
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue3插件原理
m0_46281382的博客
08-26 805
简述vue3中use方法加载第三方插件原理
移动端签名
notagoodwriter的博客
08-23 693
【代码】移动端签名。
Vue 组件封装，父组件传参给子组件，子组件调用父组件。
最新发布
qyhua的专栏
08-29 591
在 Vue 的组件化开发中，父组件与子组件的通信是常见需求。通过props，父组件可以向子组件传递数据；通过$emit事件，子组件可以通知父组件执行相应的操作。这样的单向数据流和事件通信机制，保证了组件之间的解耦和代码的可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Clarence Liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值