【Vue】组件化编程

定义
实现应用中局部功能代码和资源的集合
为什么要用组件化编程?
传统方式编写:依赖关系混乱,不好维护,且代码复用率不高
模块化编写:只关注解决js,复用js,简化js的编写与效率
组件方式编写:好维护、复用率更高、提高运行效率

在组件出现之前,我们开发基本都是用html、js、css,

1 组件

单文件组件

一个文件中只有1个组件

非单文件组件

一个文件中包含有n个组件

1.1 组件使用流程

1 创建组件

使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别:

1 不写el。最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器
2.data必须写成函数。避免组件被复用时,数据存在引用关系,data是对象会导致,组件值改变会影响另一个组件的值

使用template可以配置组件结构。
在Vue2官网中中也明确规定,组件的data必须是一个函数
在这里插入图片描述

const School = Vue.extend({name:'School', // 组件名template:`<div>School----</div>`,data(){return{}},methods:{}
})

2 注册组件

const vm = new Vue({el: '#root',components:{School},data() {return {}},})

3 使用组件

<div id="root"><School></School>
</div>

1.2 组件细节点

1.关于组件名:

  • 单个单词组成:
    第一种写法(首字母小写):school
    第二种写法(首字母大写):Schoo1
  • 多个单词组成:
    第一种写法(kebab-case而名): my-school(不建议如此)
    第二种写法(CamelCase命名): Myschool (需要Vue脚手架支持)

(1).组件名尽可能回避HTML中已有的元素名称,例如: h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法: < school></ schoo1>
第二种写法: < school/> (不用使用脚手架时,< schoo1/>会导致后续组件不能渲染)
3 简写方式:
const school = Vue.extend(options) 可简写为: const school = options

1.3 关于VueComponent

1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
2.只需要写< school/>或< school></ school>,Vue解析时会帮我们创建school组件的实例对象。
即Vue帮我们执行的:new VueComponent(options)
3.特别注意: 每次调用Vue.extend,返回的都是一个全新的VueComponent!!!
4.关于this指向:

(1).组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数<

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/4512.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GD32E103C8T6 封装LQFP-48 GigaDevice(兆易创新) 单片机

GD32E103C8T6 是由GigaDevice&#xff08;兆易创新&#xff09;公司生产的一款基于ARM Cortex-M4内核的32位MCU&#xff08;微控制器&#xff09;。以下是GD32E103C8T6的一些主要功能和参数介绍&#xff1a; 主要功能&#xff1a; 高性能ARM Cortex-M4内核: 采用120MHz的ARM …

修复所有 bug 并不能解决所有问题

原文&#xff1a;jeffpsherman - 2024.04.08 在软件领域&#xff0c;如同在制造业&#xff0c;有些问题是由于 bug 或“特殊原因”引发的&#xff0c;而有些则是“常见原因”&#xff0c;这是由于系统设计和实现的性质所导致的。修复 bug 就是移除特殊原因&#xff0c;消除 bu…

基于SpringBoot的合家云社区物业管理平台 - 项目介绍

合家云社区物业管理平台 2.合家云需求&设计 2.1 项目概述 2.1.1 项目介绍 合家云社区物业管理平台是一个全新的 ”智慧物业解决方案“&#xff0c;是一款互联网的专业社区物业管理系统。平台通过社区资产管理、小区管理、访客管理、在线报修、意见投诉等多种功能模块&a…

指针笔试题模拟

题目一 int main() {int a[5] { 1, 2, 3, 4, 5 };int *ptr (int *)(&a 1);printf( "%d,%d", *(a 1), *(ptr - 1));return 0; } 1*&#xff08;a1&#xff09;可以等价于a[1],即第一个打印的是数组第二个下标的元素&#xff1a;2 2 而ptr拿到的是整个数组的地…

CentOS上如何自定义开机启动服务

一&#xff1a;简单的例子 在CentOS7之后自定义开机启动服务&#xff0c;可以通过创建一个systemd服务单元文件来实现。以下是创建自定义服务并设置其开机启动的步骤&#xff1a; 1&#xff0c;编辑服务文件&#xff0c;并添加以下内容&#xff1a; [Unit] DescriptionMy cu…

MySQL慢SQL优化技术深度学习指南

引言 在现代数据驱动的应用环境中&#xff0c;MySQL作为广泛应用的关系型数据库管理系统&#xff0c;其性能直接影响着整个系统的响应速度与用户体验。随着数据规模的增长和业务复杂性的提升&#xff0c;一些SQL查询可能会逐渐演变为慢查询&#xff0c;成为系统性能瓶颈。本文旨…

Ubuntu安装中文输入法

Ubuntu默认没有中文输入法&#xff0c; 本文将安装搜狗拼音输入法。 1 安装搜狗拼音输入法 下载安装搜狗拼音输入法&#xff1a; 先去官网下载安装包&#xff0c; 然后执行安装&#xff1a; sudo dpkg -i sogoupinyin_4.0.1.2800_x86_64.deb 2 安装fcitx sudo apt install fci…

SVM中常用的核函数及适用场景

