Vue阶段测试

wz990223

已于 2022-04-06 10:15:22 修改

阅读量262

点赞数

文章标签： vue.js

于 2021-07-05 22:36:50 首次发布

本文链接：https://blog.csdn.net/wz990223/article/details/118499253

版权

1、什么是Vue.js？框架和库的区别

Vue.js是一种前端渐进式框架

框架：是一种完整的解决方案；对项目侵入性较大，项目如果需要更换框架，则需要重新构架整个项目。例如node中的express

库（插件）：提供了某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。例如：从jquery切换到Zepto

2、Mvvm和mvc的区别

MVC是后端的分层开发概念；

MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层分成了三部分Model、View、ViewModel;

3. 将数据展示在页面上的几种方式

v-html v-text 插值和表达式{{}}

v-html可以解析富文本

4. 属性绑定，事件绑定的写法及简写方式

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

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

Model层里的数据更新，View层上的数据也会跟着更新，反过来View层里的数据更新,Model层上的数据也会跟着更新（或者说 Model层里的数据和View层上的数据只有有一方变化，另一方随之改变），对应指令 v-model：

核心是采用数据劫持结合发布者订阅者模式，通过Object.defineProperty()对每个属性的get和set进行拦截。在数据发生变化的时候发布消息给订阅者，触发相应的监听

Object.defineProperty()有三个参数，第一个是属性所在的对象。第二个是要操作的属性，第三个是被操作的属性的特性，是一个对象{}，一般是两个get:读取属性时触发，set写入属性时触发。

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

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

7、Vue中样式绑定的几种方式？

（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()"，括号不能去掉,返回以上三种绑定模式都可以生效

8. v-if与v-show的作用和区别

都用于切换相应元素的展示

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

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

9. 手写创建组件的几种方式

Vue.component("temp2", {

template: '#temp2'

})

</template>

10. 父组件如何给子组件传值，举例说明，写出核心代码即可

父组件中：<sonComponentName sonAcceptValueName="10" />

