代码结构

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

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

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. ES到底是个什么东西

    概念:全文检索服务器(是基于Lucene开发的全文检索服务器),它可以近乎实时存储.检索数据,底层仍然是Lucene来实现的所以索引和搜索功能,他的目的是通过的简单的RESTFul API 来隐藏Lu ...

  2. FastJson、Jackson、Gson进行Java对象转换Json

    - Java对象转换Json的细节处理前言Java对象在转json的时候,如果对象里面有属性值为null的话,那么在json序列化的时候要不要序列出来呢?对比以下json转换方式一.fastJson1 ...

  3. CTT2023 邮寄

    从广州被邮寄到了苏州.还有点感冒有点咳嗽,体温 37 度.还是来了. Day 0 清早坐 xp 的车,早上坐飞机,中午坐高铁,下午坐大巴,风尘仆仆地赶到了苏州. 飞机上有一套省选题要验,看了两眼,T1 ...

  4. 【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期

    前言 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-修改组件主题和样式 那么了解完了uni-app-修改组件主题和样式之后,这篇文章来给大家介绍一下 uni-app-OptionAPI应 ...

  5. [Clickhouse] Clickhouse 报SQLException : Read timed out

    1 问题描述 在使用Clickhouse(21.3.4.25)进行大数据量地数据查询,高频报出 SQLException : Read timed out 错误 2 问题分析 2.1 单次查询:耗时约 ...

  6. 新版本下如何通过外部网络访问wsl

    众所周知,wsl2是windows下的linux子系统,并且采用类似于虚拟机NAT的管理方式.一般情况下,外部网络很难直接访问到wsl上的服务,除非使用端口转发.而现在,微软更新了wsl 2.0.0, ...

  7. vivo 数据库备份恢复系统演化

    作者:vivo 互联网数据库团队 - Han Chaobing 介绍 vivo 数据库备份恢复功能的演化,以及对备份文件的功能扩展. 一.概述 vivo互联网领域拥有的数据库组件分别为 MySQL.M ...

  8. java漏洞学习平台搭建

    java漏洞平台搭建 项目地址 : https://github.com/j3ers3/Hello-Java-Sec 配置mvn 先配置一下mvn,下载后解压 proxychains wget htt ...

  9. STM32CubeMX教程4 EXTI 按键外部中断

    1.准备材料 开发板(STM32F407G-DISC1) ST-LINK/V2驱动 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) 2 ...

  10. @Value是个什么东西

    对注解不了解的可以看一下: Java注解,看完就会用 首先我们要明确: @Value 是 Spring 框架的注解. 它有什么作用呢? 作用 @Value 通过注解将常量.配置文件中的值.其他bean ...