常用的核函数 核函数&#xff08;Kernel functions&#xff09;在机器学习中尤其是在支持向量机&#xff08;SVM&#xff09;中扮演着重要的角色&#xff0c;它们能够将数据映射到高维空间&#xff0c;从而解决非线性问题。以下是一些常用的核函数及其适用场景&#xff1a; 线…

大模型的幻觉---探讨及解决之道

大模型「幻觉」背景 幻觉可以说早就已经是LLM老生常谈的问题了&#xff0c;那为什么会产生这个现象该如何解决这个问题呢&#xff1f;大模型幻觉产生的背景主要涉及人类视觉系统的特性和大规模机器学习模型的复杂性。以下是对大模型幻觉产生背景的详细说明和介绍&#xff1a; …

C语言之详细讲解文件操作

什么是文件 与普通文件载体不同&#xff0c;文件是以硬盘为载体存储在计算机上的信息集合&#xff0c;文件可以是文本文档、图片、程序等等。文件通常具有点三个字母的文件扩展名&#xff0c;用于指示文件类型&#xff08;例如&#xff0c;图片文件常常以KPEG格式保存并且文件…

第5篇:创建Nios II工程之Hello_World<四>

Q&#xff1a;最后我们在DE2-115开发板上演示运行Hello_World程序。 A&#xff1a;先烧录编译Quartus硬件工程时生成的.sof文件&#xff0c;在FPGA上成功配置Nios II系统&#xff1b;然后在Nios II Eclipse窗口右键点击工程名hello_world&#xff0c;选择Run As-->Nios II …

Go语言中,如何做到数据按类别分发给特定的协程处理

在 Go 语言中&#xff0c;如果你想按类别将数据分配给特定的协程&#xff08;goroutine&#xff09;进行处理&#xff0c;可以使用几种策略。下面我将提供一些方法和示例&#xff0c;说明如何根据数据类别将任务分配给不同的协程来处理。 使用通道&#xff08;Channel&#xf…

C#利用IDbCommand实现通用数据库脚本执行程序

目录 关于 ExecuteNonQuery 数据库脚本程序的执行流程 范例运行环境 通用类的设计 引用 DAL类 实现代码 小结 关于 ExecuteNonQuery 在.net 应用中&#xff0c;在数据库中执行脚本程序是经常用到的功能&#xff0c;如数据操作&#xff08;新增、修改、删除等&#xff0…

C语言趣味代码(四)

这一篇主要编写几个打字练习的小程序&#xff0c;然后通过这些小程序的实现来回顾复习我们之前学过的知识&#xff0c;然后通过这写打字练习的小程序来提升我们的打字技术和编程技术。 1. 打字练习 1.1 基本打字练习 1.1.1 基本实现 首先我们来制作一个用于计算并显示输入一…

github two-factor authentication是个啥?

最近在逛github时&#xff0c;总是时不时会弹出一下界面&#xff0c;很烦 看到红框里的文字&#xff0c;这明显是强制要求做这个认证&#xff0c;如果不认证4天后账号将不可访问&#xff0c;所以今天花点时间看看怎么做这个认证&#xff0c;点“Enable 2FA now”进入这个界面&a…

普通用户执行source报错,sudo: source:找不到命令的解决方案

一、问题描述 当修改/etc/profile文件&#xff08;环境变量&#xff09;后&#xff0c;想让该环境变量立刻生效。需要执行source命令。命令如下&#xff1a; sudo source /etc/profile 执行这个后&#xff0c;不像别人的执行成功&#xff0c;反而报错了。错误信息如下&#…

通配符模式

一、通配符介绍 通配符模式&#xff08;Wildcard Pattern&#xff09;是一种用于字符串匹配的通用模式规则&#xff0c;常见于文件系统、命令行工具以及编程语言中的文件路径匹配、配置筛选等场景。通配符模式是一种使用特殊字符来表示匹配规则的字符串语法&#xff0c;它允许…

linux下安装anaconda

顺手点个关注吧&#xff0c;谢谢&#xff01; 一、下载安装包 https://repo.anaconda.com/archive/ 或者使用命令 wget https://repo.anaconda.com/archive/Anaconda3-5.3.1-Linux-x86_64.sh2.赋予权限并安装 # 给文件执行权限 chmod 777 Anaconda3-5.3.1-Linux-x86_64.sh# 执…

商汤研究院招大模型实习生

商汤研究院招大模型实习生&#xff0c;base上海、北京&#xff0c;400/day。福利&#xff1a;每天50租房补贴&#xff0c;20的餐补。晚上8点之后回去有额外的25元晚餐餐补&#xff0c;10点之后回去可以免费用滴滴。 组内的大模型工作大概分两个方向&#xff1a; 1.3B、3B等小…

基于opencv的单目相机标定

openCv版本&#xff1a;4.4.0 从源码处拷贝标定代码出来使用&#xff0c;需要拷贝samples/cpp/tutorial_code/calib3d/camera_calibration 需要的文件如下&#xff1a; -rw-rw-r-- 1 rog rog 28490 Jul 18 2020 camera_calibration.cpp -rw-rw-r-- 1 rog rog 3152 Jul 18 …