局部组件
父向子传值/传引用:props
静态传值
动态传值:v-bind
子向父:事件传值$emit
使用脚手架创建项目并运用组件and传值
初识组件应用
======
实例化多个vue对象
用new创建多个vue对象并命名,可以通过变量相互访问
例子:对象2修改对象1的name变量
这里是:{{name}}
<button @click=“changeName”>change-one-name
// 第一个vue对象
var one = new Vue({
el:“#vue-app-one”,
data:{
“name”:“ccy1”
}
})
// 第二个vue对象
var two = new Vue({
el:“#vue-app-two”,
data:{
“name”:“ccy2”
},
methods:{
// 修改vue-app-one的name为’ccy333’
changeName:function(){
one.name = ‘ccy333’
}
}
})
效果:点击后修改”ccy1“为”ccy333“
全局组件
定义与使用
- 定义全局组件,需给组件一个名字,调用时,将组件名当作标签名使用;相当于自定义标签,该标签下可以包含很多子html标签;
- 这些子html标签定义在组件的template属性中,每次调用该组件,都渲染template里的标签
- template里必须只有一个根元素
- 在组件中,data是函数,将数据return回去
- 依然可以用this来调用data中定义的数据
例子:
定义组件:
① 定义一个组件,命名为my-component
② 其中包含数据:name和方法:changeName
③ 渲染出的html效果有一个p标签,包含一个按钮,点击按钮时,修改name
④ 命名规范:camelCase (驼峰命名法) 与kebab-case (短横线分隔命名)
- 当写成标签时,遇到有大写字母的命名,需要改成小写并用横杆链接前后两个部分,如定义组件时命名为myComponent,写成标签时应写成<my-component>;
- 组件定义时也可以用横杆法命名;
- 如果定义时用myComponent,标签用<my-component>是OK的,系统自动识别
// 自定义的全局组件my-component
// template中只有一个根元素p标签,里面包含一个button按钮
Vue.component(‘my-component’,{
template:`
我的名字是:{{name}}
<button @click=‘changeName()’>btn
`,data(){
return {
name:‘ccy’
}
},
methods:{
changeName:function(){
this.name = ‘安之’
}
}
})
// vue对象1
new Vue({
el:“#vue-app-one”,
})
// vue对象2
new Vue({
el:“#vue-app-two”,
})
使用组件:
① 在vue对象对应的根元素(el指定标签)下使用
② 由于定义的是全局组件,所以可以在任意的vue对象下使用
③ 组件可复用,在一个vue对象下可以使用多次,且组件间互相独立
效果:
data是一个函数
在vue对象中,data属性值是一个对象,比如这样的:
但是在全局组件中,同一份data可能被多个vue对象使用,每个对象不单独维护一份data时,如果某一个vue对象修改了data中的一个变量,其他vue对象获取data时就会被影响;
如果用上面的例子做案例,若组件中的data是对象(引用),其他地方均不改变,两个vue对象便共享同一个name变量;当我通过其中一个vue对象改变name数据时(即点击任一个btn按钮),另一个对象获得的name也发生了改变(其他按钮处的’ccy’也都被改成了’安之’)
因此,为保证数据的独立性,即每个实例可以维护一份被返回对象的独立的拷贝,data为每个实例都return一份新创建的数据,不同的vue对象获取的data均互不影响
在vscode中不允许组件中的data是对象,会报错:
[Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions.
局部组件
- 局部组件注册在某个vue对象中,
- 只有注册过该局部组件的vue对象才能使用这个局部组件
例子:
局部组件定义:
// template仅一个根元素:ul
var msgComponent = {
// 数据是自身提供的 (hobbies)
template:<ul><li v-for='hobby in hobbies' v-bind:key='hobby.id'>{{hobby}}</li></ul>
,
data(){
return {
hobbies:[‘看剧’,‘看动漫’,‘吃好吃的’]
}
}
}
注册局部组件:
// 仅由注册过该局部组件的vue对象才能使用,此处为div#vue-app-one
// 注意命名规范,components中对象的key将会被作为标签名,多个单词拼接的命名需使用横杆法
// 可以写成msg-component,此处直接简化了命名为msg,
new Vue({
el:“#vue-app-one”,
components:{
“msg”: msgComponent
}
})
html文件中使用<msg></msg>
:
这里是vue-app-one
我的爱好:
效果: 红框圈出的部分就是局部组件渲染出来的
父向子传值/传引用:prop
静态传值
创建子组件:
var titleComponent = {
props:[“title”],
template:<p>{{title}}</p>
// 所需要的数据title由父组件提供
}
在父组件的components属性中注册子组件:
new Vue({
el:“#vue-app-one”,
components:{
“msg”: msgComponent,
“titleComponent”:titleComponent
},
})
在父组件上使用子组件:
这里是vue-app-one
效果:红框标记处就是父向子传值并展示
动态传值:v-bind
定义子组件:
var titleComponent = {
props:[“title”],
template:<p>{{title}}</p>
}
在父组件的components属性中注册子组件:
new Vue({
el:“#vue-app-one”,
components:{
“msg”: msgComponent,
“titleComponent”:titleComponent
},
data(){
return {
title:"my hobbies are ",
}
}
})
使用子组件,通过绑定父组件data中的变量title来实现动态传值:
这里是vue-app-one
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。
片转存中…(img-mHStR8T0-1712047508058)]
[外链图片转存中…(img-o1LcQ4QH-1712047508058)]
[外链图片转存中…(img-gvZ8V4VH-1712047508059)]
[外链图片转存中…(img-1IMqjz65-1712047508059)]
[外链图片转存中…(img-vZq80pDa-1712047508059)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-ydx3XitK-1712047508059)]
最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。