VUE题目

最新推荐文章于 2024-12-10 17:16:14 发布

Winery_gao

最新推荐文章于 2024-12-10 17:16:14 发布

阅读量324

点赞数 2

分类专栏：技术文章标签： VUE 前端

本文链接：https://blog.youkuaiyun.com/qq_38772296/article/details/101064656

版权

技术专栏收录该内容

3 篇文章

订阅专栏

本文探讨了Vue.js的相关主题，包括组件间的值传递（父组件到子组件，子组件到父组件）、Vue的生命周期八个阶段及其应用、Vue的优势与不足、路由的声明式与编程式跳转、自定义组件的创建、按需加载的实现方法、MVVM模式的原理、v-model的使用以及自定义指令的钩子函数。内容详尽，覆盖了Vue开发中的关键知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE题目

1,组件传值

父组件与子组件传值

//父组件通过标签上面定义传值
<tempalte>
    <Main : obj = "data"></Main>
</template>

<script>
    //引入子组件
    import Main from "./Main"
    export default{
        name : "father",
        data(){
            return{
                data : "向子组件传值"
            }
        }
        //初始化组件
        components ： {
            Main
        }
    }
</script>

<template>
    <div>{{data}}</div>
</tempalte>

<script>
    export dafault{
        name : "son",
        props : ["data"]
    }
</script>

子组件向父组件传值

<template>
    <div v-on : click = "events"></div>
</template>

<script>
    //引入子组件
    import Main from "./Main"

    export default{
        method : {
            events : function(){
            }
        }
    }
</script>

<template>
    <div>{{data}}</div>
</tempalte>

<script>
    export dafault{
        name : "son",
        //接受父组件传值
        props : ["data"]
    }
</script>

2,vue生命周期的理解

总共分为8个阶段，创建前后，载入前后，更新前后，销毁前后

创建前后：在beforeCreate阶段，vue实例的挂载对象el和数据对象data都为underfined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有

载入前后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染

更新前后：当data变化时，会触发beforeUpdate和update方法

销毁前后：在执行destory方法后，对data的变化不会再触发周期函数，说明此时vue实例已经结婚粗了事件监听以及和dom的绑定，但是dom结构依然存在

3,vue的优缺点

优点
- 低耦合：视图可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变换的时候View也可以不变
- 可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
- 独立开发：开发人员可以专注与业务逻辑和数据的开发，设计人员可以专注与页面设计，使用Expression Blend可以很懂以设计页面并生成xml代码
- 页面并不好测试，但是现在测试可以针对ViewModel来写
缺点
- 暂无

4,路由跳转

声明式（标签跳转）：<router-link : to = "index">
编程式（js跳转）： router.push('index')

5,创建自己的组件

在components目录新建你的组件文件（indexPage.vue）,script一定要export default{}

在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’

注入到vue的子组件的components属性上面，components：{indexPage}

在template视图view中使用

6,vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure()来实现按需加载。将引入路由由import改为const

不进行页面按需加载引入方式：import home from '../../common/home.vue'

进行页面按需加载的引入方式： const home = r => require.ensure([],() => r(require('../../common/home.vue')))

7,MVVM模式

MVVM全称是Model-View-ViewModel；vue是以数据为驱动的，一旦创建dom和数据就保持同步，每当数据发生变化时，dom也会变化。DOMListeners和DataBindings是实现双向绑定的关键。DOMListeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；DataBindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。