Vue2:组件

Vue2:组件

    • 非单文件组件
      • 定义
      • 注册
      • 使用
    • 单文件组件


组件是Vue中最核心的内容,在编写页面时,将整个页面视为一个个组件,再把组件拼接起来,这样每个组件之间相互独立,有自己的结构样式,使页面编写思路更清晰,模块更分明,而且提高了复用性。

Vue中组件分为非单文件组件单文件组件

非单文件组件

所谓非单文件组件,是指一个组件的htmlcssJavaScript三者是可以分离的,它们可以分别放在不同的文件中,这种组件并不常用,更多的时候使用单文件组件。不过两者的语法是相通的,后者需要引入脚手架,所以主要使用前者来讲解组件语法。


定义

组件的创建依赖于Vue.entend方法:

const vc = Vue.extend({组件对象})

调用方法时,传入一个组件对象,此时Vue.extend返回值就是一个组件对象。

在组件对象中,大部分语法和vm一致比如数据data、方法methods等。

示例:

const hello = Vue.extend({
	data(){ 
		return {
                  message: "hello Wrold!",
                  count: 0
		}
	},
	methods: {
		add(){
                  this.count++
		}
	},
})

以上代码定义了一个hello组件,其包含datamethods属性,但是vm不太一样的是data必须是一个函数,函数返回值是配置对象,如果在vm中,data应该写为下面这样:

data{ 
     message: "hello Wrold!",
     count: 0
}

这是因为组件是可以复用的,如果直接以对象的形式写data,那么多个组件会共用一个data对象,导致组件之间数据共享。当把data写为一个函数,每次使用组件时,都会返回一个新创建的data对象,组件之间的数据就是相互独立的了。

现在的组件有数据和方法了,但是还缺少html结构,在vm中这可以通过el来指定挂载的元素,随后就可以直接在元素内部使用模板了:

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

<script>
	new Vue({
		el:'#root',
		// ...
	})
</script>

但是非单文件组件不能这样做,其使用一个template配置项,传入一个字符串,在字符串内写html结构:

const hello = Vue.extend({
	template:`
		<div class="demo">
            <p> {{message}} </p>
            <p> {{count}} </p>
			<button @click="add">count++</button>	
		</div>
	`,
	// ...
})

这里要注意使用的是模板字符串,否则无法在一个字符串内部换行。在template的字符串内部,可以写html结构,{{}}插值语法、@click事件监听等等功能。

另外的,在template中最外层必须只有一个标签,不能同时存在多个标签同时在最外层的情况。

比如刚才的组件不能写为:

const hello = Vue.extend({
	template:`
        <p> {{message}} </p>
        <p> {{count}} </p>
		<button @click="add">count++</button>	
	`,
	// ...
})

此处把最外层的<div>丢掉了,导致template下同时存在三个标签,这是不允许的。


注册

现在已经定义好了一个组件,组件想要被使用,就需要被注册到vm中,分为全局注册局部注册两种形式。

  • 全局注册:
Vue.component('组件名', 组件对象)
  • 局部注册:
new Vue({
	components:{
		组件名: 组件对象
	}
})

全局注册的组件,可以被所有vm使用,而局部注册的组件,只有当前vm可以使用。由于大部分情况下都只有一个vm,所以基本都使用局部注册。

将刚才的hello组件注册到vm中:

<div id="root">
    <p>{{msg}}</p>
</div>
<script> 
	new Vue({
		el:'#root',
		data:{
			msg:'我是VM'
		},
		components:{
			hello
		}
	})
</script>

其中components:{hello}就是在注册hello组件,不过由于组件名和对象名相同进行了缩写,原本应该写为hello:hello

组件命名时,如果组件名有多个单词,采用kebab-case命名,比如:

components:{
	'hello-world': hello
}

如果使用了脚手架,还可以使用驼峰命名:HelloWorld

如果现在查看浏览器的输出结果,是看不到组件的内容的:

在这里插入图片描述

注册组件时,组件还没有生效,如果想要hello组件生效,还需要进行组件标签的引入。


使用

组件的使用非常简单,当组件成功注册后,直接把组件当作一个html标签使用

<div id="root">
    <p>{{msg}}</p>
    <hello></hello>
</div>

当注册完hello组件后,就可以使用<hello>这个标签,这个标签就代表了这个组件:

在这里插入图片描述

此时就可以看到组件的内容生效了。

并且组件可以复用,也就是可以使用多个<hello>标签:

<div id="root">
    <p>{{msg}}</p>
    <hello></hello>
    <hello></hello>
</div>

输出结果:

在这里插入图片描述

此处点击了count++按钮,两个组件的count值不一样了,这是因为之前的data是一个函数,两个组件使用的不是同一个data对象,数据之间相互独立。

由于组件的使用是基于html标签的,所以组件命名不要与现有标签冲突,比如说不要出现某个组件名称叫做divbody等。

以上是组件的复用,除此之外组件还可以进行嵌套:

const date = Vue.extend({
	template:`
		<div class="demo">
		<p> 当前时间为: {{time}} </p>
		</div>
	`,
	data(){ 
		return {
		time: "2024.11.14"
		}
	}
})

