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 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...
随机推荐
- before-after-hook钩子函数
before-after-hook 最近看别人的代码,接触到一个插件,before-after-hook,百度搜一圈也没有看到什么地方有教程,看这个字面意思是一个hook,和axios里面的拦截器,v ...
- 实现 .Net 7 下的数据库定时检查
在软件开发过程中,有时候我们需要定时地检查数据库中的数据,并在发现新增数据时触发一个动作.为了实现这个需求,我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .Net 6 中新 ...
- Flutter异常监控 - 贰 | 框架Catcher原理分析
前言 在给 Flutter 应用做异常监控的时候,一开始我是拒绝滴,如果不考虑 Flutter Engine 和 native 侧的监控,用我另一篇文章中不得不知道的 Flutter 异常捕获知识点 ...
- 【好软推荐】Scoop - Windows快速软件安装指南
在平常生活中如果要安装像git.java.node这些环境的时都需要先去官网下载安装程序,点击安装,之后还需要配置,不仅过程麻烦,而且工具多了之后整理起来也相当不容易,配置也很杂,整个电脑就像被污染了 ...
- [机器学习] 特征选择笔记4-使用SelectFromModel特征选择
特征选择 代码下载 本文主要介绍sklearn中进行特征选择的方法. sklearn.feature_selection模块中的类可用于样本集的特征选择/降维,以提高估计量的准确性得分或提高其在超高维 ...
- 真正“搞”懂HTTP协议07之body的玩法（实践篇）
我真没想到这篇文章竟然写了将近一个月,一方面我在写这篇文章的时候阳了,所以将近有两周没干活,另外一方面,我发现在写基于Node的HTTP的demo的时候,我不会Node,所以我又要一边学学Node,一 ...
- youtube-dl下载太慢了，我选yt-dlp
前言 最近过年嘛,过年前照例来下载一些贺岁歌曲,现在国内没啥人做贺岁专辑,这方面还得看马来西亚华人,他们每年都有出专辑,质量很不错! 国内平台自然是没有(或者不全的),需要在YouTube下载~ 之前 ...
- Flutter新版本2.X系列--01创建项目
1.新建项目,打开Android studio,点击红圈部分 2.选择第一个 3.设置你的项目名称,flutter sdk位置,以及项目存储路径 4.设置包名,这个要唯一 5.好啦 ~ 作为一名前端开 ...
- 为什么 Go 不支持 []T 转换为 []interface
在 Go 中,如果 interface{} 作为函数参数的话,是可以传任意参数的,然后通过类型断言来转换. 举个例子: package main import "fmt" func ...
- Golang编译
SET CGO_ENABLED=0 SET GOOS=darwin SET GOARCH=amd64 go build main.go SET CGO_ENABLED=0 SET GOOS=linux ...