2020前端技术面试必备Vue:(一)基础快速学习篇
2020前端技术面试必备Vue:(一)基础快速学习篇
由于疫情的影响，相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员， 我们也面临着 '失业',你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ? 1.大部分的回复: 求职平台都是 ‘已回复’，然后没有下文，你遇到了吗? 2.各个公司对技术的要求增高 3.有人说开始搞副业 ....... 在我来看，这一年已经过去了四分之一，按往年最晚 2 月份 大家应该就开始工作了。现在已经三月中旬了，大概的话五月份就可以出去工作了，这段时间其实也挺宝贵的，有大量的自由时间，可以来提升技术，来迎接接下来的面试。
本章节，我将带领大家一起刷Vue 技术点，来应对接下来的面试，此次会陆续更新Vue全家桶：Vue VueX Vue-Router ；以及后面时间充足的话，来实现一个Vue项目。
Vue
样式绑定
class 使用
1.通过数组方式添加样式 通过数组方式添加样式 【‘样式名’】 --> 这里的样式名是提前在CSS中定义好的， 使用 :class绑定使用
<h1 :class="['size', 'color',boo?'big':'weight']">添加样式</h1>
2.通过添加对象的方式进行判断 {‘样式名’,布尔值变量}
<h1 :class="[ 'color',{'big':boo}]">添加样式</h1>
3.通过使用 计算属性来控制样式的显示
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
style 内联样式使用
CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
1.通过往style中传入对象改变样式 缺点不能传多个对象
<h3 :style="ss">测试</h3>
<script>
new Vue({
el: '#fade',
data:{
ss:{color:'red','font-size':"50px"},
}
})
</script>
- 通过往style中传入数组，在数组中可以放多个对象
<h3 :style="[yy , dd]">测试</h3>
<script>
new Vue({
el: '#fade',
data:{
dd:{"font-weight":900},
yy:{color:'blue','font-size':"30px"},
}
})
</script>
条件渲染
v-if 与 v-show
// 两个指令都可以做控制元素渲染。
//区别是：
1. v-if 是用来控制元素的创建和销毁
2. v-show 是用来控制元素的 display 变化
//选择使用：
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
列表渲染
v-for
v-for指令基于一个数组来渲染一个列表。 格式：1. 遍历数组 （ item，index） in items item 为每一项 ， index为索引，
- 遍历对象
(value, name, index) in object value 为值 name为key index 为索引 注意 1 根据JavaScript 机制 ， in 可以改为 of， 更接近于JavaScript
- 遍历项必须绑定key，来确定每个节点的身份
变异方法
//官方含义：会改变调用了这些方法的原始数组。
简单说：就是改变了原始数组，在原始数组上做一些操作，例如：增加，删除..
// 变异方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
非变异方法
//所谓非变异方法：不改变原始数组，生成新的数组
// 非变异方法包括：
filter()
concat()
slice()
....
注意
//vm 为Vue实例
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
//当你利用索引直接设置一个数组项时
vm.items[indexOfItem] = newValue ❌错误操作
//官方提供了两种解决办法
1. Vue.set
Vue.set(vm.items, indexOfItem, newValue)
2. Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
//当你修改数组的长度时
vm.items.length = newLength ❌错误操作
//官方提供了一种解决办法
1.vm.items.splice(newLength)
对象变更注意
有时可能遇到这种需求，在原有data对象属性中，想实现动态添加属性， 直接添加是，不是响应式的，官方提供了解决办法。
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
// 添加一个属性 可以使用
Vue.set(vm.userProfile, 'age', 27)
// 为已有对象赋值多个新属性，可以使用 Object.assign()
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
显示过滤 / 排序的结果
有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
<div>
<div id="main">
<template v-for='(item,index) in filters' :key=index>
<li>{{item}}</li>
</template>
</div>
</div>
<script>
var vm = new Vue({
el: '#main',
data: {
list:[1,2,3,4,5,6]
},
computed: {
filters: function(){
return this.list.filter(item =>
item%2 == 0
)
}
},
})
</script>
事件处理
事件修饰符
Vue.js 为
v-on提供了事件修饰符。对事件的一些操作限制， 修饰符是由点开头的指令后缀来表示的。
.stop.prevent.capture.self.once.passive.once
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
按键修饰符
由于Vue 废除了 keyCode 事件， 在开发中，想要获取用户输入的按键，可以自己通过全局
config.keyCodes对象自定义按键修饰符别名： 具体设置为 https://cn.vuejs.org/v2/api/#keyCodes
// 虽然Vue 废除了 keyCode事件，但是Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="自定义事件">
表单输入绑定
复选框checkbox
单个复选框 绑定到布尔值 多个复选框，绑定到同一个数组
单选按钮radio
直接绑定到data中自定义属性中
选择框 select
v-model 绑定到 select 元素上。 多选时：绑定到一个数组上
值绑定
对于单选按钮，复选框及选择框的选项，
v-model绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：把值绑定到 Vue 实例的一个动态属性上，这时可以用
v-bind实现，并且这个属性的值可以不是字符串。
复选框
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'
单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a
选择框选项
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
vm.selected.number // => 123
修饰符
- .lazy
- .number
- .trim
组件基础
父组件 向 子组件 传递值 通过在子组件 身上动态绑定传值
三部曲：“
1. 先引入 子组件
2. 注册 子组件
3. 使用子组件 传值
例如：
<template>
<div>
<h1>Father 组件</h1>
<hr>
// 这块动态传递了一个数组对象
<Son :list = list @receiveToParent="receiveToSon"></Son>
</div>
</template>
<script>
import Son from './Son'
export default {
name: 'Father',
components: {
Son
},
data () {
return {
list: [
{ title: '小张中彩票了', author: 'Mr.Liu' },
{ title: '房价跌倒谷底', author: 'Mr.Liu' },
{ title: '阿里云便宜了', author: 'Mr.Liu' }
]
}
},
methods: {
receiveToSon (e) {
console.log(e)
}
}
}
</script>
子组件向父亲传递值 $emit
1. 子组件 通过this.$emit('事件名称'，传递参数)
2. 在父子组件中 通过 在子组件身上 @事件名称 = 自定义的事件 来接收参数
<template>
<div>
<h1>Son 组件</h1>
<template>
<ul>
<li v-for="(item,index) of list" :key="index"> <h2>{{item.title}}</h2> <br><h3>{{item.author}}</h3></li>
</ul>
</template>
<Button @click="toParent">子向父 传递值</Button>
</div>
</template>
<script>
export default {
name: 'Son',
// 通过prop 来接收 父组件传递过来的数据
props: ['list'],
data () {
return {
name: '测试'
}
},
methods: {
toParent () {
// 子组件 通过 this.$emit(事件名，要传递的参数)
this.$emit('receiveToParent', this.name)
}
}
}
</script>