Vue阶段性测试题

1.什么是vue

前端渐进式JavaScript 框架，

2.框架和库的区别

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

3.mvc和mvvm的区别

MVC中 M是model:与数据库交互,V是view:页面展示,用户交互，c是controller:调度，MVVM中M是model:业务逻辑,v是view:展示页面, vm是view-model:交互

4.vue的基本代码结构

引入Vue,创建<div id=“app”/,实例化var vm= new Vue({el:{},data:{},})

插值表达式，防数据抖动指令

{{}},[v-cloak]{display:none}

5.v-html，v-text的区别

v-html和v-text写在标签上会覆盖标签内上原有内容，v-html会解析html代码和样式（富文本），v-text直接展示原始内容

6.属性绑定，事件绑定指令写法及其简写

v-bind: 简写： v-on:简写@

7.常见的事件修饰符有哪些，有什么作用，怎么用

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

8.什么是双向数据绑定和对应的vue指令

v-model;; Model层里的数据更新,View层上的数据也会跟着更新，反过来View层里的数据更新,Model层上的数据也会跟着更新

9.vue中如何动态绑定css样式

（1）：绑定style
:style="‘font-size: 32px’"
:style="{font-size:‘32px’,color:‘red’}"
:style=“font”
:style=“getStyle()”,括号不能去掉,返回以上三种绑定模式都可以生效
（2）：绑定class
:class="[class1,class2]"，
:class="{font:true,color:false}"
:class="[‘font’,‘color’]"
:class=“getClass()”，

10.v-for如何遍历对象，遍历数组，遍历数字
遍历数字
number in 10
遍历数组
参数（value,key,index）in list
遍历对象
参数（item,index）in list

11.v-for为什么设置key，key值有什么要求
key作用:提高重排效率
字符串和数字且唯一

12.v-if和v-show的区别，以及应用场景
v-if：通过删除和添加DOM元素进行显示和隐藏。用于切换次数少的时候。如果多次切换，会很消耗性能。

v-show：通过删除和添加display:none样式进行显示和隐藏。用于切换次数多的时候。

13.vue的生命周期函数有哪些，说明各自特点用途八个生命周期函数：

beforeCreate: 创建之前，在这个阶段获取不到data上的数据，在这个阶段可以进行界面的重定向
created: 实例创建之后，在这个阶段可以获取到data上的数据了，这也是我们最早可以初始化数据的地方
beforeMount： 界面挂载之前，已经获取到了要渲染模板，但是还没渲染到界面上
mounted：界面挂载之后，这个界面已经渲染好了，如果有一些组件初始化依赖于界面的话，需要在这个阶段进行初始化
beforeUpdate： 更新之前， data已经更新，但是还没渲染到界面上。这里在界面更新之前，最后操作一下data。 注意的是，不能在异步操作中修改data
updated: 更新之后，界面已经和data一致了。 如果有些组件在dom更新之后需要重新渲染的话，可以在这里进行。
beforeDestroy: 界面销毁之前。 清除定时器，监听的事件。
destroyed： 界面销毁之后

14.如何使用vue-resource发送get请求和post请求

this.$http.get("url’’).then(res => {})

this.$http.post(url, {要发送的数据对象}, {编码类型emulateJSON: true }).then(res => {})

15.如何使用axios发送get请求和post请求
axios.get(‘url’) .then(res =>{}).catch(function (error) { // 请求失败处理 });

axios.post(‘url’).then(response => {}).catch(function (error) { // 请求失败处理});

16.控制vue动画的6个类名
.v-enter
.v-enter-active
.v-enter-to
.v-leave
.v-leave-active
.v-leave-to

17.组件化和模块化的区别
组件化:从ui界面设计出发
模块化:从业务逻辑出发

18.结合代码说明全局声明组件的几种的方式
1.Vue.component(“组件名”,Vue.extend({template:

组件元素

}))

2.Vue.component(“sonComponentName”,{template:

组件元素

}) // extend会自动进行

3.<script id=“sonIdName” type=“x-template”

Vue.component(“sonComponentName”,{template:"#sonIdName"})

4.<template id=“sonName”
Vue.component(“son”,{template:"#sonName"})

19.组件内的data为什么用函数返回对象
数据隔离
不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件

20.结合代码说明子组件如何给父组件传值
父组件中：<son title/

子组件中：props:{
son:{
type:[Number,String,Object]/String
default:10
}
}

21.结合代码说明父组件如何给子组件传值
父组件中：<son @fromSon=“fromson($event,data)” />
父组件中：mehods:{
fromson(valueFromSon){
this.sondata=event
}
}

子组件中：<button @click=“sendValueFunctonName()”>发送数据
子组件中：methods:{
send(){
this.$emit(“fromSon”,valueFromSon)
}
}

22.结合代码说明普通插槽和默认插槽的使用方式
默认插槽 <slot/
具名插槽 <template id=“login”
<slot name=“footer”

23.如何通过ref获取dom元素
this.$refs.domname

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

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

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

25.结合代码说明如何使用路由
引入VueRouter放在Vue引入之下,
创建VueRouter实例,并且建立映射关系。
let router = new VueRouter({
routes:[
{
path:’/’,
component:sonComponentName,
}]
挂载：
new Vue({
el:’#app’,
router
})
预留显示位置
router-view

26.结合代码说明如何设置路由嵌套
在父组件中预留位置router-view
children:[name(){path:"/",component:""}]

27.结合代码说明声明式路由跳转和传参
route:[
{
path:’/’,
component:sonComponentName,
},

28.结合代码说明函数式路由跳转和传参跳转

this.$router.push({
                        name: "namelogin",
                        params: {
                            userid: 999,

                            name: "wangwu"
                        }
                    })

**29.如何进行路由重定向**
redirect:

**30.如何设置选中路由高亮**
router-link-active

**31.分别用绑定方法methods、属性计算computed和属性监听 watch实现名字全称案例**

methods: {
name() {
this.allName = this.firstName + “-” + this.lastName
}
watch:{
“firstName”:function(){
this.allName = this.firstName + “-” + this.lastName
},
“lastName”:function(){
this.allName = this.firstName + “-” + this.lastName
},
computed:{
allName:{
get:function(){
return this.firstName + “-” + this.lastName
},
}

**32.定义全局过滤器实现日期格式化，实现传YYYY-MM-DD hh-mm:ss显示年-月-日 时：分：秒（4分）**
// 定义全局过滤器
Vue.filter(‘formatTime’, function (date, format) {
// 这里的data就是未处理的原始数据，format为传递
var year = date.getFullYear();
var month = (date.getMonth() + 1).toString().padStart(2,0);
var day = (date.getDate()).toString().padStart(2,0);
var hour = (date.getHours()).toString().padStart(2,0);
var minute = (date.getMinutes()).toString().padStart(2,0);
var second = (date.getSeconds()).toString().padStart(2,0);
return format.replace(“YYYY”,year).replace(“MM”,month).replace(“DD”,day).replace(“hh”,hour).replace(“mm”,minute).replace(“ss”,second)
})
使用{{date | formatTime(“YYYY-MM-DD hh:mm:ss”) }}
————————————————
版权声明：本文为CSDN博主「liutianxiao123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liutianxiao123/article/details/115382359