Vue学习日记(13)组件

这篇博客介绍了Vue.js中组件的定义和使用。首先展示了如何创建并注册非单文件组件,如`school`、`student`和`hello`,然后通过`Vue.component`进行全局注册。接着,通过实例化Vue对象在`#root`和`#root2`中使用这些组件。此外,还演示了组件的嵌套,创建了`xs`和`xx`组件,并在`app`组件中进行嵌套使用。整个过程详细地展示了Vue.js组件化的实现方式。

组件的定义

在这里插入图片描述
在这里插入图片描述

非单文件组件

在这里插入图片描述

	<div id="root">
        <!-- 第三步:使用组件标签 -->
        <xuexiao></xuexiao>
        <hr>
        <xuesheng></xuesheng>
        <hr>
        <hello></hello>
        <hr>
    </div>

    <div id="root2">
        <hello></hello>
    </div>
   
    
</body>

<script
### Vue3 学习笔记示例教程 #### 使用 `v-bind` 和 `v-on` 在 HTML 中,可以使用简写的 `:` 来代替 `v-bind` 进行属性绑定。例如: ```html <div :id="dynamicId"></div> ``` 对于事件监听器,则可以通过 `@` 符号来替代 `v-on`[^1]。 ```html <button @click="handleClick">点击</button> ``` 这段代码会在按钮被点击时调用名为 `handleClick` 的方法。 #### 表单输入绑定 为了使表单控件与应用程序状态之间实现双向数据绑定,可利用 `v-model` 指令简化这一过程。下面的例子展示了如何创建一个文本框并将其值与组件实例中的 `message` 属性关联起来[^2]。 ```html <input v-model="message" placeholder="编辑我"> <p>消息是: {{ message }}</p> ``` 每当用户更改 `<input>` 字段的内容时,视图模型会自动更新;反之亦然——如果改变 JavaScript 对象内的相应字段,UI 将即时反映这些变化。 #### 利用 Composition API 构建逻辑关注点分离的应用程序结构 Vue 3 推出了新的组合式API风格,允许开发者更灵活地组织业务逻辑而不必受限于选项式的声明方式。核心在于引入了 `setup()` 函数作为入口点,在这里定义响应式资源以及公开给模板使用的成员[^3]。 ```javascript import { ref, defineComponent } from 'vue' export default defineComponent({ setup() { const count = ref(0) function increment() { count.value++ } return { count, increment } } }) ``` 此片段展示了一个简单的计数器功能:当触发 `increment` 方法时,内部维护的状态 `count` 增加一单位,并且该数值能够实时反馈至页面显示区域。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值