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 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...
随机推荐
- ping localhost时出现::1的原因以及解决办法
ping localhost时出现: 在cmd中ping localhost解析出来的是ipv6的::1的原因是windows有个优先解析列表,当ipv6的优先级高于ipv4时,就会出现这种情况. 具 ...
- JavaScript：输入语法：prompt与confirm
prompt prompt有两个参数: 第一个参数会显示在弹窗的输入框的上方: 第二个参数是可选的,会显示在输入框内,是一个初始值: 我们在输入框内输入的任何内容,都会作为返回值,返回给变量resul ...
- S2-013 CVE-2013-1966
漏洞名称 S2-013 CVE-2013-1966 远程命令执行 利用条件 Struts 2.0.0 - Struts 2.3.14.1 漏洞原理 Struts2 标签中 <s:a> 和 ...
- 如何优雅地升级一个Creator 2.x 项目到 3.6.2 ？
最近,我将之前用 Cocos Creator 2.x 写的一个微信小游戏<球球要回家>移植到了 Cocos Creator 3.6.2 上. 编程语言也从 JavaScript 迁移到了 ...
- [剑指Offer]3.数组中重复的数字
题目 找出数组中重复的数字. 在一个长度为n的数组中的所有数字都在0~n-1的范围内.数组中某些数字是重复的,但是不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意一个重复的数组.例 ...
- [Codeforces Round #794 (Div. 2)] D. Linguistics
我是什么东西艹艹艹 <我离正解只差个sort> 首先,观察字符串,可以发现:若存在形似\(AA--BB\)或\(BB--AA\)等有两个相同的字符挨在一起的情况,则我们在它们中间放一块隔板 ...
- 视图，触发器，存储过程，流程控制等MySQL小知识点
视图,触发器,存储过程,流程控制等MySQL小知识点 一.SQL注入问题 登录: import pymysql conn = pymysql.connect( host='127.0.0.1', po ...
- 1.31 wlx 魔怔 9 解法交互题小结
参考题解地址 1. 从树上任意一个节点开始,跳到其随机一个后代,跳到叶子的期望次数为 \(H_{siz_u}=\ln(siz_u)\). 证明: 首先考虑一条链的情况.设在第 \(i\) 个点期望次数 ...
- Spring中常见的注解
1.组件注解 @Controller @Service @Repository @Component ---标注一个类为Spring容器的Bean @Configration ---声明当前类为配置类 ...
- FAQ Selenium中提示can not connect to the service chromedriver 的解决方法
can not connect to the service chromedriver问题的处理 背景 一个同学反馈运行如下代码 from selenium import webdriver ...