结尾
学习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、浏览器等等
由于文章篇幅有限,仅展示部分内容