2021前端技术面试必备Vue:(一)基础快速学习篇

海军 等级 385 0 0

2021前端技术面试必备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>

  1. 通过往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为索引,

  1. 遍历对象

​ (value, name, index) in object

​ value 为值 name为key index 为索引

注意

1 根据JavaScript 机制 , in 可以改为 of, 更接近于JavaScript

  1. 遍历项必须绑定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


Vue 已经基础已经过完了,看完文章可以跟着多敲一些demo,来熟练Vue的基本使用。下一章将更新Vue 组件的使用,组件在Vue中是很重要的一部分,其中组件的通信尤其重要,理解了如何使用组件,那么可以构建一个数据通信的Web Components。

觉得不错的点赞,帮忙转发分享以下,原创不易!


关注微信公众号'前端自学社区' 获取更多资料

2021前端技术面试必备Vue:(一)基础快速学习篇

回复加群 可以加入 自学前端群

收藏
评论区

相关推荐

[占山为王]我是如何四步将一个微信小程序请求库改成Taro的
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
JavaScript设计模式之单例模式
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; word
[前端必知 ]HTTP or TCP/IP 基础
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; padding: 0 10px; wordspacing: 0px; wordbreak: breakword; wordwrap: break
多人协作必备技能Git
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
全栈进阶:Nginx基本功能及其原理
<div class"output_wrapper" id"output_wrapper_id" style"fontsize: 16px; color: rgb(62, 62, 62); lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; fontfamily: 'Helvetica
2021前端技术面试必备Vue:(一)基础快速学习篇
由于疫情的影响,相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员, 我们也面临着 '失业',你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ?<br/1.大部分的回复: 求职平台都是 ‘已回复’,然后没有下文,你遇到了吗?<br/2.各个公司对技术的要求增高<br/3.有人说开始搞副业<br/ 在我来看,这一年已经过去了四分
2021前端技术面试必备Vue:(二)组件篇
上一章已经更新了Vue基础,那么本章将更新Vue中最重要的概念组件,会介绍到组件的使用,组件传值,插槽的使用,插槽的分类。 当第一章基础掌握差不多了,然后再学习了组件的开发,那么你就可以开发简单的Vue项目,路由文章还没有更新,学习完Router后,就可以开发实战项目了。<section id"nice" datatool"mdnice编
2021前端技术面试必备Vue:(三)Router篇
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"padding: 0 10px; wordspacing: 0px; wordwrap: breakword; textalign: left; fontfamily: Opti
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
Webpack 打包资源篇
<section datatools"新媒体排版" dataid"13439" datastyletype"9" style"visibility: visible;"<p style"maxwidth: 100%; visibility: visible;"<br mpafromtpl"t" style"visibility
目前最全的第三方平台 授权(OAuth2.0)登录接入指南
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)_IT全栈 华强工作室
面试必备:2021 Vue经典面试题总结(含答案)一、什么是MVVM?
什么是索引?Mysql目前主要的几种索引类型
一、索引MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度。打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是一个人力三轮车。索引分单列索引和组合索引。单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引。组合索引,即一个索引包含多个列。创