【精讲】vue组件开发基础、多层嵌套（内含详细注释）、vuecomponent构造函数
目录
vue组件开发基础
多层嵌套（内含详细注释）
vuecomponent构造函数
第一部分：vue组件开发基础
<!--
vue中使用组件的三大步骤:
一 ,定义组件(创建组件)
二,注册组件
三,使用组件(写组件标签)
一,如何定义一个组件？
使用vue.extend(Option)创建,其中Option和new vue(Option)叫传入的那个options几乎一样
但也有点区别:区别如下:
1,el不要写,为什么？---最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器.
2,data必须写成函数,为什么？------避免组件被复用时,数据存在引用关系
备注:使用template可以配置组件解构
二,如何注册组件？
1,局部注册:靠new vue 的时候传入components选项,
2,全局注册:靠vue.component('组件名',组件)
三,编写组件标签:
<school></school>
-->
<div id="root">
<!-- 编写组件标签 -->
<xuexiao></xuexiao>
<hr>
<xuesheng></xuesheng>
</div>
<div id="root2">
<hello></hello>
</div>
<script type="text/javascript">
// 创建school组件
const school = Vue.extend({
// 模板解析
template: `
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
`,
// el:'#root',组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务与哪一项
data() {
return {
schoolName: '北京学院',
address: '北京'
}
}
})
// 创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
<button @click="dianji">点我点击提示</button>
</div>
`,
data() {
return {
studentName: '张三',
age: 18
}
},
methods:{
dianji(){
alert('点我提示信息')
}
}
})
// 创建vm
const vm = new Vue({
el: '#root',
// 组件门 注册组件(局部注册)
components: {
//这里存放的才是真正的组件名
xuexiao: school,
xuesheng: student
}
})
// 创建一个全局的组件
const hello = Vue.extend({
template: `
<div>
<h2>hello,Tom</h2>
</div>
`
})
new Vue({
el:'#root2',
})
// 使用全局变量
// 第一个参数是组件名 第二个参数是组件在哪里
// 这样所有的地方都可以使用
Vue.component('hello',hello)
</script>
第二部分：多层嵌套（内含详细注释）
<div id="root">
<!-- <school></school>
<hello></hello> -->
<!-- 因为APP领导了所有的组件，所以这就可以简写了，只写一个APP标签即可 -->
<!-- <app></app> -->
</div>
<script type="text/javascript">
// 下面是多层嵌套
// 定义一个msg的组件
const hello = Vue.extend({
template:
`
<div>
{{msg}}
</div>
`,
data(){
return{
msg:'欢迎学习vue'
}
}
})
//定义student组件
const student = Vue.extend({
// 第一块是和HTML部分模板字符串
name:'student',
template:`
<div>
<h1>学生姓名:{{names}}</h1>
<h2>学生年龄:{{age}}</h2>
</div>
`,
// 第二个是函数的封装内部的内容
data(){
return{
names:'张三',
age:18
}
}
})
//定义一个school组件
const school = Vue.extend({
template:`
<div>
<h1>学校名称:{{name}}</h1>
<h2>学校地址:{{address}}</h2>
<student></student>
</div>
`,
data(){
return{
name:'尚硅谷',
address:'北京'
}
},
// 组件的内嵌 嵌套之后在哪嵌套就放在哪里显示(所以就放在school的上面)
components:{
student
}
})
// 定义一个APP组件(领导其它的所有组件)
const app = Vue.extend({
// 这里不写任何东西,只领导hello及school数据
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
})
// 创建vm
new Vue({
//也可以不在页面中写标签 再vm中写
template:`
<app></app>
`,
el:'#root',
components:{
// 简写 school 原school:school
app
}
})
</script>
第三部分：vuecomponent构造函数
<!--
关于vuecomponent:
1,school组件本质是一个名为vuecomponent的构造函数，且不是程序员定义的，是vue.extend生成的.console.log('@',school)
2,我们只需要写<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实例对象】
5,vuecomponent的实例对象，以后简称VC(也可成之为:组件实例对象)
vue的实例对象，以后简称vm
-->
<div id="root">
<school></school>
</div>
<script type="text/javascript">
//定义school组件
// school的本质:是
const school = Vue.extend({
name:'school',
template:
`
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="btn">点我触发</button>
</div>
`,
data(){
return{
name:'北大学校',
address:'北京'
}
},
methods:{
btn(){
console.log('btn',this)
}
}
})
const hello = Vue.extend({
name:'hello',
template:`
<div>
<h1>{{msg}}</h1>
</div>
`,
data(){
return{
msg:'你好呀'
}
}
})
// 这里打印出来得结果是相同的,(注:只是形式上一样,但事实上并非一样,我们通过粗暴的方法来验证，
//那就是判断school是否等于hello若是等于则返回一个true，否则返回一个false)
// 所以 3,特别注意:每次调用vue.extend-,返回的都是一个全新的vuecomponent!!!
console.log('@',school===hello);
console.log('#',hello);
const vm = new Vue({
el:'#root',
components:{
school
}
})
</script>
疑点解惑结果：
【精讲】vue组件开发基础、多层嵌套（内含详细注释）、vuecomponent构造函数相关推荐
- 视频教程-2020最新微信小程序基础+实战精讲视频-微信开发
2020最新微信小程序基础+实战精讲视频 负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure ...
- 3个概念，入门 Vue 组件开发
"组件"是 Vue 中比较基础的概念,但我发现,许多同学对 Vue 组件的概念和由来并不是清楚.因此,我希望通过这个专题,带大家换个角度来分析,最终让大家更清楚组件开发. 首先,我 ...
- 【干货分享】自己总结录制的web前端精讲视频，零基础入门学习资料，开发工具
"大清亡于闭关锁国,学习技术需要交流和资料" 为了让大家在自己的前端生涯中少走一些弯路,我亲自做了这么一门课:用我自己一路从码农到创业者的亲身经历,带大家感受前端程序员的职业发展规 ...
- c# 无法加载oraops.dll_Robotstudio软件二次开发：基于C#语言的Smart组件开发基础
Robotstudio软件除了支持Add-Ins插件的二次开发以外,还支持Smart组件的二次开发.开发语言同样是基于.NET框架的C#语言或VB语言.Smart组件是Robotstudio软件中实现 ...
- 提升效率的Vue组件开发和实战技巧
大家好我是若川. 现在的大前端时代,是一个动荡纷争的时代,江湖中已经分成了很多门派,主要以Vue,React还有Angular为首,形成前端框架三足鼎立的局势.Vue在前端框架中的地位就像曾经的 jQ ...
- c#获取autocad安装位置_Robotstudio软件二次开发：基于C#语言的Smart组件开发基础
Robotstudio软件除了支持Add-Ins插件的二次开发以外,还支持Smart组件的二次开发. 开发语言同样是基于 .NET框架的C#语言或VB语言. Smart组件是Robotstudio软件 ...
- react复习总结（1）--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
- Vue 组件开发 - 数据输入框组件
目录 设计通用组件的一般思路 组件效果 1. HTML结构 2. index.js 3. input-number.js 3.1 input-number.js代码注解 设计通用组件的一般思路 明确需 ...
- vue 组件开发 ---- rui-vue-poster 海报制作
绘制海报 预览效果[最好在移动设备预览] 体验二维码 介绍 海报插件,用于分享和保存海报,便于快捷开发! 引入 下载插件包 海报插件 引入 <script src="./js/rui- ...
最新文章
- CSS：布局的三个关键属性：float、position、display
- Nature：首个完全复现人眼的仿生眼问世，港科大造出半球形人工视网膜，感光性能超过人眼460倍...
- java 18 -4 LinkedHashMap集合
- 关于 SAP UI5 对服务器端渲染 Server Sider Render 的支持问题
- 用户体验岗如何说服其他部门_为什么我们应该说服用户更新他们的浏览器-这是双赢的。...
- 洛谷——P2068 统计和
- Mac上最佳的SVN管理工具：Cornerstone
- [哀悼]5.12地震后把网站改成灰色的方法
- HTML中td元素的nowrap属性
- 常用的JDBC的驱动
- 利用Matlab绘制图像中的某一行或者某一列的灰度曲线
- OpenCart支付宝付款接口（直接到账、担保交易、双接口）
- 计算机四级要学多长时间,过计算机四级要多长时间哦？
- h2ouve下载 insyde_一种基于InsydeBIOS的BIOS更改方法及系统与流程
- 新入职软件安装-win10
- 提高共射放大电路增益不改变直流偏置的手段
- html 多余的字省略号,html中把多余文字转化为省略号
- IPv6技术精要--第12-13章 ICMPv6和邻居发现协议（ND协议）
- PyQt之QSS美化
- 三张图读懂机器学习：基本概念、五大流派与九种常见算法
热门文章
- tar指令打包文件不包含路径
- amd 服务器 虚拟化技术,关于“虚拟化”（Intel VT和AMD SVM）的一些认识
- 如何修复模糊的照片?简单的处理方法
- 解决java.io.IOException: Cannot run program “javac“问题，并设置jdk版本
- requests 超时设置
- 【ROS-cartographer学习小记-01】使用自己的激光雷达思岚A1运行cartographer，附代码以及bag包-直接运行即可看到结果
- 一人之下鸿蒙炁灵搭配,一人之下手游炁灵怎么搭配
- 手把手教你怎么撩妹，五分钟读懂！提取于《谈话的力量》
- DSSM原理解读与工程实践
- 分享6款越用越好用的微信小程序