当前位置: 首页 > news >正文

通过elementUI学习vue

在这里插入图片描述

<template><el-radio v-model="radio" label="1">备选项</el-radio><el-radio v-model="radio" label="2">备选项</el-radio>
</template><script>export default {data () {return {radio: '1'};}}
</script>

1.代码讲解
这段代码是一个简单的 Vue 单文件组件,实现了一个包含两个单选框(radio)的功能。下面解释一下代码的功能和逻辑:

模板部分(Template):使用了 Element UI(饿了么团队开发的 Vue 组件库)中的<el-radio>组件来生成单选框。两个<el-radio>标签分别表示两个备选项,通过label属性指定了单选框的值。使用了v-model指令将radio数据属性与单选框的选中状态进行双向绑定,保证了选中状态的同步。脚本部分(Script):在data函数中定义了一个名为radio的数据属性,初始值为'1',表示默认选中第一个备选项。通过export default导出了一个 Vue 组件对象,其中包含了组件的逻辑代码。

总体来说,这段代码实现了一个简单的单选框功能,用户可以在两个备选项中选择一个。选中的值会被存储在radio数据属性中,供后续逻辑使用。

问题:看上面代码发现并没有地方调用 default方法,这个script是什么时候调用的?

在一个 Vue 单文件组件中,

具体来说:

当使用该组件时(比如在父组件中引入并使用),Vue 会根据组件定义创建一个实例。
在创建实例的过程中,会执行<script>中的内容,包括数据初始化、生命周期钩子函数等。
数据初始化完成后,会根据模板中的内容进行渲染,将数据和模板结合起来呈现在页面上。

因此,虽然在代码中没有显式调用default方法,但是在 Vue 的组件化开发中,default中的内容会在适当的时机被 Vue 自动调用执行。这样设计的目的是为了让开发者更专注于组件的逻辑和数据处理,而不必过多关注调用时机。

组件被实例化方法,出示例代码:

在 Vue 中,组件被实例化的方法主要有两种:全局注册和局部注册。
全局注册

全局注册是指通过Vue.component方法将组件注册为全局组件,这样在任何 Vue 实例的模板中都可以使用该组件。

示例代码如下:

// 定义一个名为 my-component 的组件
Vue.component('my-component', {// 组件的选项
});// 在模板中使用 my-component 组件
<my-component></my-component>

局部注册

局部注册是指在一个 Vue 实例的组件选项中注册组件,使得该组件仅在当前 Vue 实例中可用。

示例代码如下:

// 在一个 Vue 实例的组件选项中注册 my-component 组件
new Vue({components: {'my-component': {// 组件的选项}}
});

除了以上两种注册方法以外,还有一种基于 ES6 的单文件组件写法。在这种写法中,可以不使用export default,而是使用export和Vue.component结合的方式来注册组件。

示例代码如下:

// MyComponent.vue
<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'Hello, I am a component!'};}
}// 在另一个文件中导入并注册 MyComponent.vue
import MyComponent from './MyComponent.vue';new Vue({el: '#app',components: {'my-component': MyComponent}
});

这种写法会在 Vue 实例创建时自动调用,并注册MyComponent组件供该实例使用。

总的来说,无论是全局注册还是局部注册,以及单文件组件的写法,当 Vue 实例化时,注册的组件都会在合适的时机被调用和注册,从而可以在模板中使用。

后续再更新!

相关文章:

  • Qt6.8 GRPC功能使用(2)标准 Qt实现客户端
  • ant 布局组件 组件等高设置
  • Docker日常使用记录
  • c++学习:构造函数
  • 【Micropython教程】点亮第一个LED与流水灯
  • 单细胞Seurat - 细胞聚类(3)
  • RK3568 android11 调试陀螺仪模块 MPU-6500
  • GPT 的基础 - T(Transformer)
  • spring boot 整合 minio存储 【使用篇】
  • kali linux通过aircrack-ng命令破解wifi密码
  • 【Linux】云服务器的Redis被黑
  • 【文献管理】zotero插件4——获取知网pdf、中文文献识别与目录生成
  • 【React 报错】—Remove untracked files, stash or commit any changes, and try again.
  • PostgreSQL常用SQL语句
  • android ROM编译之--repo使用指南
  • [Vue CLI 3] 配置解析之 css.extract
  • 2018一半小结一波
  • AWS实战 - 利用IAM对S3做访问控制
  • FastReport在线报表设计器工作原理
  • JavaScript 基础知识 - 入门篇(一)
  • javascript面向对象之创建对象
  • JavaScript新鲜事·第5期
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • 第2章 网络文档
  • 动态规划入门(以爬楼梯为例)
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 蓝海存储开关机注意事项总结
  • 聊聊hikari连接池的leakDetectionThreshold
  • 前端技术周刊 2019-01-14:客户端存储
  • 前嗅ForeSpider采集配置界面介绍
  • 使用docker-compose进行多节点部署
  • # Panda3d 碰撞检测系统介绍
  • (12)Hive调优——count distinct去重优化
  • (4) PIVOT 和 UPIVOT 的使用
  • (C++17) optional的使用
  • (JSP)EL——优化登录界面,获取对象,获取数据
  • (多级缓存)多级缓存
  • (二)斐波那契Fabonacci函数
  • (转)AS3正则:元子符,元序列,标志,数量表达符
  • ***汇编语言 实验16 编写包含多个功能子程序的中断例程
  • ./和../以及/和~之间的区别
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • .NET/C# 避免调试器不小心提前计算本应延迟计算的值
  • .NET成年了,然后呢?
  • .NET国产化改造探索(一)、VMware安装银河麒麟
  • @transaction 提交事务_【读源码】剖析TCCTransaction事务提交实现细节
  • [ CTF ] WriteUp-2022年春秋杯网络安全联赛-冬季赛
  • [ element-ui:table ] 设置table中某些行数据禁止被选中,通过selectable 定义方法解决
  • [ vulhub漏洞复现篇 ] Apache APISIX 默认密钥漏洞 CVE-2020-13945
  • [1] 平面(Plane)图形的生成算法
  • [30期] 我的学习方法
  • [AHOI2009]中国象棋 DP,递推,组合数
  • [C++提高编程](三):STL初识
  • [CTO札记]如何测试用户接受度?
  • [C进阶] 数据在内存中的存储——浮点型篇