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”
: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.$("url’’).then(res => {})
this.$http.post(url, {要发送的数据对象}, {编码类型emulateJSON: true }).then(res => {})
15.如何使⽤axios发送get请求和post请求
<(‘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.Vueponent(“组件名”,d({template:
组件元素
}))
2.Vueponent(“sonComponentName”,{template:
组件元素
}) // extend会⾃动进⾏
3.<script id=“sonIdName” type=“x-template”
Vueponent(“sonComponentName”,{template:"#sonIdName"})
4.<template id=“sonName”
Vueponent(“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 = FullYear();
var month = (Month() + 1).toString().padStart(2,0);
var day = (Date()).toString().padStart(2,0);
var hour = (Hours()).toString().padStart(2,0);
var minute = (Minutes()).toString().padStart(2,0);
var second = (Seconds()).toString().padStart(2,0);
place(“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版权协议，转载请附上原⽂出处链接及本声明。
原⽂链接：blog.csdn/liutianxiao123/article/details/115382359

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。