Vue 常见的面试题

vue中在进入/离开的过渡中，有那几个类名？

v-enter：定义进入过渡的开始状态；v-enter-active：定义进入过渡生效时的状态；

v-enter-to: 2.1.8版及以上定义进入过渡的结束状态；v-leave: 定义离开过渡的开始状态。

v-leave-active：定义离开过渡生效时的状态；v-leave-to: 2.1.8版及以上定义离开过渡的结束状态

vue在什么场景下可以给任何元素和组件添加进入/离开的过渡效果？

条件渲染 (使用 v-if)；

条件展示 (使用 v-show)；

动态组件；组件根节点

列出vue中与列表元素相关的修饰符，并简要说明其作用？

(1).lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。使用 lazy 修饰符，从而转变为使用 change 事件进行同步

(2).number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。

(3).trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。

简要说明在vue中v-model指令的作用？

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。

根据控件类型v-model自动选取正确的方法更新元素。

它负责监听用户的输入事件以更新数据。

vue中动态样式绑定（class）的方式都有哪些？

对象方法：

   :class="{ 'active': isActive }"

   :class="{'active':isActive==-1}"
复制代码

或者

   :class="{'active':isActive==index}"
复制代码

绑定并判断多个

   :class="{ 'active': isActive, 'sort': isSort }"
复制代码

第二种（放在data里面）


   :class="classObject"

   data() {

       return {

            classObject:{ active: true, sort:false }

       }

   }
复制代码

数组方法


   :class="[isActive,isSort]"

   data() {

       return{

           isActive:'active',

           isSort:'sort'

       }

   }

   :class="[isActive?'active':'']"

   :class="[isActive==1?'active':'']"
复制代码

说明vue等单页面应用及其优缺点？

优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；

不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；

第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。
复制代码

如何让css只在当前组件中起作用？

在当前组件style标签中添加 scoped

vuex是什么？怎么使用？哪种功能场景使用它？

是状态管理，在main.js引入store，注入。只用来读取的状态集中放在store中；

改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

请列出使用axios时，get和post提交数据的方式？

get可以直接把数据以?加&符号的方式直接拼接到url地址上
axios.get(url,data)、axios({method:'get',url:请求地址,params:{提交的数据}})
axios.post(url,data)、axios({method:'post',url:'请求地址'},data:{提交的数据})

axios是什么？怎么使用？


//请求后台资源的模块
   //使用npm install axios -s 来安装
   //在main.js入口文件中引用：import axios from {axios}
   //将axios挂载到vue实例上：vue.prototype.$axios = axios
   //在config文件夹中的index.js中的Dev中填写
   ProxyTable：{
   ‘/api’:{
   Target：’代理服务器的目标地址’，
   changeOrigin: true,
   PathRewrite: {“^/api”:” ”}
   }
   }
  // 在需要调用后台资源的组件中进行使用this.$axios({
   Url: ‘/api/地址’,
   Method:’post’,//post请求必须设置
   Params:{要传的参数}//post要将params设置为data
   }).then(res=>{}).catch(err=>{})

作者：颉旺飞
链接：https://juejin.cn/post/6901813424796860430
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。