Vue基础测试题整理

最新推荐文章于 2024-05-06 11:20:14 发布

阿尔法小菜鸡

最新推荐文章于 2024-05-06 11:20:14 发布

阅读量2.4k

点赞数 2

文章标签： vue javascript

本文链接：https://blog.csdn.net/lovewulibingbing/article/details/115357518

版权

1.什么是vue?

前端渐进式javaScript框架

2.框架和库的区别

框架是一套完整的解决方案，对项目侵入性大，项目如果需要更换框架，则需要重新架构整个项目。
库是提供某个小功能，对项目入侵性小，若库不适用，很容易切换到其他库

3.mvc与mvvm的区别

MVC是后端的分层开发概念，MVVM是前端视图层的概念，主要关注与视图层分离，也就是把前端视图层分成了三部分Model、view、VMViewModel；
MVC中M是model层：负责操纵数据库。V是view层：视图层，发送请求，接收响应。C是controller，是业务逻辑处理层，接收请求和返回响应。
MVVM中M为model层：数据层保存数据，V是view层是页面的HTML结构。VM是一个调度者，链接M与V

4.vue的基本代码结构

const vm = new Vue({
el:”#app”,
data:{},
methods:{},
})

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

插值表达式：{{}}
防数据抖动指令：v-cloak

    <style>
        [v-cloak]{
            display: none;
        }
    </style>

6.v-html v-text区别

v-html会解析HTML代码和样式（富文本），v-text直接展示原始内容

7.属性绑定，事件绑定指令写法极其简写

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

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

.top 阻止冒泡
.capture 设置捕获
.prevent 阻止默认事件
.self 只在触发自身时触发事件
.once 只触发一次

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

Model层里的数据和View层上的数据只有有一方变化，另一方随之改变
v-model

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

data:{
font:‘font-size: 32px; color: red’,
class1:‘font’,
class2:‘color’
},
methods:{
getStyle(){
return “font-size: 32px; color: red”
}
}
（1）.绑定style
：style=“font-size：33px”
：style="{‘font-size’:‘32px’,color:‘red’}"
:style=“font”
:style=“getStyle()“括号不能去掉
（2）绑定class
：class=”[class1,class2]”,
:class="[‘font’,‘color’]"
:class="{font:true,color:false}"
:class=“getClass()”,括号不能去掉

11.v-for如何遍历对象，数组，数字

遍历对象： v-for="(value,key,index) in user" :key=index
遍历数组： v-for="(item,index) in arr " :key=index
遍历数字： v-for=“value in 3” :key=value

12.v-for为什么设置key，key值有什么要求

提高重排效率，key值只能为不重复的字符串或数字

13.v-if与v-show的区别

v-if：通过删除和添加DOM元素进行显示和隐藏。用于切换次数少的时候。如果多次切换，会很消耗性能。
v-show：通过删除和添加display:none样式进行显示和隐藏。用于切换次数多的时候。

14.vue的生命周期有哪些，说明各自特点用途

在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的数据都还没有没初始化
在 created 中，data 和 methods 都已经被初始化好了
在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了
当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步
updated事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
当执行 beforeDestroy的时候，实例上data和所有的methods，以及过滤器，指令… 都还处于可用状态，此时还没有真正执行销毁的过程
当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器。。。都已经不可用了

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

引入resource 放在vue后面
this.$http.get(地址).then((res)=>{ … }),
this.$http.post(地址，请求体，{emulateJSON:true}).then((res)=>{ … }),

16.如何使用axios发送get请求和post请求

axios.get(地址).then((res) => { … })
axios.post(地址,请求体).then((res)=>{…})

17.控制vue动画的六个类名

v-enter v-enter-to v-enter-active v-leave v-leave-to v-leave-active

18.组件化和模块化的区别

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

19.结合代码说明全局声明组件的几种的方式

1.let sonComponentName = Vue.extend(
{template:`<div>组件元素</div>`}
)，
Vue.component("组件名",sonComponentName)
2.Vue.component("sonComponentName",{template:`<div>组件元素</div>`}) // extend会自动进行
3.<script id="sonIdName" type="x-template"><div>组件元素</div></script>Vue.component("sonComponentName",{template:"#sonIdName"})
4.<template id="sonIdName"><div>组件元素</div</template>Vue.component("sonComponentName",{template:"#sonIdName"})

20.组件内的data为什么用函数返回对象

