【vue练习题】

什么是vue

vue是一套构建用户界面的渐进式框架，采用的是自底向上增量开发
什么是mvc和mvvm
MVC 是后端的分层开发概念
m是model数据层v是view视图层c是controller调度层
MVVM是前端视图层的概念，
MVVM把前端的视图层，分为了三部分Model层逻辑处理、View层展示数据、VM ViewModel层承上启下;

框架和库的区别

框架：是一套完美的解决方案，对项目的侵入性较大，项目如果更换框架，则需要重新架构整个项目
库：提供一个小功能，对项目侵入性较小，可以随意切换其他库

插值表达式

插值表达式{{}}，可以在前后插入一些内容

vue指令界面防止闪烁

v-cloak: 防止界面闪烁，原理是display：none

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

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

vue指令-属性绑定及简写

v-bind  简写是：

vue指令-事件绑定及简写

v-on    简写@

vue事件修饰符

.stop阻止冒泡
.prevent组织默认事件
.capture添加事件捕获模式
.self当事件触发在该元素本身时触发
.once事件只触发一次

vue指令-双向数据绑定

v-model 数据双向绑定，绑定的是表单控件

vue指令-循环渲染

v-for

vue指令-显示隐藏

v-if   v-show

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

遍历对象：参数(value,key,index)in  list
遍历数组：参数(value,index)in  list
遍历数字：num  in  10(1~10)

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

提高重排效率，就地复用
没有 key 属性，状态默认绑定的是位置，有 key 时，状态根据key的值绑定到了相应的数组元素上

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

提高重排效率，就地复用
没有 key 属性，状态默认绑定的是位置，有 key 时，状态根据key的值绑定到了相应的数组元素上

vue绑定class方式

数组   三木表达式  数组内置对象  直接通过对象

提高重排效率，就地复用

没有 key 属性，状态默认绑定的是位置，有 key 时，状态根据key的值绑定到了相应的数组元素上
直接在元素上通过：style的形式，书写样式对象
将样式对象，定义到data中，并直接引用到：style中
在：style中通过数组，引用多个data上的样式对象

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

全局：Vue.filter("过滤器名", (值) => {return "返回处理后的值"})
局部：filters: {过滤器名字: (值) => {return "返回处理后的值"}

vue键盘修饰符使用

监听所有按键：v-on:keyup
监听指定按键：v-on:keyup.按键码

vue键盘修饰符设置别名

Vue.config.keyCode 自定义键名 = 键码

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

Vue.directive()
vue.directives:{}

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

beforeCreate
Created
beforeMount
Mounted
beforeUpdate
Updated
beforeDestroy
destroyed

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

beforeCreate：初始化未完成，data中的数据和methods中的方法还没挂在到Vue实例，一般用于页面重定向
Created：初始化完成他是第一个可以操作data中的数据和methods中的方法的生命周期，用于接口请求和数据初始化
beforeMount：虚拟DOM挂载之前，页面元素还没更新
Mounted：初始化已完成  他是第一个可以操作DOM元素的生命周期
beforeUpdate：执行0次或多次，页面中的数据不是新的data里面是最新的
Updated：执行0次或多次，页面中的数据是最新的
beforeDestroy：销毁之前，清空定时器和页面监听
Destroyed：销毁完成

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

this.$http.get("url?参数").then() 
  this.$http.post("url",{参数},{ emulateJSON: true })then()

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

请求参数设置，设置提交表单：emulateJSON: true

axios发送get，post请求

axios.post("url",{参数}).then() 
 axios.get("url?参数").then()

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

new FormData()
new URLSearchParams()

vue中过渡动画类名有哪些

.v-enter,.v-enter-active,.v-enter-to,.v-leave,.v-leave-active,.v-leave-to

vue中如何声明组件

 Vue.component("组件名",{template:"组件id"})

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

prop{自定义名字：{type:[String,Number]},{return 值}}

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

在组件中加入<slot></slot>标签占位，在组件标签中使用，普通插槽只占一个位置，具名插槽可以复用，名字不同

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

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应一个网页
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换

vue中如何使用路由

1.引入js文件2.创建new VueRouter()3.在实例对象中配置routes:[]4.声明path路径5.挂在到vue实例中，6.用view-router标签显示

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

this.$router.push({path:'',query:{}}) 
 <router-link :to="{path:"路径",query:{}}">

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

<router-link :to="{path:"路径",query:{}}">  
<router-link :to="{name:'',params:{}}">

路由嵌套

使用children:[{}],可以多层嵌套

路由高亮

.router-link-active 
  linkActiveClass=""

路由重定向

redirect

ref的使用

ref 1.获取dom。操作dom  
    2.获取组件，拿到组件上的数据和方法

属性计算，属性监听

 conpouted:{} 
 watch:{}