代码结构

组件就是将复杂的功能拆分成简单的块，拆分后的块可以被多处使用。

组件的使用分成三个步骤：

1、创建组件构造器     Vue.extend()

2、注册组件               Vue.component()

3、使用组件               <my-cpn></my-cpn>

一、     01-组件化的基本使用

1、效果

2、代码

01-组件化的基本使用.html

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>Title</title>

	</head>

	<body>

		<div id="app">

			<!--3.使用组件-->

			<my-cpn></my-cpn>

			<div>

				<div>

					<my-cpn></my-cpn>

				</div>

			</div>

		</div>

		<my-cpn></my-cpn>

		<script src="vue.js"></script>

		<script>

			// 1.创建组件构造器对象

			let cpnC = Vue.extend({

				template: `

				<div>

					<h2>组件的标题</h2>

					<p>--------组件的内容-----------</p>

				</div>`

			})

			// 2.注册组件

			Vue.component('my-cpn', cpnC)

			let app = new Vue({

				el: '#app',

				data: {

					message: '你好啊'

				}

			})

		</script>

	</body>

</html>

二、     02-全局组件和局部组件

1、 效果

（1）Vue.component('cpn', cpnC) 这样注册是全局组件

（2） 这样注册就是局部组件

let app = new Vue({

el: '#app',

components: {

// cpn使用组件时的标签名

cpn: cpnC

}

})

2、代码

02-全局组件和局部组件.html

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>Title</title>

	</head>

	<body>

		<div id="app">

			<cpn></cpn>

		</div>

		<div id="app2">

			<cpn></cpn>

		</div>

		<script src="vue.js"></script>

		<script>

			// 1.创建组件构造器

			const cpnC = Vue.extend({

				template: `

					<div>

						<h2>组件的标题</h2>

						<p>--------组件的内容-----------</p>

					</div>

					`

			})

			// 2.注册组件(全局组件, 意味着可以在多个Vue的实例下面使用)

			 // Vue.component('cpn', cpnC)

			// 疑问: 怎么注册的组件才是局部组件了?

			let app = new Vue({

				el: '#app',

				components: {

					// cpn使用组件时的标签名

					cpn: cpnC

				}

			})

			const app2 = new Vue({

				el: '#app2'

			})

		</script>

	</body>

</html>

三、03-父组件和子组件

1、效果

2、代码

03-父组件和子组件.html

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>Title</title>

	</head>

	<body>

		<div id="app">

			<cpn2></cpn2>

		</div>

		<script src="vue.js"></script>

		<script>

			// 1.创建第一个组件构造器(子组件)

			let cpnC1 = Vue.extend({

				template: `

				<div>

					<h2>子组件的标题</h2>

					<p>--------组件的内容-----------</p>

				</div>

				`

			})

			// 2.创建第二个组件构造器(父组件)

			let cpnC2 = Vue.extend({

				template: `

				<div>

					<h2>父组件的标题</h2>

					<p>--------组件的内容-----------</p>

					<cpn1></cpn1>

				</div>

				`,

				components: {

					cpn1: cpnC1

				}

			})

			// root组件

			let app = new Vue({

				el: '#app',

				data: {

					message: '你好啊'

				},

				components: {

					cpn2: cpnC2

				}

			})

		</script>

	</body>

</html>

四、04-组件模板的分离写法

1、效果

这个效果不太重要，重要的是代码的分离写法

2、代码

04-组件模板的分离写法.html

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>Title</title>

	</head>

	<body>

		<div id="app">

			<cpn></cpn>

			<cpn></cpn>

		</div>

		<template id="cpn">

			<div>

				<h2>组件的标题</h2>

				<p>--------组件的内容-----------</p>

			</div>

		</template>

		<script src="vue.js"></script>

		<script>

			// 1.注册一个全局组件

			Vue.component('cpn', {

				template: '#cpn'

			})

			const app = new Vue({

				el: '#app'

			})

		</script>

	</body>

</html>

五、05-组件中的数据存放问题

1、效果

2、代码

05-组件中的数据存放问题.html

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>Title</title>

	</head>

	<body>

		<div id="app">

			 <h2>{{title}}</h2>

			<cpn></cpn>

		</div>

		<!--2.template标签-->

		<template id="cpn">

			<div>

				<h2>{{title}}</h2>

			</div>

		</template>

		<script src="vue.js"></script>

		<script>

			// 1.注册一个全局组件

			Vue.component('cpn', {

				template: '#cpn',

				data() {

					return {

						title: '我是组件中的标题'

					}

				}

			})

			let app = new Vue({

				el: '#app',

				data: {

					message: '你好',

					title: '我是标题'

				}

			})

		</script>

	</body>

</html>

<vue 组件 1、组件化基本使用>的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. MySQL 有哪些常见的面试题

    MySQL 是一种常用的关系型数据库管理系统,在面试过程中经常会涉及与 MySQL 相关的问题.以下是一些常见的 MySQL 面试题: 1. 介绍一下 MySQL 和其他数据库管理系统的区别. - M ...

  2. 如何在cmd中转入其他文件夹

  3. lca 学习笔记

    定义 最近公共祖先简称 \(LCA\) 两个节点的最近公共祖先,就是这两个点的公共祖先里,离根最远的的那个 为了方便,我们记某点集 \(S={v1,v2,...,vn}\) 的最近公共祖先为 \(LC ...

  4. Kubernetes Service 中的 external-traffic-policy 是什么？

    [摘要] external-traffic-policy,顾名思义"外部流量策略",那这个配置有什么作用呢?以及external是指什么东西的外部呢,集群.节点.Pod?今天我们就 ...

  5. 一些JavaSE学习过程中的思路整理(四)（主观性强，持续更新中...）

    目录 一些JavaSE学习过程中的思路整理(四)(主观性强,持续更新中...) 多线程编程:资源类&任务&运行机制的解耦合 关于重入锁(ReentrantLock)的细节 条件对象配合 ...

  6. [活动(深圳)] .NET Love AI 之 .NET Conf China 2023 Party 深圳

    中国.NET 社区2023年12月16日 在北京成功举办了.NET Conf China 2023,虽然北京飘起雪,依然挡不住想要参加活动的全国各地的.NET开发兄弟姐妹的热情.大家可以通过大会精彩照 ...

  7. 面试官：String长度有限制吗？是多少？还好我看过

    前言 话说Java中String是有长度限制的,听到这里很多人不禁要问,String还有长度限制?是的有,而且在JVM编译中还有规范,而且有的家人们在面试的时候也遇到了,本人就遇到过面试的时候问这个的 ...

  8. 从大数据到AI，华为云存储加速企业大模型快速应用

    摘要:AI与大数据算法不断发展,在生产中的应用也越来越广,而应用的场景除了对算法,软件架构要求越来越高外,也对底层IaaS(基础设施即服务)提出了新的挑战. AI与大数据算法不断发展,在生产中的应用也 ...

  9. 秋风到，ModelArts“ AI市场算法Fast-SCNN指南”秋膘贴起来

    本文分享自华为云社区<带你来秋日尝鲜 | ModelArts AI市场算法Fast-SCNN使用指导>,作者:Tianyi_Li 摘要:送小伙伴们一份新鲜出炉的ModelArts AI市场 ...

  10. 浅析华为云基于HBase MTTR上的优化实践

    摘要:主要介绍华为云在HBase 2.x内核所做的一些MTTR优化实践. 本文分享自华为云社区<华为云在HBase MTTR上的优化实践>,作者: 搬砖小能手. 随着HBase在华为云的广 ...