vue练习题（可能有错误待完善）
1、什么是vue
vue.js是一套构建用户界面的渐进式框架，逐渐进入项目，将js替换为vue
2、框架和库的区别
框架是一套完整的解决方案；对项目的侵入性较大
库（插件）提供某个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，很容易切换到其他库实现需求
3、mvc和mvvc的区别
mvc是后端分层开发概念：
m：model，模型层，与数据库连接
v：view，视图层，界面展示、界面交互，用户看到并与之交互的界面
c：controller，调度层，将用户输入的指令和数据传递给model返回给view
mvvc是前端视图层的概念：
m：model，业务逻辑、数据
v：view，界面展示
vm：viewModel，链接view和model
4、插值表达式
{{}}
6、vue指令界面防止闪烁
v-cloak
[v-cloak]{
display:none
}
7、v-html，v-text的区别
v-html可以解析富文本
v-text不可以解析富文本
8、属性绑定
v-bind 简写 ：
9、vue指令-事件绑定及简写
v-click 简写 @
10、vue事件修饰符
.self 只有触发自身时触发
.prevent 阻止默认事件
.once 只触发一次
.stop 阻止冒泡
.capture 设置捕获
11、vue指令-双向数据绑定
v-model:value = ’’
v-model = ‘’
12、vue指令-循环渲染 v-for
13、vue指令-显示隐藏
v-if(通过删除和添加DOM元素进行显示和隐藏。用于切换次数少的时候。如果多次切换，会很消耗性能)
v-show（通过删除和添加display:none样式进行显示和隐藏。用于切换次数多的时候）
14、vue指令-v-for如何遍历对象、数组、数字
遍历数组：v-for='(item,index) in list' :key=''
遍历对象: v-for='(value,key,index) in person' :key=''
遍历数组对象： v-for='(item,index) in objlist' :key=''
遍历数字： v-for = 'index in 10' :key=’index’
15、vue指令-v-for为什么设置key
让界面元素和数组的每个记录进行绑定，提高重排效率
key只能是字符串或者数字
key必须是唯一的
16、vue指令-v-if和v-show的区别
v-if的实现方式是删除dom元素，适用于切换次数少的情况
v-show的实现方式是设置display:none，适用于频繁切换的情况
17、vue绑定class方式
.boxRed{
color: red;
}
<!-- data中定义classRed -->
<div :class='classRed'>:class='classRed'</div>
<!-- 数组 -->
<div :class=[classRed]>:class=[classRed]</div>
<!-- true/false判断 -->
<div :class={boxRed:true}>:class={boxRed:true}</div>
<!-- 三目 -->
<div :class='1==1?"boxRed":"box"'>:class='1==1?"boxRed":"box"'</div>
<!-- 调用函数 -->
<div :class=getClass()>:class=getClass()</div>
data: { classRed:"boxRed" }, methods: { getClass(){ return "boxRed" } },
18、vue绑定style方式
:style = ‘fs50’ :style = ‘{fontSize:fs40}’ :style = ‘[fs50]’ :style = ‘fontSize’ data:{ fs50:{ fontSize:”50px” }, fs40:”40px”, fontSize:’60px’ }
19、vue过滤器全局和局部声明方式及使用
使用：{{变量 | 过滤器名字}}
全局定义：
通过Vue提供的filter方法定义：Vue.filter()
参数1：过滤器的名字
参数2：过滤器执行函数
过滤器名为changeword 只执行函数返回值将大聪明用***替代
Vue.filter("changeWord", function (data, format) {
return data.replace("大聪明", "***")
})
私有定义
filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。
20、vue键盘修饰符使用
注册一个监听按键事件
1、监听所有按键：v-on:keyup
2、监听指定按键：v-on:keyup.按键码
21、vue键盘修饰符设置别名
设置112别名为f1
Vue.config.keyCodes.f1 = 112
22、vue自定义指令全局和局部声明方式及使用
1、全局定义
Vue.directive(参数一：名字不带V- 参数二 对象 )
对象中三个钩子函数{
一、bind 只调用一次，指令第一次绑定到元素时调用，用于初始化
二、inserted 元素已经渲染到界面上之后执行
三、update 元素更新时执行
}
2、局部定义
局部指令directives（注意多个s），与data平级，为一个对象，对象中的对象也有bind、inserted、update三个钩子函数，多一个focus，数据渲染到页面上后触发
23、vue声明周期狗子函数有哪些？各阶段作用及特点
beforeCreate 拿不到data和methods，一般用于重定向
created 能拿到data和methods，一般用于接口请求，数据初始化
beforeMount dom元素渲染前，此时页面数据尚未渲染
mounted dom元素渲染完毕后，一些依靠dom的操作在此进行，例如swiper，echarts
beforeUpdate 页面更新前
updated 页面更新后
beforeDestroy 销毁前，一般用于清除计时器、事件监听和属性监听
destroyed 销毁后
25、vue-resource如何发送get，post请求
直接在页面中，通过script标签，引入vue-resource的脚本文件；
注意：引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件
Get： this.$http.get(‘url’).then(res => {}) post: // 参数1： 要请求的URL地址 // 参数2： 要发送的数据对象 // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded this.$http.post(‘url’,请求体,{emulateJSON:true}).then(res => {})
26、vue-resource发送post请求第三个参数写什么
// 参数1： 要请求的URL地址 // 参数2： 要发送的数据对象 // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
27、axios发送get，post请求
1. axios.get(地址).then((res) => { ... })
2. axios.post(地址,请求体).then((res)=>{...})
28、axios发送post请求使用内置参数对象是什么
29、控制vue动画的六个类名
.v-enter .v-enter-to .v-enter-active
.v-leave .v-leave-to .v-leave-active
自定义属性名name
动画进入三个阶段 .自定义属性名-enter → .自定义属性名-enter-to → .自定义属性 名-enter-active
离开三个阶段 .自定义属性名-leave → .自定义属性名-leave-to → .自定义属性名- leave-active
30、vue中过渡动画结合第三方插件使用
1.引入animate.css
2.<transition enter-active-class（leave-active-class）=“animate-animated 动画名称”></transition>
(3的版本不加前缀，4版本要加)
31、vue中过渡动画中钩子函数的使用
@before-enter（leave）=‘beforeEnter’ beforeEnter(el){el.style.transform=“”} 动画之前进入之前
@enter=‘enter’ enter(el,done){el.style.transform=“” done()必须，表示该动作已完成} 动画进入完成
@after-enter = ‘after’ after(el){} 动画进入完成之后
32、vue中如何设置v-for列表动画
<transition-group tag=‘li’>
<li v-for=(item,index) in list :key=‘index’>{{item}}</li>
</transition>
平缓柔和
.v-move{transition = all 0.8s ease } .v-leave-active{position:absoluate}
33、全局声明组件的几种方式
一、var first = Vue.extend({template:'内容'}) Vue.component('组件名',组件内容) 二、Vue.component('组件名'，{ template:'内容'}) 三、 <script type='template' id="third"> <h1>第三种方式</h1> </script> Vue.component('组件名'，{template:'#third'}) 四、<template id="forth"> <h1>第四种方式</h1> </template> Vue.component('组件名'，{template:'#forth'})
34、结合代码说明父组件如何给子组件传值
在father中给子组件传值
<div id='father'>
<son name='ls'></son>
</div>
子组件props属性接收传值
props:{ name:String, name:[String,Number], name:{ type:String default:‘’（默认值） }}
35、vue中如何子组件给父组件传值
1、子组件created中this.$emit两个参数(要传给谁（自定义事件类型）,要传的信息) this.$emit('send-msg-to-father',this.sonmsg) 2、@定义一个方法,用于接收son传过来的信息 <son @send-msg-to-father='getsonmsg'></son> 3、得到son传过来的信息，固定参数data getsonmsg(data){} 4、父元素data中定义数据用来接收使用来自son的信息 usesonmsg:'' 5、将得到的data值（这里的data是自定义方法中的data）传给data中定义好的数据中使用 this.usesonmsg = data 6、使用son传来的信息 {{usesonmsg}}
36、vue中如何使用插槽，两种插槽的区别
<slot></slot>
具名插槽
<slot name='top'></slot>
具名插槽使用
<template v-slot:top>
<div class="red">
具名插槽上
</div>
</template>
37、前端路由和后端路由的区别
1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2. 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由
38、vue中如何使用路由
1、引入VueRouter放在Vue引入之下 2、创建路由实例 let mine = {template: '#index'} // 2、创建路由实例 const router = new VueRouter({ // 3、创建映射关系 routes: [ path: '/index', component: index } ], }) 4、建立联系，将路由挂在在vue实例上 const vm = new Vue({ el: '#app', data: { }, // 4建立联系，将路由挂载在vue实例上 // router:router, // 简写router router, }) 5、展示位置/声明组件
39、路由跳转两种方式，声明式，函数式
声明式
<router-link to="/father">声明式跳转</router-link>
函数式
<button @click="toFather">跳转到father</button> toFather() { this.$router.push('/father') }
40、路由传参两种方式，声明式，函数式
//声名式query传参 <router-link :to='{path:"/father/son",query:{courseId:103}}'>路由嵌套</router-link> //声明式params传参 name与声明routes中name一致，且params传参时浏览器url必须加入参数才能正常显示 <router-link :to='{name:"Son",params:{courseId:105,courseTitle:"从入门到如土"}}'>跳转son</router-link> //函数式query传参 // this.$router.push({path:"/home",query:{courseId:200,title:300}}) //函数式params传参 this.$router.push({ name: "Home", params: { courseId: 200, title: 300 } })
41、路由嵌套
<template id="home">
<div>
首页
<button @click="tologin">点我跳转</button></button>
<router-view></router-view>
</div>
</template>
const router = new VueRouter({
// 3.创建映射关系
routes: [
{
path: "/userInfo",
component: userInfo
}, {
path: "/login/:userid/:name",
component: login,
name: "namelogin"
}, {
path: "/home",
component: home,
children: [{
path: "son",
component: son
}]
},
// 重定向
{
path: "/",
redirect: "/home"
}
],
linkActiveClass: "myactive"
})
42、路由高亮
被匹配到的路由的router-link上会有个router-link-active的样式，我们通过设置这个样式设置激活标签的样式
在实例化路由的时候配置 linkActiveClass: "myactive"
43、路由重定向
// 重定向 { path: "/", redirect: "/home" }
44、ref的使用
1、给标签设置ref属性
2、this.$refs.属性名
45、属性计算，属性监听
// 计算属性 不能和data中数据重复 computed: { // 默认只有getter allname(){ return this.firstname + '-' + this.lastname } }
46、vue-cli使用，如何创建和启动项目，项目文件结构
选择要创项目的的文件夹cmd或者 vue create 项目名
启动项目:npm run serve
Node_model 第三方依赖 public 静态资源（不进行编译）src源代码 gitignore不上传 babel es6降级文件 package.json 项目文件 readme.md 运行指令 assets静态资源（进行编译）
47、使用第三方ui组件
1.安装 npm i –save ant-design-vue 2.引入放入main.js中
全局 import Autd from ‘ant-design-vue’
Vue.use(Antd)
局部 例如：那个组件用就在那引入import {message} from ‘ant-design-vue’
48、覆盖ui组件样式 /deep/类名
49、什么是vuex 专为vue.js应用开发的状态管理模式
50、为什么用vuex，解决了什么问题
进行统一的状太管理，解决不同组件共享数据的问题
不同视图需要变更同一状态的问题
使用vuex之后，状态变化更清晰
51、vuex的核心模块
①state:定义全局状态
②getters:对全局状态进行加工(计算)，并不会改变状态值
③mutations:同步修改全局状态
④actions:异步修改全局状态，一般用于请求接口
⑤modules:将store模块化
52、vuex状态刷新重置问题如何解决
1.缓存 2.请求接口，重新赋值
53、什么是路由守卫，如何配置
导航守卫主要用来通过跳转或取消的方式守卫导航
导航守卫就是路由跳转过程中的一些钩子函数
全局：需要守卫的路由加一个mete
router.beforeEach(to,from,next())
局部：需要守卫的路由加beforeEach(to,from,next())
54、什么是同源策略，什么是跨域
浏览器的安全策略
跨域：指的是浏览器不能执行其他网站的脚本
协议、主机（ip或者域名）、端口 3者一致则同源
55、如何解决跨域
1、后端直接放开
2、JSONP
3、配置代理
module.exports = { devServer: {//不设置 重写 http://wkt.myhope365.com/weChat //设置重写 http://wkt.myhope365.com proxy: { //代理名称 '/course-api': { //这里最好有一个 / target: 'http://wkt.myhope365.com', // 后台接口域名 changeOrigin: true, //是否跨域 //路径重写 pathRewrite:{ '^/course-api':'' } }, } } }
56、代理如何配置，各个配置项什么意思
在vue.confie.js中写
devServer:{ proxy:{ ‘/api’ （代理名称）:{ target: 后端接口域名 changeOrigin:true 什么跨域 pathRewrite:{‘^/api’:’’}} 路径重写 }
57、如何封装axios，好处是什么
达到扩展和易用的目的
如何封装axios：1.引入axios 2.使用自定义配置文件 3.添加请求/响应拦截器 4导出
