<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 安装并启动 ...
随机推荐
- CLion安装与配置教程
一.下载并安装CLion 1.下载 1.官网: Download CLion 2.注意: 这里建议使用2021.1.3版本之前,为之后的使用便利而做打算. (这里以Windows系统为例,其他系统类似 ...
- 记一次线上Oracle连接耗时过长的问题
问题现象 1.远程Oracle数据库通过IP:PORT/SERVICE_NAME连接 2.应用服务通过Docker容器部署,访问Oracle联通性测试接口,需要50s左右才能返回连接成功: 3.写了个 ...
- vertx的学习总结三
一.event bus是什么 各个verticle的通信 二.point-to-point, request-reply, publish/subscribe 通过 the event bus 例题一 ...
- MySQL日期时间加|减法
日期加法 select date_add(curdate(), interval N SECOND); -- 加N秒 select date_add(curdate(), interval N MIN ...
- 量化交易的相对强弱（RSI ）指标计算及策略
顾名思义,相对强弱指数 (RSI) 指标告诉我们资产的相对强弱.换句话说,RSI 告诉我们股票相对于自身的表现(或不表现).RSI 被视为一种强大的技术指标,可用于分析市场,并且是交易者武器库的重要组 ...
- mybatis测试类的书写步骤
mybatis测试类的书写步骤 private SqlSession session; @Test //* 1.根据UserMapper接口的Class对象获取Mapper接口类型的对象 //* 2. ...
- IDEA美化教程
一.IDEA 字体大小怎么设置(图文教程) IDEA 初次安装时,默认字体非常小,这种情况下,代码阅读起来非常费劲,对保护视力非常不友好.那么,要如何在 IDEA 中设置字体大小呢? 这里介绍两种方法 ...
- Python——第一章：for循环
字符串是可迭代的for循环: for 任意变量名 in 字符串|列表|元祖|字典|集合(可迭代的东西): 代码 for循环把可迭代的东西中的每一项内容拿出来. 挨个的赋值给变量. 每一次赋值都要执行一 ...
- yml与json互转、yaml转json、json转yml
yml与json互转.yaml转json.json转yml 使用jackson下的格式化模块实现 依赖: <dependency> <groupId>com.fasterxml ...
- 物联网设备上云难？华为云IoT帮你一键完成模型定义，快速在线调试设备
摘要:在不到3分钟的操作里,不仅完成了一款智慧烟感设备在云端的模型定义,还通过在线调试了解到了设备和远端通信的过程. 本文分享自华为云社区<物联网设备上云难?华为云IoT帮你一键完成模型定义,快 ...