[JavaScript知识库]VUE自我知识点检测

1.?什么是vue

Vue.js是一套构建用户界面的渐进式框架。其核心理念是，组件化开发，数据驱动视图。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2.什么是mvc和mvvm

（1）MVC 是后端的分层开发概念;

????????其中M是model层：负责操纵数据库 。V是view层：视图层，发送请求，接收响应。C是controller，是业务逻辑处理层，接收请求和返回响应。
（2）MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;

? ? ? ??其中中M为model层：数据层保存数据，V是view层是页面的HTML结构。VM是一个调度者，链接M与V

3.框架和库的区别

（1）框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
（2）库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

4.插值表达式

{{msg}}

5.vue指令界面防止闪烁

v-cloak

6.vue指令v-html和v-text的区别

????????1.v-html：可以解析富文本，可以渲染html界面
????????2.v-text：会替换掉元素里的内容

7.vue指令-属性绑定及简写

?v-bind? 简写：

8.vue指令-事件绑定及简写

v-on? ?简写@

9.vue事件修饰符

????????1.阻止冒泡
@事件类型.stop=“方法”?
????????2.阻止默认事件
@事件类型.prevent=“方法”
????????3.添加事件侦听器时使用事件捕获模式
@事件类型.capture=“方法”
????????4.事件只触发一次
@事件类型.once=“方法”
????????5.只当事件在该元素本身触发时触发回调
@事件类型.self=“方法”

10.vue指令-双向数据绑定

v-model

原理：采用数据劫持结合‘发布者——订阅者’模式，通过Object.defineProperty()对每个属性的get和set进行拦截。在数据发生变化的时候发布消息给订阅者，触发相应的监听回调

11.vue指令-循环渲染

v-for

12.vue指令-显示隐藏

v-show

13.vue指令-v-for如何遍历对象、数组、数字

????????1.遍历数组，参数(item,index) in list
<div v-for=‘(item,index) in list’ :key='index'></div>
list是在data中定义的数组，循环的次数为数组中元素的个数

????????2.遍历对象，参数(value,key,index) in obj
<div v-for=‘(value,key,index) in obj’ :key='index'></div>
obj是在data中定义的对象，循环的次数为对象中属性的个数

????????3.遍历数字，num in 10
<div v-for=‘num in 10’ :key='num'></div>

14.vue指令-v-for为什么设置key

让界面元素和数组里的每个记录进行绑定，主要是为了高效的更新虚拟DOM，提高重排效率

key——只能是唯一的字符串或数字

15.vue指令-v-if和v-show的区别

????????1.区别：
（1）v-if删除dom元素（true为显示/false为删除）
（2）v-show设置display:none（true为显示/false为隐藏）
????????2.应用场景：
（1）v-if只修改一次或者切换次数较少的时候可以使用v-if
（2）v-show频繁切换的时候可以使用v-show

16.vue绑定class方式

（1）数组
：class=“变量”
在data中加入后面的变量，赋值一个类名的数组

（2）三木表达式
：class =“flag? '类名1' :'类名2' ”
在data中给flag赋值true或者false

（3）数组内置对象（对象的键是样式的名字，值是Boolean类型）
：class=“变量”
在data中加入后面的变量，赋值一个类名的数组，数组中包含对象
例如——
数组变量= [{‘类名1’：true/false}，{‘类名2’：true/false}]

（4）直接通过对象
：class=“{‘类名a’：true/false，‘类名b’：true/false}”

17.vue绑定style方式

（1）直接在元素上通过style 的形式，书写样式对象

? <div style="color：red；"></div>
（2）将样式对象，定义到 data 中，并直接引用到 :style 中
a)先在data上定义样式

data {
? ? ? style1：{color：'red'}
}
b)再在元素中，通过属性绑定的形式，将样式对象应用到元素中
? <div :style="style1"></div>

18.vue过滤器全局和局部声明方式及使用

（1）全局定义：
????????????????通过Vue提供的filter方法定义：Vue.filter()
????????????????参数：过滤器的名字和过滤器执行函数

（2）私有定义

????????????????filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

