<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 安装并启动 ...
随机推荐
- C++ 共享内存ShellCode跨进程传输
在计算机安全领域,ShellCode是一段用于利用系统漏洞或执行特定任务的机器码.为了增加攻击的难度,研究人员经常探索新的传递ShellCode的方式.本文介绍了一种使用共享内存的方法,通过该方法,两 ...
- 神经网络优化篇：详解训练，验证，测试集（Train / Dev / Test sets）
训练,验证,测试集 在配置训练.验证和测试数据集的过程中做出正确决策会在很大程度上帮助大家创建高效的神经网络.训练神经网络时,需要做出很多决策,例如: 神经网络分多少层 每层含有多少个隐藏单元 学习速 ...
- [GDOIpj221D] 小学生计数题
第四题 小学生计数题 提交文件: counting.cpp 输入文件: counting.in 输出文件: counting.out 时间空间限制: 1 秒, 256 MB 作为 GDOI 的组题人, ...
- Vue绑定Style和Class写法
vue2写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 基于Docker Desktop搭建Kafka集群并使用Java编程开发
一.引言 前段时间因课业要求使用Docker Desktop 部署Kafka集群并编写生产者消费者程序,折磨了我好几天,在查找大量资料后终于是把整个集群搭建完成了.现在我想要分享其中搭建的历程,希望能 ...
- 低代码之光！轻量级 GUI 的设计与实现
前言 每当提起低代码,很多人都会下意识的出现过激反应,吐槽低代码都是**,唯恐避之不及.可能大部分人觉得低代码就是替代手写代码,对于程序员来说这是不可接受的.其实低代码表述的含义非常宽泛,我相信很多人 ...
- ElasticSearch之配置
ElasticSearch主要的配置文件,如下: elasticsearch.yml,ElasticSearch的相关参数. jvm.options,JVM的相关参数. log4j2.properti ...
- puppeteer的简单使用
引言 对于编写应用程序,尤其是要部署上线投入生产使用的应用,QA是其中重要的一环,在过去的工作经历中,我参与的项目开发,大多是由测试同学主要来把控质量的,我很少编写前端方面的测试代码,对于测试工具的使 ...
- 调用含有header的WebService时，跳过证书验证
最近在做Webservice的接口调用,header的用户名和密码都是正确的,地址也是对的,但一直提示:基础连接已关闭,未能与SSL/TLS安全通道建立信任关系. 解决方案: 请求之前加上下面得代码即 ...
- 2023-09-20：用go语言，保证一定是n*n的正方形，实现从里到外转圈打印的功能 如果n是奇数，中心点唯一，比如 a b c d e f g h i e是中心点，依次打印 : e f i h g
2023-09-20:用go语言,保证一定是n*n的正方形,实现从里到外转圈打印的功能 如果n是奇数,中心点唯一,比如 a b c d e f g h i e是中心点,依次打印 : e f i h g ...