总结
-
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。
-
算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈...（最好多刷一刷，不然影响你的工资和成功率????）
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～
祝大家都有美好的未来，拿下满意的 offer。 开源分享：docs.qq.com/doc/DSmRnRG…
一、前言
完整内容请关注：
二、父组件给子组件传递数据
1.使用props属性，父组件向子组件传递数据
1.使用组件的props属性
const cpn = {
template: "#cpn",
props: {
cmessage: {
type: String,
default: 'zzzzz',
required: true //在使用组件必传值
}
}
}
2.向cmessage对象传值
<div id="app">
<cpn :cMessage="message"></cpn>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
movies: ["复仇者联盟", "钢铁侠", "星际穿越", "哪吒传奇"]
},
components: {
cpn
}
})
</script>
2. props属性使用
1.数组写法
props: ['cmovies', 'cmessage']
2.对象写法
props: {
cmessage: {
type: String,
default: 'zzzzz',
required: true //在使用组件必传值
}
}
3.props属性的类型限制
//1.类型限制(多个类使用数组)
cmovies:Array,//限制为数组类型
cmessage:String,//限制为Strin类型
cmessage:['String','Number']//限制为String或Number类型
4.props属性的默认值
// 2.提供一些默认值，以及必传值
cmessage: {
type: String,
default: 'zzzzz',//默认值
}
5.props属性的必传值
cmessage: {
type: String,
default: 'zzzzz',
required: true //在使用组件必传值
}
6.类型是Object/Array，默认值必须是一个函数
//类型是Object/Array，默认值必须是一个函数
cmovies: {
type: Array,
default () {
return [1, 2, 3, 4]
}
},
7.自定义验证函数
vaildator: function (value) {
//这个传递的值必须匹配下列字符串中的一个
return ['zzzzz', 'ttttt', 'yyy'].indexOf(value) !== -1
}
8.自定义类型
function Person(firstName,lastName) {
this.firstName = firstName
this.lastName = lastName
}
cmessage:Person//限定了cmeessage必须是Person类型
三、组件通信
1 父传子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- <cpn1 :msg="message"></cpn1> -->
<!-- <cpn1 :msg="message2"></cpn1> -->
<cpn1 :msgab="add"></cpn1>
<h2>{{count}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
/* message: ['蔡英文', '吴钊燮'] */
/* message2:{
name:'蔡英文',
age:56,
sex:'女'
} */
count:0
},
methods: {
add:function(){
return this.count++
}
},
computed: {
},
components: {
cpn1: {
/* template: `
<div>我是中国人{{msg.name}}{{msg.sex}}</div>
`, */
template: `
<div>
<div @click="sum">+</div>
</div>
`,
props: {
/* msg:{
type: Array
} */
/* msg:{
type: Object
} */
msgab:{
type:Function
},
},
methods:{
sum(){
this.msgab()
}
}
}
}
})
</script>
</body>
</html>
2.子传父
子组件向父组件传值，使用自定义事件$emit。
<!-- 父组件 -->
<div id="app">
<!-- 不写参数默认传递btnClick的item -->
<cpn @itemclick="cpnClcik"></cpn>
</div>
<!-- 子组件 -->
<template id="cpn">
<div>
<button v-for="(item, index) in categoties" :key="index" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template: "#cpn",
data() {
return {
categoties: [{
id: 'aaa',
name: '热门推荐'
},
{
id: 'bbb',
name: '手机数码'
},
{
id: 'ccc',
name: '家用家电'
},
{
id: 'ddd',
name: '电脑办公'
},
]
}
},
methods: {
btnClick(item) {
this.$emit('itemclick', item)
}
},
};
const app = new Vue({
el: "#app",
data() {
return {
}
},
methods: {
cpnClcik(item) {
console.log('cpnClick'+item.name);
}
},
components: {
cpn
},
})
</script>
1.在子组件中定义一个方法btnClick(item)，使用$emit，'itemclick'是事件名，item是传过去的值。
methods: {
btnClick(item) {
this.$emit('itemclick', item)
}
},
2.在子组件中监听点击事件并回调此方法
<div>
<button v-for="(item, index) in categoties" :key="index" @click="btnClick(item)">{{item.name}}</button>
</div>
3.在父组件中定义一个方法cpnClcik(item)
methods: {
cpnClcik(item) {
console.log('cpnClick'+item.name);
}
},
4.并在父组件（vue实例）中调用<cpn @itemclick="cpnClcik"></cpn>（不写参数默认传递btnClick的item ），父组件监听事件名为itemclick的子组件传过来的事件。
<cpn @itemclick="cpnClcik"></cpn>
四、父访问子（children、ref）
1.children、ref基本用法
父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到**$children和$ref。**
使用this.$children直接获取**当前实例的直接子组件，需要注意 $children 并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
<!-- 父组件 -->
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn ref="aaa"></cpn>
<button @click="btnClick" >按钮</button>
</div>
<!-- 子组件 -->
<template id="cpn">
<div>
我是子组件
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 父传子：props
const cpn = {
template: "#cpn",
data() {
return {
name:"我是子组件的name"
}
},
methods: {
showMessage(){
console.log("showMessage");
}
},
};
const app = new Vue({
el: "#app",
data() {
return {
message:"hello"
}
},
methods: {
btnClick(){
// 1.children
// console.log(this.$children[0].showMessage)
// for (let cpn of this.$children) {
// console.log(cpn.showMessage)
// }
// 2.$ref
console.log(this.$refs.aaa.name)
}
},
components: {
cpn
},
})
</script>
$children方式
// 1.children
console.log(this.$children[0].showMessage)
for (let cpn of this.$children) {
console.log(cpn.showMessage)
}
refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
2.ref的基本使用 用在元素上
ref的基本使用 用在元素上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p ref="p" @click="handelClick" id="ppp">hello</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
},
methods: {
handelClick(){
console.log(this.$refs.p);
const ppp = document.querySelector('#ppp')
console.log(ppp);
}
},
computed:{
}
})
</script>
</body>
</html>
3.ref在子组件上的使用
1. ref可以调用组件中的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<counter ref="one" @change="handelChange"></counter>
<counter ref="two" @change="handelChange"></counter>
<div>total:{{total}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
Vue.component('counter',{
template:'<div @click="handelclick">{{number}}</div>',
data(){
return {
number:0
}
},
methods:{
handelclick(){
this.number++;
this.$emit('change');
}
}
})
const app = new Vue({
el: "#app",
data: {
total:0
},
methods: {
handelChange(){
this.total = this.$refs.one.number + this.$refs.two.number
}
},
computed:{
}
})
</script>
</body>
</html>
2.ref可以调用组件中的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<helloworld ref="hello"></helloworld>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
Vue.component('helloworld',{
template:'<div></div>',
data(){
return {
number:0
}
},
methods:{
handelclick(){
console.log('被调用了');
}
}
})
const app = new Vue({
el: "#app",
data: {
},
methods: {
getHello(){
this.$refs.hello.handelclick();
console.log(this.$refs.hello.number);
console.log(this.$refs.hello.$el.innerHTML);
}
},
computed:{
}
})
</script>
</body>
</html>
HTTP
-
HTTP 报文结构是怎样的？
-
HTTP有哪些请求方法？
-
GET 和 POST 有什么区别？
-
如何理解 URI？
-
如何理解 HTTP 状态码？
-
简要概括一下 HTTP 的特点？HTTP 有哪些缺点？
-
对 Accept 系列字段了解多少？
-
对于定长和不定长的数据，HTTP 是怎么传输的？
-
HTTP 如何处理大文件的传输？
-
HTTP 中如何处理表单数据的提交？
-
HTTP1.1 如何解决 HTTP 的队头阻塞问题？
-
对 Cookie 了解多少？
-
如何理解 HTTP 代理？
-
如何理解 HTTP 缓存及缓存代理？
-
为什么产生代理缓存？
-
源服务器的缓存控制
-
客户端的缓存控制
-
什么是跨域？浏览器如何拦截响应？如何解决？
