Vue 非单文件组件（不常用）3步骤（创建、注册、使用）和几个注意点、组件的本质（VueComponent）
Vue中使用组件的三大步骤：
1、定义组件（创建）
2、注册组件
3、使用组件（写组件标签）
一、如何定义一个组件？
使用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>
非单文件案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/vue.js"></script>
<title>非单文件组件</title>
</head>
<body>
<div id="root">
<h2 style="background-color: antiquewhite; ">{{msg}}非单文件组件</h2>
<hr>
<!--引入组件，编写组件标签-->
<xuexiao></xuexiao>
<hr>
<xuesheng></xuesheng>
<hr>
<xuesheng></xuesheng>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; //组件作用：复用编码，简化项目编码，提供运行效率 //(1.1)创建school组件
const school=Vue.extend({
// el:"#root",//定义组价时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
template:`
<div>
<h2>学校名:{{schoolName}}!</h2>
<h2>学校地址:{{address}}!</h2>
<button @click="showSchoolName">点我提示学校名</button>
</div>
`,
data(){//写成函数式
return{
schoolName:"尚硅谷",
address:"背景昌平",
}
},
methods:{
showSchoolName(){
alert(this.schoolName);
}
}
}) //(1.2)创建学生组件
const student = Vue.extend({
template:`
<div>
<h2>学生名：{{studentName}}</h2>
<h2>年龄：{{age}}</h2>
</div>
`,
data:function(){
return{
studentName:"张三",
age:18,
}
}
}) //(2.2)全局注册组件
Vue.component('xuexiao',school)
Vue.component('xuesheng',student) new Vue({
el:"#root",
data:{
msg:"你好啊！"
},
//(2.1)局部注册组件
components:{
// xuexiao:school,
// xuesheng:student
} }) </script>
</html>
结果图（注意：第2个学生组件修改年龄后，第1个学生组件的年龄不会跟着改变，因为data使用了函数式，是创建了一份数据给每个使用的组件）：
几个注意点：
1、关于组件名：
（1）一个单词组成：首字母大写（School）或首字母小写（school）
（2）多单词组成：kebab-case命名（my-school）或者CamelCase命名（MySchool，这种写法需要脚手架支持）
（3）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
（4）可以使用name配置项指定组件在开发者工具中呈现的名字。
2、关于组件标签：
（1）<school></school>
（2）<school/>
（3）不用脚手架时，<school/>会导致后续组件不能渲染
3、简写：
const school = Vue.extend(options) ==>const school = options
4、一般会定义一个“app”组件来管理多个子组件
关于组件 （VueComponent）:
1、school 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2、我们只需要写<school/>或<school><school>,Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
3、特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent
4、关于this指向
（1）组件配置中，data函数、methods中的函数、watch中的函数、computed中的函数 他们的this均是【VueComponent实例对象】
（2）.new Vue(options)配置中，data函数、methods中的函数、watch中的函数、computed中的函数 他们的this均是【Vue实例对象】。
Vue 非单文件组件（不常用）3步骤（创建、注册、使用）和几个注意点、组件的本质（VueComponent）的更多相关文章
- 前端学习笔记系列一：2 Vue的单文件组件
(1)非单文件vue组件和单文件vue组件的一般写法 一个完整的vue组件会包括三个部分:一是template模板部分,二是js程序逻辑部分,三是css样式部分.每个组件都有属于自己的模板,js和样式 ...
- vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)
第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...
- Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）
文章目录 1.为啥要使用组件 2.基本使用 3.代码实例 4.测试效果 5.注意点 1.为啥要使用组件 好用啊.像堆积木一样 2.基本使用 Vue中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- vue的单文件组件
五. 单文件组件 1. .vue文件 .vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html.css.js .vu ...
- vue+vux+es6+webpack移动端常用配置步骤
1.创建项目(vue项目的流程就不多讲了)2.cnpm install vux --save3.在build/webpack.base.conf.js配置:const vuxLoader = requ ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- Vuejs - 单文件组件
为什么需要单文件组件 在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非 ...
- Java 单文件、多文件上传 / 实现上传进度条
博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...
随机推荐
- centos7安装MySql8.0.29教程
个人名片: 对人间的热爱与歌颂,可抵岁月冗长 Github:念舒_C.ying CSDN主页️:念舒_C.ying 个人博客 :念舒_C.ying @ 目录 1 安装之前检测系统是否有自带的MySQ ...
- jquerylib表单
用jquerylib,实现表格添加内容和删除内容 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- C++进阶（哈希）
vector容器补充(下面会用到) 我们都知道vector容器不同于数组,能够进行动态扩容,其底层原理:所谓动态扩容,并不是在原空间之后接续新空间,因为无法保证原空间之后尚有可配置的空间.而是以原大小 ...
- Safari浏览器对SVG中的<foreignObject>标签支持不友好，渲染容易错位
在 svg 中需要写一个 markdown 编辑器,需要用到 <foreignObject> 绘制来html,编辑器选择了 simplemde.大致html部分结构如下,<markd ...
- [深度学习] tf.keras入门2-分类
目录 Fashion MNIST数据库 分类模型的建立 模型预测 总体代码 主要介绍基于tf.keras的Fashion MNIST数据库分类, 官方文档地址为:https://tensorflow. ...
- 焦距的物理尺度、像素尺度之间的转换关系以及35mm等效焦距
已知: 物理焦距:F=35.56,单位:mm 图片大小:width*height=6000*4000,单位:pixel CCD尺寸:ccdw*ccdh=23.5*15.6,单位:mm 求: 像素焦距: ...
- dotnet 代码优化 聊聊逻辑圈复杂度
本文属于 dotnet 代码优化系列博客.相信大家都对圈复杂度这个概念很是熟悉,本文来和大家聊聊逻辑的圈复杂度.代码优化里面,一个关注的重点在于代码的逻辑复杂度.一段代码的逻辑复杂度越高,那么维护起来 ...
- 用了这么久 IDEA，你竟然不知道 Live Templates ？
大家好,我是风筝,公众号「古时的风筝」,专注于 Java技术 及周边生态. 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. Live Templa ...
- CTF-MISC比赛技巧总结(一)
CTF-MISC比赛技巧总结之隐写术 一.第一阶段(观):1.flag藏在文本文件里面,直接ctrl+F就可以查找到:2.flag被字符隔开,在头或尾上,这个时候就只用消除间隔字符就可以了:3.fla ...
- margin-left:auto的妙用
问题描述 如上图所示,我们需要将上述三个标签右对齐,就像上图是要达到的效果,一般采用的方法是对每个标签设置margin-left这样就需要设置三个值. 当文字变长或者变成英文的时候又需要重新设置,否则 ...