<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 安装并启动 ...
随机推荐
- v-for和指令
. v-for 起遍历作用. 注意点: 1.遍历的里面第一个值是定义的元素的值,第二个值是值的名称,第三个值为下标 2.:key是v-blind:key的简写,是代码中的唯一标识,一般用id来定义 v ...
- 华企盾DSC服务器配置无法创建数据库
测试连接的数据库用户没有创建数据库的权限,应该打开数据库控制台,把对应用户的权限都勾上
- nginx-通过配置不同的虚拟主机实现，不同的uri访问不同资源
先来一个配置 再来另外一个 这两个地址对应的域名都配置解析了,并且解析的ipv4地址是你的服务器ip,且上面配置文件中的内容都在服务器做了相应的配置,对应的路径下的资源是需要准备好的(比如网站或图片或 ...
- ElasticSearch之cat component templates API
命令样例如下: curl -X GET "https://localhost:9200/_cat/component_templates?v=true&pretty" -- ...
- 8种超简单的Golang生成随机字符串方式
本文分享自华为云社区<Golang生成随机字符串的八种方式与性能测试>,作者: 张俭. 前言 这是**icza**在StackOverflow上的一篇高赞回答,质量很高,翻译一下,大家一起 ...
- Java 集合（三）ConcurrentHashMap
一般来讲,通常使用的 HashMap 不是线程安全的,因为没有任何机制来保证每个操作的原子性.在 ConcurrentHashMap 出现之前,可以通过给 HashMap 的每个操作加上唯一的互斥锁来 ...
- 新版的Django中的path不能使用正则表达式
新版的path 虽然 取代了 之前的url,但是在写路由的时候不能在路由中直接写正则表达式,不然会找不到页面. 解决方法使用 re_path from django.urls import re_pa ...
- 【开源】EDUCN网站
EDUCN https://scrc.rth1.link/ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&q ...
- Jenkins汉化配置
登录进入Jenkins首页 输入:本地ip+端口号(localhost:8099) 进入插件管理页面(Manage Jenkins)安装相关插件 搜索:到available栏目搜索:Locale pl ...
- 解锁华为云AI如何助力无人车飞驰“新姿势”，大赛冠军有话说
摘要:在2020年第二届华为云人工智能大赛•无人车挑战杯赛道中,"华中科技大学无人车一队"借助华为云一站式AI开发与管理平台ModelArts及HiLens端云协同AI开发应用平台 ...