19.vue键盘修饰符使用

????1.监听所有按键：v-on:keyup

? ? 2.监听指定按键：v-on:keyup.按键

? ? 3.使用按键别名：v-on:keyup.按键别名

20.vue键盘修饰符设置别名

Vue.config.keyCodes.f1 = 112

21.vue自定义指令全局和局部声明方式及使用

（一）全局定义
? ? ?使用这个方法进行全局定义：Vue.directive(指令名字，{对象})

? ? ?参数：
1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
2. 对象，里面包含三个钩子方法
（1）bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
（2）inserted 这个元素已经渲染到界面上之后执行
（3）update 当元素有更新的时候执行
3. 这三个方法的参数有哪些
（1）el：指令所绑定的元素，可以用来直接操作 DOM 。
（2）binding：一个对象，包含以下属性：
? ? ? ? ? ? ?①name：指令名，不包括 v- 前缀。
? ? ? ? ? ? ?②value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
? ? ? ? ? ? ?③oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。

?（二）私有定义

1.实例里有个directives属性，这个属性是个对象
2.里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
3.简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

22.vue生命周期钩子函数有哪些？

23.vue生命周期钩子函数各阶段特点，什么作用？

（1）创建前：beforeCreate（）{}
? ? ? ? 初始化尚未完成，data数据、methods方法都未挂载在vue实例上（一般用于页面重定向）
（2）创建后：created（）{}
? ? ? ? 第一个能够操作data数据的生命周期（一般用于接口请求+数据初始化）
（3）挂载前：beforeMount（）{}
? ? ? ? 虚拟DOM挂载前，此时页面元素尚未更新
（4）挂载后：mounted（）{}

? ? ? ? 虚拟dom元素挂载后，如果需要操作dom，可以在此生命周期执行

（5）更新前：beforeUpdate（）{}

（6）更新后：updated（）{}
? ? ? ? beforeUpdate和updated在页面初次渲染时并不执行，在更新时执行，故可执行0次或多次
（7）销毁前：beforeDestroy（）{}
? ? ? ? 一般用于清除计时器

（8）销毁后：destroyed（）{}
? ? ? ? 附：debugger 加入断点

24.vue-resource如何发送get，post请求

1.get请求
this.$http.get('http://yapi.shangyuninfo.com/mock/36/web02/category').then(res => {
??console.log(res.body);
})

2.post请求
this.$http.post(url, {categoryId: 'zs' }, { emulateJSON: true }).then(res => {
??console.log(res.body);
});

25.vue-resource发送post请求第三个参数写什么

{ emulateJSON: true }

26.axios发送get，post请求

（1）axios.get（地址参数）.then（res=>{

}）

（2）post请求

（1）如果数据是form-url类型
let formurl = new URLSearchParams()
formurl .append('key','value')
formurl .append('key','value')...

axios.post（‘url地址参数’，formurl ）

（2）如果数据是form-data类型
let formdata = new FromData()
formdata .append('key','value')
formdata .append('key','value')...

axios.post（‘url地址参数’，formdata）

（3）参数类型为JSON类型

? ? ? axios.post(this.baseurl+"/weChat/applet/subject/list",{enable:1}).then(res=>{

? ? ? ? ? console.log(res);

? ? ? })

27.axios发送post请求使用内置参数对象是什么

let formurl = new URLSearchParams()

let formdata = new FromData()

28.vue中过渡动画类名有哪些

（1）入场
v-enter
v-enter-to
v-enter-active

（2）退场
v-leave
v-leave-to
v-leave-active

29.vue中过渡动画结合第三方插件使用

1.导入动画类库：

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

2.定义 transition 及属性：

<transition

enter-active-class="fadeInRight"
? leave-active-class="fadeOutRight"
? :duration="{ enter: 500, leave: 800 }">
<div class="animated" v-show="isshow">动画哦</div>
</transition>

30.vue中过渡动画中钩子函数的使用

（1）绑定事件

<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">

? ? ? ? <div v-if="isshow" class="show">OK</div>

? ? </transition>

