最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等
前端视频资料:
开源分享:docs.qq.com/doc/DSmRnRG…
]
}
})
组件的监听子组件事件
主要通过子组件的 $emit 方法并传入事件名触发事件
emit可以使用第二个参数向上抛值,监听的父组件通过event获取
<my-p v-for="item in list"
:title="item.title"
@addsize="size += event获取子组件通过$emit抛的值 -->
Vue.component('my-p',{
props:['title'], //props向子组件传递数据
template:`
{{title}}
<button @click="$emit('addsize',10)">点击放大
//子组件通过 $emit 方法并传入事件名触发事件
//event获取
})
new Vue({
el:"#app",
data:{
list:[
{ id: 1, title: '这是第一个' },
{ id: 2, title: '这是第二个' },
{ id: 3, title: '这是第三个' }
],
size:14
}
})
组件中v-model的实现
当input事件触发时,通过$emit对数据进行抛出
{{myText}}
Vue.component('my-input', {
props: ['value'],//通过props动态数据传递
template: `
<input
:value="value"
@input="event.target.value)"
`
// input事件触发时,通过$emit对数据进行抛出
})
new Vue({
el:"#app",
data:{
myText:''
}
})
动态组件
通过:is实现tab切换效果
<button
v-for="item in list"
@click="currList = item">{{item}}
Vue.component("my-div", {
template: "
});
Vue.component("my-div2", {
template: "
});
new Vue({
el:"#app",
data:{
list:['div','div2'],
currList:'div'
},
computed:{
curr: function() {
return "my-" + this.currList;
//修改组件的curr值改变组件的显示
最后
基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack、git、node学习的再好也无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多,并不是理解就ok了,有些是真的要去记。当然了我们是牛x的前端工程师,每天像背英语单词一样去背知识点就没必要了,只要平时工作中多注意总结,面试前端刷下题目就可以了。