<vue 组件 1、组件化基本使用>
代码结构
组件就是将复杂的功能拆分成简单的块，拆分后的块可以被多处使用。
组件的使用分成三个步骤：
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、组件化基本使用>的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- MySQL 有哪些常见的面试题
MySQL 是一种常用的关系型数据库管理系统,在面试过程中经常会涉及与 MySQL 相关的问题.以下是一些常见的 MySQL 面试题: 1. 介绍一下 MySQL 和其他数据库管理系统的区别. - M ...
- 快速认识，后端王者语言：Java
Java作为最热门的开发语言之一,长居各类排行榜的前三.所以,就算你目前不是用Java开发,你应该了解Java语言的特点,能用来做什么,以备不时之需. Java 是一种高级.多范式编程语言,以其编译为 ...
- PanguHA,一款Windows双机热备工具
1.简介 PanguHA是Windows平台的双机热备集群系统,是提供系统高可用性的解决方案,一般由两个节点构成,分为活动节点及备用节点(两者之间可以相互切换),软件界面如下 PanguHA下载地址 ...
- 51Nod - 1086 多重背包
有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放在容量为W的背包里,每种物品的体积为W1,W2......Wn(Wi为整数),与之相对应的价值为P1,P2......Pn(Pi ...
- FOJ有奖月赛-2015年11月 Problem B 函数求解
Problem B 函数求解 Accept: 171 Submit: 540Time Limit: 1000 mSec Memory Limit : 32768 KB Problem D ...
- JXNU acm选拔赛 壮壮的数组
壮壮的数组 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submiss ...
- ASR项目实战-决策点
针对语音识别的产品,分别记录设计.开发过程中的决策点. 实时语音识别 对于实时语音识别来说,客户端和服务端之间实时交换语音数据和识别的结果. 客户端在启动识别时,即开始发送语音数据,期望在等待较短的时 ...
- 降低node版本，怎么降低node版本
降低node版本,怎么降低node版本? 部分老旧项目需要使用低版本的node,网上很多是无效的,高版本无法直接安装低版本node,但是低版本nodejs可以安装部分高版本node,从而达到升级效果. ...
- MyBatis 的缓存处理
作为常见的 ORM 框架,在使用 MyBatis 的过程中可以针对相关的查询进行缓存处理以提高查询的性能.本文将简要介绍一下 MyBatis 中默认的一级缓存和二级缓存,以及自定义缓存的处理 MyBa ...
- vue3 + element-plus 的 upload + axios + django 文件上传并保存
之前在网上搜了好多教程,一直没有找到合适自己的,要么只有前端部分没有后端,要么就是写的不是很明白.所以还得靠自己摸索出来后,来此记录一下整个过程. 其实就是不要用默认的 action,要手动实现上传方 ...