（2）书写事件的处理程序

 methods: {
      beforeEnter(el) {
        el.style.color = 'red'
        el.style.transform = 'translateX(500px)';
      },
      enter(el, done) { // 动画进入完成时候的回调
        // 这个需要加
        el.offsetWidth;
        el.style.transform = 'translateX(0px)';
        // 这个方法表示完成
        done();
      },
      afterEnter(el) { // 动画进入完成之后的回调
      }
    },

（3）css中书写.show{? ?}

.show{

? ? ? transition: all 0.4s ease;

? ? }

31.vue中如何设置v-for列表动画

列表使用<transition-group>标签

tag属性?规定transition标签内渲染后默认添加的列表外围的标签

（1）?定义过渡样式

32.vue中如何声明组件

// 注意:不能使用内置或保留的HTML元素作为组件id名称

? ? //全局定义组件，在所有的vue实例对应的控制区域都可以使用

? ? Vue.component('kaikai',{

? ? ? template:'#kai'

? ? })

//私有定义只有在对应的vue实例的控制区域中才能拿到

? ? components:{

? ? ? xuan:{

? ? ? ? template:'#xuan'

? ? ? }

? ? },

33.vue中如何父组件给子组件传值

父组件中? ?

<子组件标签? ? ?传递的值=‘值’>

子组件中

与data同级的位置

props:{

? ? ? ? 传递的值名：{

? ? ? ? ? ? ? ? type：[Number,String]

????????????????default:10

????????}

}

34.vue中如何子组件给父组件传值

父组件中：<sonComponentName ?@fromSonEventType="fatherComponentFunctionName()" ?/>

父组件中：methods:{
fatherComponentFunctionName(valueFromSon){
console.log(valueFromSon)

????????}

}

子组件中：<button @click="sendValueFunctonName()">发送数据</button>

子组件中：methods:{
sendValueFunctonName(){
this.$emit("fromSonEventType",valueFromSon)

????????}

}

35.vue中如何使用插槽，两种插槽的区别

普通插槽为<slot></slot>

此位置会被目标标签内的文本填充

具名插槽<slot name=‘header’></slot>

将内容插入到指定的插槽位置

<template v-slot:header>插槽内要加入的内容</template>

36.前端路由和后端路由的区别

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由

37.vue中如何使用路由

38.路由跳转两种方式，声明式，函数式

声明式

<router-link to="{path:'/son1' ,query:{ id:'10' }}" >跳转</router-link>

函数式

this.$router.push(路径及参数)

39.路由传参两种方式，声明式，函数式

40.路由嵌套

41.路由高亮

被匹配到的路由的router-link上会有个router-link-active的样式，我们通过设置这个样式设置激活标签的样式

在实例化路由的时候配置 linkActiveClass: "myactive"

42.路由重定向?redirect

routes: [

? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ?path: '/',

? ? ? ? ? ? ? ? ? ?// 把当前地址，重定向指定地址

? ? ? ? ? ? ? ? ? ?redirect: "/login"

? ? ? ? ? ? ? ?},
????????]

43.ref的使用

给指定标签添加ref属性

在生命周期中通过this.$refs.ref属性值获取对应的dom元素

44.属性计算，属性监听

? // 属性计算