子组件中：props:{

sonAcceptValueName:{

type:[Number,String,Object]/String

default:10

}

11. 子组件如何给父组件传值，举例说明，写出核心代码即可父组件

父组件中：<sonComponentName @fromSonEventType="fatherComponentFunctionName()" />

父组件中：mehods:{

fatherComponentFunctionName(valueFromSon){

console.log(valueFromSon)

}

子组件中：<button @click="sendValueFunctonName()">发送数据</button>

子组件中：methods:{

sendValueFunctonName(){

this.$emit("fromSonEventType",valueFromSon)

}

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

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

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

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

13. vue路由的基本使用步骤配合代码说明

1、引入

// 2、创建路由

const router = new VueRouter({

// 3 、.创建组件和路由映射关系

routes: [

{

path: '/',

component: father,

]

})

4、创建的路由需要和vue实例关联一下

5、路由到的组件显示在哪个位置

14. 路由跳转如何实现，结合代码，两种方式（声明式和函数式）

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

<router-view />

methods:{

push(){

this.$router.push('/son1');

}

15. 路由传参的两种方式，如何获取参数，结合代码

route:[
{
path:'/',
component:sonComponentName,
redirect:'/son1'
},
{
path:'/son2',
name:'son2',
component:sonComponentName2
},
{
path:'/son1/:id',
name:'son1',
component:sonComponentName1
},
]
<router-link to="{path:'/son1' ,query:{ id:'10' }}" >跳转</router-link>
console.log(this.$route.query.id)
<router-link to="{name:'son1' ,params:{ id:'10' }}" >跳转</router-link>
console.log(this.$route.params.id)

16. $router和$route的区别

.$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vue构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。

$route是一个跳转的路由对象，每一个路由都会有一个$route对象，是一个局部的对象，可以获取对应的name，path，params，query等

17. Vue的生命周期有哪些？分别描述一下每个生命周期的特征，以及我们可以在这个生命周期中做些什么

八个生命周期函数：

beforeCreate: 创建之前，在这个阶段获取不到data上的数据，在这个阶段可以进行界面的重定向
created: 实例创建之后，在这个阶段可以获取到data上的数据了，这也是我们最早可以初始化数据的地方

beforeMount：界面挂载之前，已经获取到了要渲染模板，但是还没渲染到界面上
mounted：界面挂载之后，这个界面已经渲染好了，如果有一些组件初始化依赖于界面的话，需要在这个阶段进行初始化

beforeUpdate：更新之前， data已经更新，但是还没渲染到界面上。这里在界面更新之前，最后操作一下data。注意的是，不能在异步操作中修改data
updated: 更新之后，界面已经和data一致了。如果有些组件在dom更新之后需要重新渲染的话，可以在这里进行。

beforeDestroy: 界面销毁之前。清除定时器，监听的事件。
destroyed：界面销毁之后

18. 动画的过渡类名有哪些

.v-enter
.v-enter-active

.v-enter-to
.v-leave

.v-leave-active
.v-leave-to

【transition标签上有name的把v替换为对应的name】

19. 代码实现v-for渲染数据：为什么设置key？

[{name:”张三”,age:”18”,sex:”男”},

{name:”李四”,age:”19”,sex:”女”},

{name:”王五”,age:”20”,sex:”男”}]

data(){
personList:[{name:”张三”,age:”18”,sex:”男”},
{name:”李四”,age:”19”,sex:”女”},
{name:”王五”,age:”20”,sex:”男”}]
}

        <ul>
          <li v-for="(item,index) in person" :key=index>
                姓名：{{item.name}} 
                年龄：{{item.age}} 
                性别:{{item.sex}} 
          </li>
        </ul>

提高重排效率

20. 如何进行路由重定向，如何设置激活路由的样式

 const router = new VueRouter({
            // 3. 配置组件和地址的映射关系
            routes: [
                {
                    path: '/',
                    // 把当前地址，重定向指定地址
                    redirect: "/login"
                },
                {
                    path: "/login",
                    component: login
                },
            ]
        })

被匹配到的路由的router-link上会有个router-link-active的样式，我们通过设置这个样式设置激活标签的样式

在实例化路由的时候配置 linkActiveClass

21. 如何通过vue-cli创建项目，如何运行，创建好的项目有哪些默认文件或文件夹，分别什么作用

编程题

assets ：静态资源， router:路由，view：界面级别的组件,component：小组件，store：商店，储存信息，

public：静态资源，App.vue：根组件， main.js：入口函数,Package.json：安装依赖的版本信息，node-modules:依赖。

22. 手写实现定义全局过滤器实现日期格式化，实现传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") }}

23. 分别用绑定方法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(){
            //         console.log(66666);
            //         this.allName = this.firstName + "-" + this.lastName
            //     },
            //     "lastName":function(){
            //         console.log(66666);
            //         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){
                        // console.log(666);
                        // console.log(newVal);
                        this.firstName = newVal.split("-")[0]
                        this.lastName = newVal.split("-")[1]
                    }
                }
            }

24. 代码实现，父组件分别将名为header内容为“我是头部”和名为footer内容为“我是底部“插槽，填充到子组件

父组件
 <div id='app'>
        <!-- 使用时，当作标签使用 -->
        <login>
            <template v-slot:header>
                <div>
                    <h2>我是头部</h2>  
                </div>
            </template>
           
            <template  v-slot:footer>
                <div>
                    <h2>我是底部</h2>  
                </div>
            </template>
           普通插槽
    </div>

子组件：
 <template id="login">
        <div >
<!-- 起到占位符的作用 -->
            <slot></slot>
            <slot name='header'></slot>
            <button>这是登录注册组件</button>
            <slot name="footer"></slot>
        </div>
       
    </template>

25. 自定义指令实现v-color可以更改文字颜色样式

全局：
    // 全局定义 指令名，对象｛bind，inserted，update｝
    Vue.directive("color",{
        bind(el,binding){
            el.style.color = binding.value    
        },
        inserted(el){
        },
        update(el){
            console.log("更新")
        }  
    })

局部：
 
    let app = new Vue({
        el: "#app",
        data: {
            text:"文本",
           
        },
        methods: {
        },
        directives: {
            color(el, binding) {
                el.style.color = binding.value ;
            },
       inserted(el){
        },
        update(el){
            console.log("更新")
        }  
         
        }
    })

wz990223

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue阶段测试

1、什么是Vue.js？框架和库的区别Vue.js是一种前端渐进式框架框架：是一种完整的解决方案；对项目侵入性较大，项目如果需要更换框架，则需要重新构架整个项目。例如node中的express库（插件）：提供了某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。例如：从jquery切换到Zepto2、Mvvm和mvc的区别MVC是后端的分层开发概念；MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层分成了三部分
复制链接

扫一扫