前端资料汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
- 在组件中，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
效果：红框处就是动态绑定获取数据的展示
传递数组等复杂数据时，也可以使用v-bind来动态传值，如：
需要向子级传递hobbies数组，在vue实例对象（父）中创建数据hobbies：
new Vue({
el:“#vue-app-one”,
components:{
“msg”: msgComponent,
“titleComponent”:titleComponent
},
data:{
title:"my hobbies are ",
hobbies:[‘看剧’,‘看动漫’,‘吃好吃的’], //需要向子组件传递的数据
}
})
定义子组件：
var msgComponent = {
template:`
{{hobby}}
`,
props:[“hobby”],
data(){
return {
}
}
}
使用子组件：
这里是vue-app-one
效果：
跳回“一点想法”处
子向父：事件传值$emit
子组件不能通过prop向父组件传递数据，需要使用事件向父组件抛出一个值，告知父组件我需要实现一个功能，由父组件处理这个事件
例子：点击按钮，改变名称chinesename
（由于data变量名不支持chinese-name形式，花括号里不支持chineseName形式，所以这里我都用了小写，此处记录一下，日后学到了新知再来填坑）
先在父组件的data中定义chinesename的初始值：
new Vue({
el:“#vue-app-one”,
data:{
chinesename:“anzhi” // chinesename初始值
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
事件向父组件抛出一个值，告知父组件我需要实现一个功能，由父组件处理这个事件
例子：点击按钮，改变名称chinesename
（由于data变量名不支持chinese-name形式，花括号里不支持chineseName形式，所以这里我都用了小写，此处记录一下，日后学到了新知再来填坑）
先在父组件的data中定义chinesename的初始值：
new Vue({
el:“#vue-app-one”,
data:{
chinesename:“anzhi” // chinesename初始值
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-trfGcCZ6-1715394079949)]
扫一扫
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
