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 '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规 ...
随机推荐
- java反射的初理解
反射 获取类的方法: Class<?> aClass1 = Class.forName("TestDemo.refection.User");//通过类路径获取 Cla ...
- 基于ABP的AppUser对象扩展
在ABP中AppUser表的数据字段是有限的,现在有个场景是和小程序对接,需要在AppUser表中添加一个OpenId字段.今天有个小伙伴在群中遇到的问题是基于ABP的AppUser对象扩展后,用 ...
- Radmin自动登录器 v3.0
Radmin自动登录器 v3.0 - By: ybmj@vip.163.com 20150615 用户手册 下载地址:https://download.csdn.net/download/shuren ...
- elasticsearch查询之keyword字段的查询相关度评分控制
一.数据情况 purchase记录每个用户的购买信息: PUT purchase { "mappings":{ "properties":{ "id& ...
- vue自定义switch开关，使用less支持换肤
实际项目用到了,记录一下,也方便以后使用,这样也可以避免为了使用一个switch,引入整个外部web框架: 也可以方便更好的理解是和使用less. 基础代码使用的是网上的,然后自己添加了less换肤, ...
- 贪吃蛇（C语言版）链表实现
贪吃蛇 gitee:贪吃蛇C语言版: Snake 蛇的结构 typedef struct Snake { int x; int y; struct Snake *next; }; 游戏开始欢迎界面 / ...
- 【Java】学习路径53-InetAdress获取服务器ip
InetAdress如何使用? import java.net.*; public class InetAdress { public static void main(String[] args) ...
- day01-GUI坦克大战01
JavaGUI-坦克大战 1.Java绘图坐标体系 坐标体系介绍:下图说明了一个Java坐标体系.坐标原点位于左上角,以像素为单位.在Java坐标体系中,第一个是x坐标,表示当前位置为水平方向,距离坐 ...
- IP地址最后一位斜杠是什么意思？比如192.168.1.10/27?还有IP地址和子网掩码相加得到的网络地址是什么意思
IP地址最后一位斜杠是什么意思?比如192.168.1.10/27?还有IP地址和子网掩码相加得到的网络地址是什么意思 IP地址最后一位斜杠是什么意思?比如192.168.1.10/27?还有IP地址 ...
- OpenCV读写视频操作
一.读取视频流 在使用OpenCV读取摄像头,或者处理一些磁盘中保存的视频文件时,通常使用VideoCapture进行读取. std::string video_path("/path/to ...