Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）
1、为啥要使用组件
好用啊、像堆积木一样
2、基本使用
Vue中使用组件的三大步骤：
- 一、定义组件(创建组件)
- 二、注册组件
- 三、使用组件(写组件标签)
一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；区别如下：
- 1、el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
- 2、data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。
二、如何注册组件？
- 1、局部注册：靠new Vue的时候传入components选项
- 2、全局注册：靠Vue.component(‘组件名’,组件)
三、编写组件标签：<school></school>
3、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<!-- 第三步、编写组件标签 -->
<city></city>
<hr>
<school></school>
</div>
<div id="AppSecond">
<city></city>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//第一步、创建city组件
const city = Vue.extend({
template: `
<div class="cityDemo">
<h1>城市名称：{{cityName}}</h1>
<h1>城市美食：{{cityFood}}</h1>
<button @click="show">点击我弹窗</button>
</div>
`,
data() {
return {
cityName: "周口",
cityFood: "胡辣汤"
}
},
methods: {
show() {
alert("你好啊、Vue")
}
},
})
//第一步创建 学校组件
const school = Vue.extend({
template: `
<div class="cityDemo">
<h1>学校名称：{{schoolName}}</h1>
<h1>学校位置：{{schoolAddress}}</h1>
</div>
`,
data() {
return {
schoolName: "长沙大学",
schoolAddress: "湖南长沙"
}
}
})
// 第二步、全局注册组件
Vue.component('city', city)
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue"
}
,
//第二步、注册组件（局部注册）
components: {
school,
}
})
new Vue({
el: '#AppSecond',
})
</script>
</body>
</html>
4、测试效果
5、注意点
几个注意点：
1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法：<school></school>
第二种写法：<school/>
备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
3.一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options
Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）的更多相关文章
- vue单文件组件实例1：简单单文件组件
HelloWorld.vue: <template> <div class="hello"> <h1>{{msg}}</h1> ...
- vue单文件组件实例2：简单单文件组件
Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </templat ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- day 84 Vue学习六之axios、vuex、脚手架中组件传值
Vue学习六之axios.vuex.脚手架中组件传值 本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...
- 前端学习笔记系列一：2 Vue的单文件组件
(1)非单文件vue组件和单文件vue组件的一般写法 一个完整的vue组件会包括三个部分:一是template模板部分,二是js程序逻辑部分,三是css样式部分.每个组件都有属于自己的模板,js和样式 ...
- 一丢丢学习之webpack4 + Vue单文件组件的应用
之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue -3：单文件组件
在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规 ...
随机推荐
- vue-cli 启动项目时空白页面
vue-cli 启动项目时空白页面 在启动项目时 npm run serve / npm run dev 启动 vue 项目空白页:且终端及控制台都未报错 通过各种查阅发现在项目根目录中 vue-co ...
- LabView、CVI、MeasurementStudio三者之间的区别
LabView是NI公司傻瓜化的图形操作测试开发工具: CVI是NI公司C语言风格的测试开发语言,当然也是工具: Measurement Studio是面向一直使用微软开发工具如VC.C#的那些开发人 ...
- 5.8 NOI 模拟
\(T1\) 比较容易想到的 二分转化为判定,判定是否存在一个子图能保证能一直在\(x\)时间内到达\(n\) 设\(dis(u,v)\)表示\(u->v\)的最短路 先找出候选节点\(i,di ...
- MySQL之COUNT(*)性能到底如何？
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. 前言 在实际开发过程中,统计一个表的数据量是经常遇到 ...
- ENSP NE40E 报错（NE1启动操作超时，请检查与服务器链接后重试！）
前言:某网友淘宝找我咨询NE40E启动失败的问题,事后我整理的处理过程,供各位同行参考. 系统版本:windows 10 软件版本: ENSP:V100R003C00 virtual BOX:5.2. ...
- Sum （欧拉定理）
题面 提示:无限输入 题解 一看这题的数据 ............................... 这也太大了,必须边输入边取模才行, 但是式子很复杂,所以必须推出一些结论. 因为Xk是有顺序 ...
- BI如何配置“花生壳”，看这一篇就够了
花生壳作为一款免费的内网穿透软件,在软件行业备受青睐.在做好产品的同时,如何让客户轻松看到,也是非常有必要的.本篇将带领大家使用"花生壳"软件完成BI数据分析的配置.第一步:下载安 ...
- 字节微服务HTTP框架Hertz使用与源码分析｜拥抱开源
一.前言 Hertz[həːts] 是一个 Golang 微服务 HTTP 框架,在设计之初参考了其他开源框架 fasthttp.gin.echo 的优势, 并结合字节跳动内部的需求,使其具有高易用性 ...
- VS Code中Markdown常用插件
目录 目录 1.Markdown All in One 2.Markdown Preview Enhanced 3.markdownlint 1.Markdown All in One 自动生成目录 ...
- KingbaseES wal(xlog) 日志清理故障恢复案例
案例说明: 在通过sys_archivecleanup工具手工清理wal日志时,在control文件中查询的检查点对应的wal日志是"000000010000000000000008&quo ...