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

由于疫情的影响，相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员， 我们也面临着 ‘失业’,你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ?

1.大部分的回复: 求职平台都是 ‘已回复’，然后没有下文，你遇到了吗?

2.各个公司对技术的要求增高

3.有人说开始搞副业

在我来看，这一年已经过去了四分之一，按往年最晚 2 月份 大家应该就开始工作了。现在已经三月中旬了，大概的话五月份就可以出去工作了，这段时间其实也挺宝贵的，有大量的自由时间，可以来提升技术，来迎接接下来的面试。

本章节，我将带领大家一起刷Vue 技术点，来应对接下来的面试，此次会陆续更新Vue全家桶：Vue VueX Vue-Router ；以及后面时间充足的话，来实现一个Vue项目。

Vue

样式绑定

class 使用

1.通过数组方式添加样式

通过数组方式添加样式 【‘样式名’】 --> 这里的样式名是提前在CSS中定义好的， 使用 :class绑定使用

 
添加样式

2.通过添加对象的方式进行判断 {‘样式名’,布尔值变量}

添加样式

3.通过使用 计算属性来控制样式的显示

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中传入对象改变样式

缺点不能传多个对象

测试

2. 通过往style中传入数组，在数组中可以放多个对象

 
测试

条件渲染

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为索引，

2. 遍历对象

​ (value, name, index) in object

​ value 为值 name为key index 为索引

注意

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

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



<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 元素上。

请选择 A B C

多选时： 绑定到一个数组上

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

ABC

把值绑定到 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 }">123option>
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>

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

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

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