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 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...
随机推荐
- Vm无法连接到虚拟机，请确保您有权限运行该程序、访问该程序使用的所有目录以及访问所有临时文件目录，未能将管道连接到虚拟机：所有的管道范例都在使用中解决方法
可能是杀掉进程导致 解决办法: 1.首先杀掉所有VM打头的任务. 2.删掉所有lck文件 3.VM文件夹内有一串很长的数字命名的文件夹或文件,删掉 4.发现被VMware-vmx.exe占用 5.打开 ...
- python之实现文件的读写
很早之前做自动化测试,并没有将测试数据与数据库关联,而是直接通过json.ymal.excel等文件管理的.那么怎么用python读写文件呢? 在操作文件前,都需要打开文件,打开文件用内置函数open ...
- liunx系统安装Redis详细步骤
liunx系统安装Redis详细步骤 官网下载Redis安装包 使用工具将redis安装包拖入liunx系统 创建Redis存放目录 mkdir /usr/local/redis 解压到redis存放 ...
- JS控制台打印星星，总有你要的那一款~呐~给你小心心哦~~~❤
用JS语句,在控制台中打印星星,你要的是哪一款呢~来认领吧~ 1.左直角星星 效果: 代码: let readline=require("readline-sync"); cons ...
- 案例：用ajax 方法 解析xml
xml文件 <?xml version="1.0" encoding="utf-8"?> <studentlist> <stude ...
- three.js实现分模块添加梦幻bloom辉光光晕方案--详细注释版本~~方案三版本~~
先上图对比方案1-2-3不同点,本文是方案3 方案1(旋转场景情况下发光体不应该遮住另一个,但是遮住了) 方案2(层次正常,发光正常) 方案3(层次正常,发光正常,但是转动场景时候部分辉光会被遮挡,但 ...
- C#开发PACS医学影像三维重建(十四):基于能量模型算法将曲面牙床展开至二维平面
在医学影像领域中,将三维重建中的人体组织展开平铺至二维,用来研判病灶和制定治疗方案的重要手段之一, 它能够将立体曲面所包含的信息更为直观的展示到二维平面上,常用的情景包括: 牙床全景图.平铺血管.骨骼 ...
- Django3.X使用富文本编辑器kindereditor上传图片时一直转圈圈，如何解决
问题描述: 在写bbs项目的时候,老师用的是Django1.X结合富文本编辑器kindeditor,实现了图片上传,但是我在用Django3.X的时候,代码和老师一模一样,上传图片的时候一直转圈圈?? ...
- 《Terraform 101 从入门到实践》 第一章 Terraform初相识
<Terraform 101 从入门到实践>这本小册在南瓜慢说官方网站和GitHub两个地方同步更新,书中的示例代码也是放在GitHub上,方便大家参考查看. 初闻不知Terraform, ...
- Python内置对象(一)
Python内置对象(一) 分多次讲解 这部分相对比较简单,偶尔一些特殊的做法会强调下(前面加★) 总览 builtins = [_ for _ in dir(__builtins__) if not ...