一、vue中的v-show和v-if是做什么用的，两者区别是什么
v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
二、让css只在当前组件生效
<style scoped>
</style>
三.让scss、stylus在当前组件生效
scss ：
1.下载 npm install sass-loader node-sass --save
2. <style lang='scss' scoped>
3. scss 样式穿透
父元素 /deep/ 子元素
<style scoped lang='scss'> .swiper-pagination /deep/ .swiper-pagination-bullet-active{ background:pink; } </style>
stylus:
1. 下载
npm install stylus stylus-loader --save
2.
<style lang='stylus' scoped>
3. stulus 样式穿透
父元素 >>> 子元素
<style scoped lang='stylus'> <!--方法一--> .swiper-pagination >>> .swiper-pagination-bullet-active{ background:pink; } <!--方法二--> .swiper-pagination /deep/ .swiper-pagination-bullet-active{ background:pink; } </style>
四.v-model的使用
可以实现双向绑定。 在input或者select或者文本域配合value使用
<template>
<div id="app">
<input type="" name="" v-model='msg'>
<div>{{msg}}</div>
<hr />
<input type="radio" name="radioName" v-model='radioVal' value='苹果'>
<input type="radio" name="radioName" v-model='radioVal' value='橘子'>
<div>
您的选择是 ：{{radioVal}}
</div>
<hr />
<input type="checkbox" name="" v-model='checkList'
value="篮球">
<input type="checkbox" name="" v-model='checkList'
value='足球'>
<input type="checkbox" name="" v-model='checkList'
value="乒乓球">
<div>
您的选择是：{{checkList}}
</div>
<hr />
<select v-model='selected'>
<option value='王者荣耀'>王者荣耀</option>
<option value='穿越火线'>穿越火线</option>
<option value="斗地主">斗地主</option>
</select>
<div>
您的选择是：{{selected}}
</div>
<button @click='btn'>按钮</button>
</div>
</template>
五.vue中的标签如何绑定事件
v-on:click 简写 @click
绑定事件：<input @click=doLog() />
在移动端click有300ms延迟的问题，解决这个问题可以引入fastClick
1>下载
npm install fastclick
2>引入
import FastClick from 'fastclick'
FastClick.attach(document.body);
六.vue-loader是什么？使用它的用途有哪些？
项目打包 npm run build ---> index.html
开发的时候操作的都是 xxx.vue文件
loader ： 加载器
用途 : js可以写es6、style样式可以scss或less、template可以加jade等
七.NextTick 是做什么的
说明：
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。
场景：
需要在视图更新之后，基于新的视图进行操作
使用swiper
axios请求数据， 数据（图片）
八.Vue 组件 data 为什么必须是函数
不用脚手架 vue.js
new Vue({
el:"#app",
template:xxx
data : {
}
})
用脚手架 组件 data 为什么必须是函数?
因为 JS 本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有 Vue 实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了。
九.对 keep-alive 的了解
1.keep-alive是什么？
内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染dom。
2.说明
keep-alive 它不会在dom树中渲染
3.使用场景，几乎和渲染有关系
4.多2个生命周期
activated 组件被激活时调用
deactivated 组件被移除时使用
例子：
//App.vue <template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div> </template> //Home.vue <template> <div> ---这是home组件--- <button @click='goCity'>{{cityName}}</button> </div> </template> <script type="text/javascript"> export default { data () { return { cityName:'上海' } }, methods:{ goCity(){ this.$router.push("/city"); }, http(){ this.axios.get("/api/data.json").then(res=>{ console.log(res.data); }) } }, mounted(){ this.http(); }, activated(){ if(this.cityName!='北京'){ this.http(); } } } </script> //City.vue <template> <div> 这是city页面 </div> </template>
十.vue 中 key 的作用
总结：key的作用主要是为了高效的更新虚拟dom
没有加key，diff默认算法的问题（虚拟dom）
1. 如果节点类型不同，直接干掉前面所有的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点
2. 如果节点类型相同，则会重新设置节点的属性，从而实现节点的更新
十一.Vue的双向数据绑定原理是什么？
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
核心：利用es5的Object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作实现的，它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="" name="" id='inp'> <div id='oDiv'></div> <script type="text/javascript"> // let obj = {a:1}; // console.log(obj); let obj = {}; Object.defineProperty(obj,'name',{ //第一个参数：定义属性的对象 第二个参数：要定义或修改的属性的名称 第三个参数：将定义或修改的属性描述符 get(val){ //获取 console.log("你读了"); return val; }, set(val){ inp.value=val; oDiv.innerHTML = val; } }) inp.addEventListener("input",function(e){ obj.name=e.target.value; }) obj.name = 'hello'; </script> </body> </html>
十二.在Vue中使用插件的步骤
1. 下载
npm install xx
2. 引入
import xx from 'xx'
Vue.use(xx);
3. 配置
<xx
v-model='0'
selecteid='0'
>
</xx>
//秒杀倒计时插件 //1. 下载 npm install ly-tab //2. 引入 import LyTab from 'ly-tab' Vue.use(LyTab) //3. 配置 <ly-tab v-model="selectedId" :items="items" :options="options"> </ly-tab>
十三.watch和computed差异
computed ： 计算属性
1. 计算属性是由data中的已知值，得到一个新的值
2. 性能不好
3. 别人变化影响我自己
watch : 监听数据的变化
1. 监听data中的数据
2. 我的变化影响别人
//App.vue <template> <div id="app"> <img src="./assets/logo.png"> <router-view/> {{changeArr}} <input type="" name="" v-model='firstName'> <router-link to='/list'>list</router-link> <router-link to='/news'>news</router-link> </div> </template> <script> export default { name: 'App', data () { return { arr : ['a','b','c'], firstName:'' } }, computed:{ changeArr(){ return this.arr.reverse(); } }, watch:{ firstName(newVal,oldVal){ //console.log(this.firstName); console.log(newVal,oldVal); }, '$route.path'(){ console.log('路由改变'); } } } </script>
十四.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
根据vue-cli脚手架规范，一个js文件，一个CSS文件
十五.vue组件之间如何传值通信
1. 父组件 传值 子组件
父组件：
<Header :msg='msg'></Header>
子组件：
方式一：props:['msg']
方式二：props:{
msg:数据类型
}
2. 子组件 传值 父组件
子组件：
this.$emit("自定义事件名称",要传的数据);
父组件：
<Header @childInput='getVal'></Header>
methods:{
getVal(msg){
//msg就是，子组件传递的数据
}
}
3. 兄弟组件之间的传值
通过一个中转（bus）
//bus.js import Vue from 'vue'; export default new Vue;
A兄弟传值：
import bus from '@/common/bus'
bus.$emit("toFooter",this.msg);
B兄弟接收：
import bus from '@/common/bus'
bus.$on('toFooter',(data)=>{
//data是this.msg数据
})
十六.vue-cli项目中src目录每个文件夹和文件的用法
src
assets | 静态资源 （图片、js、css）
components | 非路由组件
views | 路由组件
router | 路由配置
store | vuex（仓库）
App.vue | 挂载的第一个组件
main.js | 全局的文件
十七.axios是什么？怎么使用？vue跨域请求接口代理方式？
1. axios是什么？Axios 是一个基于 promise 的 HTTP 库
怎么使用
a> 下载
npm install axios --save
b> 引入(main.js)
import axios from 'axios';
Vue.prototype.axios = axios;
c> 请求方式，以及传递参数
axios.get('/api/login?userName=???&userPwd=???')
axios.post('/api/login',{
userName:??,
userPwd:???
})
2. 设置代理，请求接口（跨域）
config/index.js
proxyTable: {
'/api':{
target:"http://localhost:8080/",
changeOrigin:true,
pathRewrite:{
'^/api':'static/mock'
}
}
},
修改了webpack的配置，一定要重启一下服务
十八.vue页面的生命周期
1、vue页面的生命周期？
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
-----使用了 keep-alive 就会多2个生命周期：
activated
deactivated
2、生命周期的理解
总共分为：8个阶段
创建前/后：
beforeCreate ：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
created ： vue实例的数据对象data有了，但是$el还是没有
载入前/后
beforeMount : vue实例的$el和data都初始化了,但还是挂载之前为虚拟dom节点，data.msg还未替换。
mounted : vue实例挂载完成,data.msg成功渲染的
更新前/后
当data变化时，会触发：beforeUpdate、updated
销毁前/后
当销毁的时候，会触发： beforeDestroy、destroyed
3、DOM 渲染在哪个周期中就已经完成 ： mounted
十九.单页面应用的优缺点
单页面的优点：
1. 用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
2. 前后端分离
3. 页面效果会比较炫酷（比如切换页面内容时的专场动画）
单页面的缺点：
1. 不利于seo
2. 导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）
3. 初次加载时耗时多
4. 页面复杂度提高很多
二十.路由的跳转方式
1. router-link
2. this.$router.xxx
push() ： history添加一个记录
replave() ： history不会记录上
go() ==>正整数 或者 负数
//App.vue <template> <div id="app"> <router-link to='/home' tag='button'> 跳转到home </router-link> <h1 @click='goHome'>用js跳转到home</h1> <router-view/> </div> </template> <script> export default { name: 'App', methods:{ goHome(){ // this.$router.push('/home') //this.$router.replace('/home') //this.$router.go(-1) this.$router.push({ path:'/home', //路由路径，这种传参方式可以在浏览器地址栏看到传参信息，相当于get方式 query:{ arr:['a','b','c'] } }) this.$router.push({ name:'home', //路由名称，这种传参方式不能在浏览器地址栏看到传参信息，相当于post方式 params:{ arr:['a','b','c'] } }) } } } </script>
二十一.$route 和 $router 的区别
$router为vueRouter的实例，相当于一个全局路由对象，里面含有很多属性和子对象
$route相当于当前正在跳转的路由对象
二十二.怎么定义vue-router的动态路由及获取传过来的动态参数
在router目录下的index.js文件中，对path属性加上/:id
{ path: '/header/:id', name: 'Header', component: Header }
使用router对象的params.id
<router-link to='/header/aaa'>aaaaaaaa</router-link>
<router-link to='/header/bbb'>bbbbbbbb</router-link>
<router-link :to="{name:'Header',params:{id:'ccccc'}}">ccccc
</router-link>
--------------------------------------------
mounted(){
console.log(this.$route.params.id)
}
二十三.vue-router有哪几种导航钩子
三种：
1、全局导航钩子 （2个）
beforeEach((to,from,next)=>{
})
afterEach((to,from)=>{
})
2、路由配置中的导航钩子
beforeEnter((to,from,next)=>{
})
3、组件的钩子函数
beforeRouteEnter
beforeRouteUpate
beforeRouteLeave
二十四.store是怎么注入的
Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。
二十五.直接更改state中的参数有什么问题
1. 直接修改state数据：
this.$store.state.变量 = 值
问题：
a>state修改不能追踪，调试不方便
b>加入严格模式报错
使用mutations修改
二十六.vuex原理
1. vuex其实是一个vue的插件，高度依赖vue.js
2. vue插件都需要一个install方法，
install方法调用了applyMixin，该方法主要是在所有组件中的beforeCreate中注入了this.$store对象。
3. vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对象 Property set get 方法的代理劫持。
有5个属性：State、 Getter、Mutation 、Action、 Module
二十七.jquery和vue的区别
jquery是渲染dom的，vue是操作数据的