数据隔离
如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题；js在赋值object对象时，是直接一个相同的内存地址。所以为了每个组件的data独立，采用了这种方式。

21.结合代码说明子组件如何给父组件传值

父组件中：<sonComponentName @fromSonEventType=“fatherComponentFunctionName()” />
父组件中：mehods:{
fatherComponentFunctionName(valueFromSon){
console.log(valueFromSon)
}
}
子组件中：<button @click=“sendValueFunctonName()”>发送数据
子组件中：methods:{
sendValueFunctonName(){
this.$emit(“fromSonEventType”,valueFromSon)
}
}

22.结合代码说明父组件如何给子组件传值

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

23.结合代码说明普通插槽和具名插槽的使用方式

具名插槽：

    <div id='app'>
         <login>
             <template v-slot:footer>
                 <div>
                    footer
                 </div>
             </template>
         </login>
    </div>

    <template id="login">
        <!-- 模版里只能有一个根元素 -->
        <div>
           登录、注册
           <slot name="footer"></slot>
        </div>
    </template>

普通插槽：

//目标标签中放template标签
  <login>
             <template v-slot:footer>
                 <div>
                    footer
                 </div>
             </template>
         </login>

    <template id="login">
        <!-- 模版里只能有一个根元素 -->
        <div>
           登录、注册
//直接放插槽
           <slot></slot>
        </div>

    </template>

24.如何通过ref获取dom元素

this.$refs.name

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

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由

26.结合代码说明如何使用路由

引入VueRouter放在Vue引入之下,
创建VueRouter实例,并且建立映射关系。
<template id="sonIdName"><div>组件元素</div></template>。Vue.component("sonComponentName",{template:"#sonIdName"})
<template id="sonIdName2"><div>组件元素</div></template>。Vue.component("sonComponentName2",{template:"#sonIdName2"})
let router = new VueRouter({
routes:[
{
path:'/',
component:sonComponentName,
redirect:'/son1'
},
{
path:'/son2',
component:sonComponentName2
},
{
path:'/son1',
component:sonComponentName1
},
]
})
挂载：
new Vue({
el:'#app',
router
})
跳转和预留显示位置
<router-link to="/son1" >跳转</router-link>
<router-view />

27.结合代码设置路由嵌套

    <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"


        })

28.声明式路由的跳转和传参

<router-link to="{path:'/son1' ,query:{ id:'10' }}" >跳转</router-link>

29.函数式路由的跳转和传参

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

                            name: "wangwu"
                        }
                    })

30.如何进行路由重定向

routes: [
{
path: ‘/’,
// 把当前地址，重定向指定地址
redirect: “/login”
},

31.设置选中路由高亮

被匹配到的路由的router-link上会有个router-link-active的样式，我们通过设置这个样式设置激活标签的样式
在实例化路由的时候配置 linkActiveClass: “myactive”

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

 姓氏 <input type="text" v-model:value="firstName">
        名字 <input type="text" v-model:value="lastName">
        <span @click="name">全称</span> <input type="text" v-model:value="allName">
    // updated() {
            //     this.allName = this.firstName + "-" + this.lastName
            // },
            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
            //     },
            // }
            // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
            // 不能和data里面的重复
            computed:{
                // allName(){
                //     return this.firstName + "-" + this.lastName
                // },
                allName:{
                    get:function(){
                        return this.firstName + "-" + this.lastName
                    },
                    // 只有改变本身的时候才能触发这个方法
                    set:function(newVal){
                        this.firstName = newVal.split("-")[0]
                        this.lastName = newVal.split("-")[1]
                    }
                }
            }

33.手写实现定义全局过滤器实现日期格式化，实现传YYYY-MM-DD hh-mm:ss显示年-月-日时：分：秒

//   定义全局过滤器
        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") }}

阿尔法小菜鸡

关注

2
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
Vue基础测试题整理

1.什么是vue?前端渐进式javaScript框架2.框架和库的区别框架是一套完整的解决方案，对项目侵入性大，项目如果需要更换框架，则需要重新架构整个项目。库是提供某个小功能，对项目入侵性小，若库不适用，很容易切换到其他库3.mvc与mvvm的区别MVC是后端的分层开发概念MVVM是前端视图层的概念，主要关注与视图层分离，也就是把前端视图层分成了三部分Model、view、VMViewModel；MVC中M是model层：负责操纵数据库。V是view层：视图层，发送请求，接收响应。C是co
复制链接

扫一扫