? ? ? ? computed: {

? ? ? ? ? ? ? // 属性不能和data中重复

? ? ? ? ? ? ? name: {

? ? ? ? ? ? ? ? ? get:function(){

? ? ? ? ? ? ? ? ? ? ? return this.firstName + '-' +this.lastName;

? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? // 只有当自身发生改变的时候才触发

? ? ? ? ? ? ? ? ? set(value){

? ? ? ? ? ? ? ? ? ? ? console.log(value);

? ? ? ? ? ? ? ? ? ? ? console.log(value.split('-'));

? ? ? ? ? ? ? ? ? ? ? if( value.split('-').length ==2){

? ? ? ? ? ? ? ? ? ? ? ? ? this.firstName = value.split('-')[0]

? ? ? ? ? ? ? ? ? ? ? this.lastName = value.split('-')[1]

? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? },

? ? ? ? ? },

// watch监听data中属性的改变

? ? ? ? ? watch:{

? ? ? ? ? ? ? firstName:function(value){

? ? ? ? ? ? ? ? ? console.log(value);

? ? ? ? ? ? ? ? ? this.name = this.firstName + '-' +this.lastName

? ? ? ? ? ? ? },

? ? ? ? ? ? ? lastName:function(value){

? ? ? ? ? ? ? ? ? console.log(value);

? ? ? ? ? ? ? ? ? this.name = this.firstName + '-' +this.lastName

? ? ? ? ? ? ? },

? ? ? ? ? },

45.vue-cli使用，如何创建和启动项目，项目文件结构

vue create? 文件名

选择对应配置——见(2条消息) 安装vue-cli后创建项目的步骤以及创建后各文件（夹）的作用_终将抵达丶的博客-CSDN博客

46.使用第三方ui组件

47.覆盖ui组件样式

/deep/

48.什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

49.为什么用vuex，解决了什么问题

• 行统一的状态管理，解决不同组件共享数据的问题。
• 不同视图需要变更同一状态的问题。
• 使用vuex之后，状态变化更加清晰。

50.vuex的核心模块

（1）state

1. state是什么？ 是一个单一状态树，是vuex中为一个的数据源，我们的数据都是放在state中的。
2. 组件中去取state的值，通过this.$store.state，

（2）getters

1. 对state中的数据进行加工（派生）
2. 取getters中的值,通过this.$store.getters，

（3）mutation

修改state中的值，我们state每次变化，都应该由mutation去修改，方便追踪数据的流转。

????????①this.$store.commit('mutation类型（函数名）',"参数，参数一般是对象形式")

????????②this.$store.commit({type:'mutation类型（函数名）'},...其他参数)

（4）action

action类似于mutation，不同的是

action可以包含异步操作

action不能直接修改state，如果想修改state的话，需要触发mutation

（5）module

1. 由于使用单一的状态树，项目中的状态会集中在一起，导致难以维护，这个时候可以通过module对store进行拆分。
2. 使用module之后，每个模块都有自己的state、mutation等内容，方便维护

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // number:5,
    visible: false,
    userInfo:{},
  },
  getters: {

  },
  mutations: {
    changeVisible(state,payload){
      state.visible = payload
    },
    changeUserInfo(state,payload){
      state.userInfo = payload
    }
  },
  actions: {
  },
  modules: {
  }
})

51.vuex状态刷新重置问题如何解决

（1）保存本地

（2）在对应页面的生命周期内再次发起求情

52.什么是路由守卫，如何配置

路由守卫就是路由跳转过程中的一些钩子函数?，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数?

配置全局的路由守卫

router.beforeEach((to, from , next) => {
  if (to.meta.need) {
    console.log(to.meta.need)
    console.log(111)
    getUserInfo().then(res=>{
        if (res.code == 0) {
          next()
        } else {
          alert('请先登录!')
          next('/')
        }
      }
    )
  } else {
    next()
  }

})

53.什么是同源策略，什么是跨域

什么是跨域（CORS） 首先跨域是由于浏览器的同源策略导致的，那什么是同源策略，同源就是指协议、域名、端口一致，如果这三个中的一个不同的话就会引起跨域问题

54.如何解决跨域

使用代理

55.代理如何配置，各个配置项什么意思

//配置代理
devServer: {
    //不设置 重写  http://wkt.myhope365.com/weChat
    //设置重写   http://wkt.myhope365.com
    proxy: {
        '/course-api': {         //代理名称,这里最好有一个
            target: 'https://course.myhope365.com/api',  // 后台接口域名
            changeOrigin: true,  //是否跨域
            pathRewrite:{
                '^/course-api':''//路径重写
            }
        }
    }
}

56.如何封装axios，好处是什么

// 对http请求进行封装
import axios from 'axios'

// 使用自定义的配置文件发送请求
const instance = axios.create({
    baseURL: '',
    timeout: 5000,
    headers: {
    }
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    instance// 对响应数据做点什么
    if(response.status === 200){
        return response.data;
    }else{
        console.error("请求错误")
        console.error(response)
    }
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export d