结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
示例：①
// 模板代码:
//不需要指定type属性
使用Vue组件！
// JavaScript代码:
var vm=new Vue({
el: ‘#app’,
components:{
‘my-comp’:{
template: ‘#myComp’ //根据id查找对应的元素
}
}
});
- 最好使用< script>或< template>标签来定义组件的HTML模板
- 在Vue.js中，可创建.vue后缀的文件，在.vue文件中定义组件。
-
一般实例化Vue的多数选项也可以用在
Vue.extend()或Vue.component()中的，不过有两个特殊选项参数除外即data和el。Vue.js规定：在定义组件的选项时，data和el选项必须使用函数。 -
如果data选项指向
某个对象，这意味着所有的组件实例共用一个data。使用一个函数作为data选项，让这个函数返回一个新对象，语法如下所示：
语法：
// 全局注册组件
Vue.component(“组件名称”, {
el:function(){ … },
data: function(){
return {
属性 : 值
}
},
template:“组件模板”
})
// 局部注册组件
var vm1 = new Vue({
el: “#app”,
components:{
“组件名称”:{
el:function(){ … },
data: function(){
return {
属性 : 值
}
},
template:“组件模板”
}
}
});
示例：
新奇水果
// 模板代码:
- {{ fruit }}
// JavaScript代码:
var vm1 = new Vue({
el: “#app”,
components: {
“fruit-list-comp”: {
data: function () {
return {
fruitList: [“龙珠果”, “刺角瓜”, “莲雾”, “佛手柑”, “费约果”]
}
},
template:“#fruitTemplate”
}
}
});
============================================================================
示例：可以在组件中定义并使用其他组件，这就构成了父子组件的关系// HTML代码:
// JavaScript代码:
// 创建子组件
var child= Vue.extend({
template:“
This is a child component!
”});
// JavaScript代码:
// 创建父组件
var parent= Vue.extend({
// 在父组件内使用标签
template:“
This is a parent component!
”,components:{
“child-component”:child // 注册子组件
}
});
// JavaScript代码:
// 注册父组件
Vue.component( “parent-component”,parent )
var vm = new Vue({
el: “#app”
});
下面分
6个步骤来理解代码：-
var child = Vue.extend(…)定义一个子组件。
-
var parent = Vue.extend(…)定义一个父组件。
-
components: { ‘child-component’: child }，将子组件注册到父组件，并将子组件的标签设置为child-component。
-
template :’< p>This is a parent component < child-component>< /child-component>< /p>’，在父组件内以标签的形式使用子组件。
-
Vue.component(‘parent-component’, parent)全局注册父组件。
-
在页面中使用< parent-component>标签渲染父组件的内容，同时子组件的内容也被渲染出来。
子组件是在父组件中注册的，它只能在父组件中使用，确切地说：
子组件只能在父组件的template中使用。请注意下面两种子组件的使用方式是
错误的：-
以子标签的形式在父组件中使用
-
在父组件标签外使用子组件
-
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。
-
可以使用props把数据传给子组件。
-
一个组件默认可以拥有任意数量的prop（属性），任何值都可以传递给任何prop。
-
在组件中，使用选项props来声明需要从父组件接收的数据，props的值可以是两种，一种是字符串数组，一种对象。
语法：props的值是字符串数组var component=Vue.extend({
props: [“属性名”,… “属性名”],
template: “模板”
});
HTML中的属性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。在
DOM或模板中使用属性名时，camelCase（驼峰命名法）的属性名需要使用其等价的kebab-case（短横线分隔命名）命名，如下面代码所示：Vue.component(“blog-post”, {
// 在JavaScript中是camelCase命名
props: [“postTitle”],
template: ‘
{{ postTitle }}
’})
语法：props的值是对象var component=Vue.extend({
props: {
属性名: String,
属性名: Number,
属性名: Boolean,
…
},
template: “模板”
});
属性类型包含
String（字符串）、Number（数字）、Boolean（布尔）、Array（数组）、Object（对象）、Date（日期）、Function（函数）和Symbol（符号）。对组件属性传值是单向的，并且可以静态和动态绑定属性。
示例：可以在组件中定义并使用其他组件，这就构成了父子组件的关系HTML代码:
v-bind:is-style="isShowStyle"动态绑定属性，message="消暑玩一夏！"静态绑定属性{{ subMessage }}
{{ message }}
// JavaScript代码:
var vm = new Vue({
el: “#app”,
data : {
isShowStyle:true
},
components: {
“banner-component”: {
props: [“message”, “isStyle”],
template: “#parentComp”, // 注册父组件
components:{
“child-component”:{
props:{
subMessage:String
},
template:“#childComp” // 注册子组件
}
}
}
}
});
===========================================================================
插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于将所携带的内容插入到指定的某个位置，从而使
模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。插槽一般在Vue的父子组件中使用，在子组件使用
< slot>标签将不同的DOM树组合在一起。< slot>标签是组件内部的占位符，用户可以使用自己的标记来填充。通过定义一个或多个< slot>标签，可将外部标记引入到组件的虚拟DOM中进行渲染，相当于“在此处渲染用户的标记”。插槽有两种使用方式：
默认插槽和具名插槽。插槽（Slot）是为网络组件创建“声明性API”的一种方法。它们混入到用户的DOM中，帮助对整个组件进行渲染，从而将不同的DOM树组合在一起。
示例：默认插槽HTML代码:
需要分发的内容
// 模板代码:
使用默认插槽
// JavaScript代码:
var vm = new Vue({
el: “#app”,
components: {
“p-comp”: {
template: “#pComp”
}
}
});
示例：具名插槽默认插槽只能有一个，当需要使用多个插槽时，要使用具名的插槽，即对插槽命名。
HTML代码:
商品管理系统
商品管理内容
版权声明
// 模板代码:
//具名插槽
//默认插槽
//具名插槽
// JavaScript代码:
var vm = new Vue({
el: “#app”,
components: {
“p-comp”: {
template: “#pComp”
}
}
});
插槽可以控制html模板的显示与不显示。
作用域插槽（slot-scope）其实就是带数据的插槽。原来父组件可以通过绑定数据传递给子组件。而作用域插槽可以通过子组件绑定数据传递给父组件。作用域插槽的使用场景：既可以复用子组件的slot，又可以使slot内容不一致。示例：-
- {{ props.bookname }}
// 模板代码:
// JavaScript代码:
var vm = new Vue({
el: “#app”,
data:{
bookList:[
{ name:“《Vue.js实战》” },
{ name:“《ASP.NET实战》” },
{ name:“《深入浅出Webpack》” }
]
},
components: {
“book-list”: {
rops:[“books”],
emplate: “#bookComp”
}
}
});
专业技能
一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限，仅展示部分内容
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