const hello = Vue.extend({
	template:`
		<div class="demo">
	        <p> {{message}} </p>
	        <p> {{count}} </p>
			<button @click="add">count++</button>	
			<date></date>
		</div>
	`,
	// ...
    components:{
        date
	}
})

以上代码定义了两个组件datehello,并在hello中使用components引入了组件date

其余代码和原先一致,在vm中引入了hello

在这里插入图片描述

此时嵌套的组件date作为了hello的一部分,在vm中一起展示了。


单文件组件

非单文件组件中,要把html结构定义在template,并且要以字符串的形式,这样实在是太麻烦了。单文件组件提供了更加方便的语法:

单文件组件以.vue为结尾,一个文件就是一个组件的全部内容,在一个文件内部同时编写htmlcssJavaScript内容,并且这些内容共同构成一个组件。

一个.vue基本结构如下:

<template> <!-- .html -->
</template>

<script> //.js
</script>

<style> /* .css */
</style>

其包含三个标签:

  • <template>:该组件的html结构
  • <script>:该组件的JavaScript脚本
  • <style>:该组件的css样式

比如hello组件的单文件形式:

<template> <!-- .html -->
	<div class="demo">
		<p> {{message}} </p>
		<p> {{count}} </p>
		<button @click="add">count++</button>	
	</div>
</template>

<script> //.js
	const hello = Vue.extend({
		data(){ 
			return {
				message: "hello Wrold!",
				count: 0
			}
		},
		methods: {
			add(){
				this.count++
			}
		}
	})

	export default hello
</script>

<style> /* .css */
	.demo{
		background-color: orange;
	}
</style>

样式不在写在template属性内部,而是写在<template>标签内部。在<style>中,为组件添加了一个背景色。在<script>中,定义了该组件的对象,并通过export暴露给外部,这样其它文件就可以导入这个组件。

其它的使用方式与非单文件组件一致,并且这种单文件组件一般结合脚手架使用,就不再讲解了。


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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

超子物联网HAL库笔记:定时器[基础定时]篇

超子物联网 HAL库学习 汇总入口&#xff1a; 超子物联网HAL库笔记&#xff1a;[汇总] 写作不易&#xff0c;如果您觉得写的不错&#xff0c;欢迎给博主来一波点赞、收藏~让博主更有动力吧&#xff01; 一、资源介绍&#xff1a;STM32F103C8T6定时器资源介绍 高级定时器&#x…

ubuntu20.04_从零LOD-3DGS的复现

环境要求 dependencies:- cudatoolkit11.6- plyfile0.8.1- python3.7.13- pip22.3.1- pytorch1.12.1- torchaudio0.12.1- torchvision0.13.1- tqdm1. 安装conda创建环境 conda create -n lod-3dgs python3.7.132. 安装CUDA11.6和相应cuDNN。 2.1 CUDA CUDA安装参考CUDA10.1…

Springboot 启动端口占用如何解决

Springboot 启动端口占用如何解决 1、报错信息如下 *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 9010 was already in use.Action:Identify and stop the process thats listening o…

Python注意力机制Attention下CNN-LSTM-ARIMA混合模型预测中国银行股票价格|附数据代码...

全文链接&#xff1a;https://tecdat.cn/?p38195 股票市场在经济发展中占据重要地位。由于股票的高回报特性&#xff0c;股票市场吸引了越来越多机构和投资者的关注。然而&#xff0c;由于股票市场的复杂波动性&#xff0c;有时会给机构或投资者带来巨大损失。考虑到股票市场的…

论文笔记 SuDORMRF:EFFICIENT NETWORKS FOR UNIVERSAL AUDIO SOURCE SEPARATION

SUDORMRF: EFFICIENT NETWORKS FOR UNIVERSAL AUDIO SOURCE SEPARATION 人的精神寄托可以是音乐&#xff0c;可以是书籍&#xff0c;可以是运动&#xff0c;可以是工作&#xff0c;可以是山川湖海&#xff0c;唯独不可以是人。 Depthwise Separable Convolution 深度分离卷积&a…

【K8S问题系列 |1 】Kubernetes 中 NodePort 类型的 Service 无法访问【已解决】

在 Kubernetes 中&#xff0c;NodePort 类型的 Service 允许用户通过每个节点的 IP 地址和指定的端口访问应用程序。如果 NodePort 类型的 Service 无法通过节点的 IP 地址和指定端口进行访问&#xff0c;可能会导致用户无法访问应用。本文将详细分析该问题的常见原因及其解决方…

Fiddler安装配置+抓包手机

1.下载安装&#xff08;汉化版&#xff09; 链接&#xff1a;https://pan.baidu.com/s/1Xgw66UbV-lVV--BJmwEKOw?pwdybww 提取码&#xff1a;ybww 2. HTTPS设置 3.connection设置 4.使用fiddler对手机进行抓包 前提&#xff1a;先打开fiddler&#xff0c;手机和电脑连接同一…

【专题】计算机网络之网络层

