Vue3组件基础示例

本文介绍了如何在原生HTML中通过class和JS实现组件化,以及在Vue3中通过template、script和style模块进行组件开发,包括数据绑定、生命周期钩子等内容。
摘要由CSDN通过智能技术生成

组件是vue中最推崇的,也是最强大的功能之一,就是为了提高重用性,减少重复性的开发。

如何使用原生HTML方法实现组件化

在使用原生HTML开发时,我们也会遇到一些常见的功能、模块,那么如何在原生HTML中使用组件化呢?其实最典型的代表就是JQuery了。常见的实现方式有两种,一种是利用class预定义某些特定的组件,另一种是使用JS初始化的方式,选择到某个DOM,然后生成对应的组件。

下面是一个简单的利用class生成按钮记录点击事件的组件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="zh-button"></div>
    <div class="zh-button"></div>
    <div class="zh-button"></div>

    <script>
        window.onload = function() {
            const buttons = document.querySelectorAll('.zh-button');
            for (let button of buttons) {
                const spanDom = document.createElement('span');
                spanDom.innerHTML = '点击次数:'
                const timeDom = document.createElement('span');
                timeDom.innerHTML = '0';
                const buttonDom = document.createElement('button');
                buttonDom.textContent = '按钮';
                buttonDom.onclick = function() {
                    const timeDom = button.querySelectorAll('span')[1];
                    timeDom.innerHTML = ++timeDom.innerHTML;
                }

                button.appendChild(spanDom);
                button.appendChild(timeDom);
                button.appendChild(buttonDom);
            }
        }
    </script>
</body>
</html>

如何使用Vue3实现组件化

在vue中,代码按照templeate、script、style的模块方式拆分。我们创建一个名为Count的的vue组件,看看是怎么使用的。

示例

vue组件代码(Count.vue):

<template>
    <div class="container">
        初始值是: {{ props.initCount }}
        点击的次数: {{ count }}
        <button @click="clickBtn">按钮</button>
    </div>
</template>

<script setup>
import { toRef, ref } from 'vue';

const props = defineProps(['initCount']);

const count = ref(props.initCount || 0);

const clickBtn = () => { count.value++; }
</script>

<style scoped>

</style>

调用方式:

<template>
    <Count></Count>
    <Count :initCount="1"></Count>
    <Count :initCount="10"></Count>
</template>

<script setup>
import Count from '../components/Count.vue'; 
</script>

<style scoped></style>

Vue组件的组成:

  • 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
  • 样式:控制组件内的展示样式,记得添加scoped:<style scoped>
  • 初始数据: 一个组件的初始数据状态。对于可复用的组件来说,通常是私有的状态。在setup中,直接使用ref/reactive定义即可。
  • 外部参数(props): 组件之间通过参数来进行数据的传递和共享,默认传递方向是自上而下的,但也可以显示声明为双向绑定。
  • 方法(methods): 一般为组件内部的私有方法。
  • 生命周期钩子函数(lifecycle hooks): 一个组件会触发多个生命周期钩子函数,比如created,destroyed等,在这次钩子函数中,可以封装一些自定义的逻辑。

。。。。。。

暂且对组件的认识到此为止,有了一个简单的了解之后,先看看vue提供的一些基础语法,数据绑定,指令,修饰符等。

  • 12
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

全栈道

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

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

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

打赏作者

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

抵扣说明:

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

余额充值