1. 网络层的几个重要概念 1.1 网络层提供的两种服务 (1) 让网络负责可靠交付 计算机网络模仿电信网络&#xff0c;使用面向连接的通信方式。 通信之前先建立虚电路 VC (Virtual Circuit) (即连接)&#xff0c;以保证双方通信所需的一切网络资源。 如果再使用可靠传输的网络…

高亚科技签约美妥维志化工,提升业务协同与项目运营效率

近日&#xff0c;中国企业管理软件资深服务商高亚科技与韶关美妥维志化工有限公司&#xff08;以下简称“美妥维志”&#xff09;正式签约。基于高亚科技的8Manage PM项目管理软件&#xff0c;美妥维志将实现项目进度、人员审批及问题的统一管理&#xff0c;提升部门间协同效率…

《双城之战》,活成了王者荣耀最羡慕的模样

11月9日&#xff0c;《双城之战》第二季开播&#xff0c;延续了第一季的好口碑&#xff0c;目前该剧集在豆瓣平台荣获9.2分高分&#xff0c;同时在烂番茄平台也收获了100%的好评率&#xff0c;可以说是赢得了国内外观众的一致认可。 与第一季因剧集热度带动游戏市场爆火而略显…

Spring Cloud Eureka 服务注册与发现

Spring Cloud Eureka 服务注册与发现 一、Eureka基础知识概述1.Eureka两个核心组件2.Eureka 服务注册与发现 二、Eureka单机搭建三、Eureka集群搭建四、心跳续约五、Eureka自我保护机制 一、Eureka基础知识概述 1.Eureka两个核心组件 Eureka Server &#xff1a;服务注册中心…

告别系统限制,一键关闭Windows Defender

作为一款专业级系统优化工具&#xff0c;Defender Remover 为追求完全系统控制权的高级用户提供了全方位的安全组件管理解决方案。这款强大的实用工具不仅完美支持从 Windows 8.x 到最新的 Windows 11 全系列操作系统&#xff0c;更提供了精细化的安全组件调整选项。 本工具最…

GitLab 如何降级?

本分分享 GitLab 降级的流程和注意事项。极狐GitLab 为 GitLab 的中文发行版&#xff0c;本文以私有化部署的极狐GitLab 为例来演示整个过程。 【极狐GitLab 推出 GitLab 老旧版本的专业升级服务【https://dl.gitlab.cn/cm33bsfv】&#xff0c;可以让 12.x、13.x、14.x、15.x …

微软日志丢失事件敲响安全警钟

NEWS | 事件回顾 最近&#xff0c;全球最大的软件公司之一——微软&#xff0c;遭遇了一场罕见的日志丢失危机。据报告&#xff0c;从9月2日至9月19日&#xff0c;持续长达两周的时间里&#xff0c;微软的多项核心云服务&#xff0c;包括身份验证平台Microsoft Entra、安全信息…

leetcode268 丢失的数字

class Solution { public:int missingNumber(vector<int>& nums) {sort(nums.begin(),nums.end());int i0;for(;i<nums.size();i){if(i!nums[i]) break;}return i;} }; sort(nums.begin(), nums.end()); 对数组进行排序。虽然排序是一个可行的方法&#xff0c;但是…

HBuilder(uniapp) 配置android模拟器

HBuilder&#xff08;uniapp&#xff09; 配置android模拟器 选择完成之后&#xff0c;点击ok&#xff0c;再次点击Configure—》AVD Manager

Redis高可用-主从复制

这里写目录标题 Redis主从复制主从复制过程环境搭建从节点配置常见问题主从模式缺点 Redis主从复制 虽然 Redis 可以实现单机的数据持久化&#xff0c;但无论是 RDB 也好或者 AOF 也好&#xff0c;都解决不了单点宕机问题&#xff0c;即一旦 redis 服务器本身出现系统故障、硬…

Vue3 -- 项目配置之husky【企业级项目配置保姆级教程4】

引言&#xff1a; eslint&#xff1a;代码规范校验prettier&#xff1a;代码格式化stylelint&#xff1a;CSS代码校验 上述三篇文章集成配置完成代码校验工具&#xff0c;当时需要每次手动的去执行命令才会格式化我们的代码。。如果有人没有格式化就提交了远程仓库&#xff0…

PaddlePaddle 开源产业级文档印章识别PaddleX-Pipeline “seal_recognition”模型 开箱即用篇(一)

AI时代到来&#xff0c;各行各业都在追求细分领域垂直类深度学习模型&#xff0c;今天给大家介绍一个PaddlePaddle旗下&#xff0c;基于PaddleX Pipeline 来完成印章识别的模型“seal_recognition”。 官方地址&#xff1a;https://github.com/PaddlePaddle/PaddleX/blob/relea…

06.VSCODE:备战大项目,CMake专项配置

娇小灵活的简捷配置不过是年轻人谈情说爱的玩具&#xff0c;帝国大厦的构建&#xff0c;终归要交给CMake去母仪天下。一个没有使用 CMake 的 C 项目&#xff0c;就像未来世界里的一台相声表演&#xff0c;有了德纲却无谦&#xff0c;观众笑着遗憾。—— 语出《双城记》作者&…