前端小白的学习之路(Vue2 三)

已于 2024-04-11 14:20:22 修改
阅读量1.2k 收藏 14
点赞数 36
文章标签： 学习 vue.js vue
于 2024-04-10 22:28:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_245249828/article/details/137609847
版权

提示：学习vue2的第三天，笔记记录：生命周期，组件(注册，传值)

目录

一、生命周期

二、组件 

1.注册组件

1)全局注册

2)局部注册 

2.组件传值

1）父传子

2）子传父

3）兄弟传值

一、生命周期

在 Vue.js 2 中，每个组件实例都具有生命周期钩子函数，允许你在组件的不同阶段执行特定的操作。

  1. beforeCreate：在实例初始化之后，数据观测(data observer) 和事件配置之前被调用。在这个阶段，实例的选项属性还未被初始化。

  2. created：在实例创建完成后被立即调用。在这个阶段，实例已经完成了数据观测(data observer) 和属性的初始化，但是挂载还未开始，$el 属性还不存在。

  3. beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。

  4. mounted：在挂载完成后被调用，el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

  5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

  6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

  7. beforeDestroy：在实例销毁之前调用。在这个阶段，实例仍然完全可用。

  8. destroyed：在实例销毁之后调用。调用后，所有的事件监听器被移除，所有的子实例也被销毁

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    
</head>
<body>
    <div id="app">
        <h2>数字: <span>{{num}}</span></h2>
        <div ref="box">hello world</div>
        
    </div>
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>
        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        const vm = new Vue({
            //挂载容器
            el: "#app",
            // 设置数据
            data: {
                num: 0,
                timer: null
            },
            // 生命周期： 程序从创建到销毁的过程。注意回调函数先后顺序....
            // 钩子函数: 指的是回调函数，生命周期的钩子函数（在vue@2中有8个生命周期的钩子函数）
            // 1） 创建阶段
            // 创建之前执行的钩子函数
            beforeCreate(){
                console.log("1:",this.num);//undefine
            },
            // 创建后执行的钩子函数  (初始化数据)
            created(){
                console.log("2:",this.num);//0
                console.log(this.$refs.box);// undefined
                // 初始化
                //创建一个定时器观察update(数据更新)钩子函数的执行
                this.timer = setInterval(()=> {
                    if(this.num == 5) {
                       clearInterval(this.timer);
                       return ;
                    }
                    ++ this.num;
                },1000)
            },

            // 2）挂载阶段
            // 挂载之前执行的钩子函数
            beforeMount(){
                console.log("3:",this.num);//0
                console.log(this.$refs.box);// undefined
            },
            // 挂载后执行的钩子函数 (DOM操作)
            mounted(){
                console.log("4:",this.num);//0
                console.log(this.$refs.box);// <div>hello world</div>
                // 为了让dom操作更加稳定，可以在此处执行$nextTick回调函数
                // 为了减少报错，所以调用$nextTick回调函数
                 仅在整个视图都被渲染之后才会运行的代码
                this.$nextTick(()=>{
                    // 判断程序中是否存在这个标签
                    if(this.$refs.box){
                        // 进行dom操作
                        this.$refs.box.style.color = "red";
                        this.$refs.box.style.fontSize = "20px";
                    }                   
                })
            },

            // 3）更新阶段
            // 要数据发生改变才执行的回调函数
            beforeUpdate(){
                console.log("5：",this.num);//1 ~ 5
            },
            updated(){
                console.log("6：",this.num);//1 ~ 5
            },

            // 4）销毁阶段
            // 程序不存在了，或者以后卸载组件，（显示|隐藏 v-if="false"）
            beforeDestroy(){
                console.log("7：",this.num);// 0
            },
            destroyed(){
                console.log("8：",this.num);// 0
            }

        })

        // 为了看得见销毁阶段的钩子函数被执行，可以调用销毁方法
        // vm.$destroy();

    </script>
</body>
</html>

二、组件 

组件是可复用的 Vue 实例，它可以封装特定的功能和界面，并可以在应用程序中多次使用。组件使得代码更加模块化、可维护，并且提高了代码的复用性。

1.注册组件

组件只有被注册才能使用，在哪注册就只能在哪里使用

1)全局注册

通过Vue中的component方法注册组件，此方法注册的组件在任何地方都能使用

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <style></style>
</head>

<body>

    <div id="app">
        <el-button></el-button>
    </div>

    <hr>

    <div id="app2">
        <el-button></el-button>
    </div>

    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>

        // 一） 全局组件
        // 1. 定义按钮组件 (template选项在vue2版本中必须有根节点)
        const ElButton = {
            // 设置数据
            data() {
                return {
                    message: "这是一个按钮123"
                }
            },
            // 渲染模板
            template: `
                <div>
                    <div>{{message}}</div>
                   <button @click="foo" style="padding: 10px 20px; border: 0; background-color: skyblue; color: white;">
                      点击按钮
                    </button>   
                </div>
            `,
            // 设置方法
            methods: {
                // 提示
                foo() {
                    alert("您好，触发事件。。。")
                }
            }
        }
        // 2. 注册组件(此处表示全局注册)
        Vue.component("el-button", ElButton);



        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        // 创建vue实例
        new Vue({
            //挂载容器
            el: "#app",
        })
        new Vue({
            //挂载容器
            el: "#app2",
        })
    </script>
</body>

</html>

2)局部注册 

通过Vue实例或某组件中的components对象注册组件，此方法注册的组件只能在注册的地方使用

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <style></style>
</head>

<body>

    <div id="app">
        <!-- <ElSearch></ElSearch> 错误的，驼峰注册，（-）使用 -->
        <el-search></el-search>
    </div>

    <hr>

    <div id="app2">
        <!-- <el-search></el-search> 错误的，该组件没有在app2中注册 -->
    </div>

    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>
        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        // 创建vue实例
        new Vue({
            //挂载容器
            el: "#app",
            // 注册组件（此处表示局部注册）
            components: {
                // 此处注册组件名称采用驼峰命名“ElSearch”，在使用的时候需要改成 “el-search”
                // "el-search": {},
                "ElSearch": {
                    data() {
                        return {

                        }
                    },
                    template: `
                        <div>
                            <input type="text" placeholder="请输入关键字" style="width: 90%;height: 40px;">    
                        </div>
                    `
                },
            }
        })
        new Vue({
            //挂载容器
            el: "#app2",
        })
    </script>
</body>

</html>

注册组件注意事项：

            1） 采用驼峰命名法注册组件名称时“ElSearch”，使用组件时需要改用短横线“el-search”

            2） 不能使用html文档内置的标签名称作为组件名称例如： div header footer nav

            3） 组件中的data一个函数，并且返回一个对象

            4） template选项需要有根节点（在vue@2版本）

            5） 像属性计算、侦听，过滤，生命周期的钩子和vue实例的写法一样

2.组件传值

在vue中允许组件嵌套组件但不宜嵌套过多，其中就涉及到不同组件间的数据交互的问题。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <style></style>
</head>

<body>
    <div id="app">
        <element-parent></element-parent>
        <!-- <element-child></element-child> 错误的 -->
    </div>
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>


        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        //定义孙组件
        const ElementGrandson = {
            template: `
                <div>
                    <h4>孙组件</h4>
                </div>
            `,
        }

        // 定义子组件
        const ElementChild = {
            template: `
                <div>
                    <h3>子组件</h3>
                    <element-grandson></element-grandson>    
                </div>
            `,
            components: {
                ElementGrandson
            }
        }
        // 定义父组件
        const ElementParent = {
            template: `
                <div>
                    <h2>父组件</h2>
                    <element-child></element-child>
                </div>
            `,
            // 在父组件中注册子组件
            components: {
                ElementChild
            }
        }
        


        // vue实例对象
        new Vue({
            //挂载容器
            el: "#app",
            // 在vue实例中注册父组件
            components: {
                ElementParent
            }
        })
    </script>
</body>

</html>

1）父传子

因为组件之间不可以直接通信，所以父组件传值给子组件，

 需要在子组件中自定义属性，在props这个选项中自定义

在父组件的template模板中使用子组件时动态绑定属性

例如： <element-child v-bind:xxx="message"></element-child>

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <style></style>
</head>

<body>
    <div id="app">
        <element-parent></element-parent>
        <!-- <element-child></element-child> 错误的 -->
    </div>
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>


        //禁止控制台输出日志信息
        Vue.config.productionTip = false;

        // 定义子组件
        const ElementChild = {
            // 父组件传值给子组件，需要在子组件中自定义属性
            // 通过在props选项中自定义属性接收父组件传递的数据
            // props: ['xxx'],
            props: {
                xxx: {
                    default: "默认值",
                    type: [String,Number]
                },
                xxx2:{
                    default:'',
                    type: [String,Number]
                }
            },
            template: `
                <div>
                    <h3>子组件</h3>
                    <p>{{xxx}}</p>
                    <p>{{xxx2}}</p>
                </div>
            `
        }
        // 定义父组件
        const ElementParent = {
            // 设置数据
            data(){
                return {
                    message: "这是父组件的数据",
                    message2: "这是父组件的第二条数据"
                }
            },
            template: `
                <div>
                    <h2>父组件</h2>
                    <element-child v-bind:xxx="message"></element-child>
                    <element-child :xxx="100"></element-child>
                    <element-child :xxx="message" :xxx2="message2"></element-child>
                    <element-child></element-child>
                </div>
            `,
            // 在父组件中注册子组件
            components: {
                ElementChild
            }
        }


        // vue实例对象
        new Vue({
            //挂载容器
            el: "#app",
            // 在vue实例中注册父组件
            components: {
                ElementParent
            }
        })

    </script>
</body>

</html>

2）子传父

传值过程中，需要在子组件中自定义事件（行为），在methods中写方法， this.$emit("child-num", {cnum: this.num})

（调用this.$emit('第一个参数是在父组件中@on监听的事件名','第二个参数(在父组件中接受子组件参数的参数名):第三个参数(需要向父组件传递的数据)

  在父组件的模板中，定义一个方法用于接受子组件的数据并在子组件中绑定监听事件，例如： <element-child @child-num="jieshou"></element-child>就是也需要在父组件中写方法，接收子组件的数据。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <style></style>
</head>

<body>
    <div id="app">
        <element-parent></element-parent>
    </div>
    <script src="./libs/vue@2.7.16/vue.js"></script>
    <script>

        // 子组件传值给父组件属于负向传值，需要使用事件行为方可传递数据给父组件

        //禁止控制台输出日志信息
        Vue.config.productionTip = false;

        // 定义子组件
        const ElementChild = {
            data(){
                return {
                    num: 100
                }
            },
            template: `
                <div>
                    <h3>子组件</h3>
                    <button @click="add">发送数据</button>
                </div>
            `,
            methods: {
                add(){
                    // 自定义行为
                    // 参数1：在父组件中@on监听的事件名， 第二个参数(在父组件中接受子组件参数的参数名):第三个参数(需要向父组件传递的数据)
                    this.num --;
                    this.$emit("child-num", {cnum: this.num})
                }
            }
        }
        // 定义父组件
        const ElementParent = {
            data(){
                return {
                    num: 0
                }
            },
            template: `
                <div>
                    <h2>父组件</h2>
                    <p v-if="num!=0">{{num}}</p>
                    <element-child @child-num="jieshou"></element-child>
                </div>
            `,
            // 在父组件中注册子组件
            components: {
                ElementChild
            },
            // 编写方法
            methods: {
                // 自定义方法接受子组件的数据
                jieshou(data){
                    // console.log(data)
                    // 获取子组件传递的数据
                    this.num = data.cnum;
                }
            }
        }


        // vue实例对象
        new Vue({
            //挂载容器
            el: "#app",
            // 在vue实例中注册父组件
            components: {
                ElementParent
            }
        })


    </script>
</body>

</html>

3）兄弟传值

兄弟传值需要定义一个新的vue实例或通过同一个父组件来共享事件。通过$emit和$on来传数据。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
    <style>
        #app > div {
            padding: 20px;
            border: 1px solid #000;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
       <comp-a></comp-a>
       <comp-b></comp-b>

       
    </div>
    <script src="../libs/vue@2.7.16/vue.js"></script>
    <script>

        // 创建vue实例作为通信的桥梁（这种有响应式）
        const bridge = new Vue();

        // 并列关系组件
        const CompA = {
            template: `
            <div>
                <h3>组件A</h3>
                <button @click="senda">数字自增</button>
            </div>
            `,
            data(){
                return {
                    num: 100
                }
            },
            methods: {
                 senda(){
                    this.num ++;
                    let value = this.num;
                    bridge.$emit('xxx', value)
                 },
            },
            created(){
                // 发送数据
                setTimeout(()=>{
                    this.senda();
                },0)
            }
        }
        const CompB = {
            template: `
                <div>
                    <h3>组件B</h3>
                    <p>{{num}}</p>
                </div>

            `,
            data(){
                return {
                    num: 0
                }
            },
            created(){
                // 监听组件A的事件且接收组件A的数据
                bridge.$on("xxx",(value)=>{
                    this.num = value;
                })
            }
        }

        //禁止控制台输出日志信息
        Vue.config.productionTip = false;
        new Vue({
            //挂载容器
            el: "#app",
            components: { CompA , CompB },


        })
    </script>
</body>
</html>

吃清心的椰羊
关注
前端新手小白的Vue3入坑指南
xingyu_qie的专栏
06-21 1万+
昨天有同学说想暑假在家学一学Vue3，问我有没有什么好的文档，我给他找了一些，然后顺带着，自己也写一篇吧，希望可以给新手小白们一些指引，Vue3欢迎你。
详细前端新手小白的Vue3入坑指南
weixin_65644264的博客
06-24 2237
学习 Vue 3 是一个循序渐进的过程，通过理解基础知识，实践项目，并不断探索和学习，你将逐步掌握这一强大的前端框架。祝你学习愉快！
前端小白的学习之路(Vue2 四)
weixin_245249828的博客
04-11 1258
学习vue2的第四天，笔记记录：混入(mixins),插槽(slot),过渡与动画(transition)
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
热门推荐
m0_67844671的博客
09-28 2万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
前端小白的学习之路(Vue2 二)
weixin_245249828的博客
04-09 1026
学习vue2的第二天，笔记记录：自定义指令，事件修饰符，属性计算，属性监听，属性过滤
零基础前端Vue的小白学习路——初识HTML、CSS、JS、ES6技术
qq_36215279的博客
07-06 607
HTML5继承了HTML的部分特征，添加了许多心得语法特征，如语义特性，本地存储特性、设备兼容特性、连接特性、网页多媒体特性等。CSS3是CSS2的进阶，增加了许多新的属性，功能模块化划分，浏览器兼容性较CSS2差一点。在前辈为我指出的需要的技术学习路线中，HTML，CSS，JS是地基，Vue、Node.js则是更高阶的应用技术。早期前端主要是开发网页，在后续大前端技术的背景之下，更加生动形象、交互感更强的小程序、APP开发、数据可视化系统、服务器（客户端）程序也能由前端技术实现。二、前端涉及的主要技术。
Vue3(小白学习路)
梦起晨
12-09 1136
Vue学习中遇到的一些问题
【前端新手小白】学习Javascript的【开源好项目】推荐
xingyu_qie的专栏
07-11 2万+
如果你是一位前端新手小白，如果你觉得自己的JS功底还有所欠缺，如果你觉得自己平时做的项目还不够丰富，如果你觉得自己遇到的场景还不够丰富。如果你想要一个练手的好项目，如果你想学习更多的场景，如果你想学习更多的公共方法，如果你想从新手小白中挣脱出来。那么我推荐的这个开源项目，你一定会需要的。我说的这个开源项目呢，是一个前端JS的公共方法库。无论是Vue项目，还是React项目，他都可以胜任。他是一个更多更丰富的公共方法集合。js-tool-big-box的github地址。
写给前端初学者的Vue入门教程
doomliu的博客
05-13 2298
一、web应用开发 Vue是一款优秀的web应用开发框架，使用它可以让我们开发web应用时候更加高效。在学习Vue之前需要先了解一下web应用开发。 什么是web应用？当我们开发web应用时候，我们在写什么？ 从用户角度，web应用是一个可以提供用户交互并呈现信息的软件。 用户在使用一个web应用的时候，可以通过点击、输入、滑动、语音等等与应用进行交互，控制应用。应用通过界面、音频方式给用户呈现信息，比如电商类应用，用户可以通过搜索和选择查看需要的商品信息；视频类应用，用户可以通过搜索和
小白初入前端之Vue.js的学习之路-vue学习第三弹.docx
12-27
Vue.js 是一款流行的前端JavaScript框架，专为构建用户界面而设计。在本文中，作者分享了自己学习Vue.js的过程，特别是关于Vue的一些基础指令和组件。以下是对这些内容的详细解释： 1. **Vue指令**： - **v-text**...
web前端--vue2技术+涵盖多个知识点+适合刚学习vue的小白使用，促进学习
07-14
Vue2 是一款强大的前端框架，尤其适合构建用户界面。这篇文档涵盖了多个Vue2的基础和进阶知识点，旨在帮助初学者高效地学习Vue2。以下是详细的知识点解析： 1. **Vue2核心** - `Vue.config.productionTip = false`...
Vue2学习笔记-前端开发
03-03
Vue2学习笔记-前端开发
前端Vue学习技术大纲以及学习文章
02-26
适合人群：想要学习前端Vue的小白，梳理复习知识的学习者 能学到什么：通过Vue CLI（命令行界面）工具可以快速创建和管理Vue.js项目。使用Vue CLI可以自动配置开发环境，并提供了许多实用的命令和工具，方便开发者...
基于Vue2+ElementUI的飞机订票系统web前端项目源码.zip
08-26
基于Vue2+ElementUI的飞机订票系统web前端项目源码.zip基于Vue2+ElementUI的飞机订票系统web前端项目源码.zip基于Vue2+ElementUI的飞机订票系统web前端项目源码.zip基于Vue2+ElementUI的飞机订票系统web前端项目源码...
正点原子学习笔记之汇编LED驱动实验
q1594的博客
10-10 480
为什么要写汇编需要用汇编初始化一些SOC外设使用汇编初始化DDR、I.MX6U不需要设置sp指针，一般指向DDR，设置好C语言运行环境。
从零开始学习PX4源码7(hello world)
最新发布
陌城烟雨
10-10 103
本节主要记录如何在PX4中创建一个应用程序hello world 的过程，具体可以参考官网hello sky的过程hello sky。
10.2学习
2401_87363162的博客
10-02 1185
​ Spring AOP就是基于动态代理的，如果要代理的对象，实现了某个接⼝，那么Spring AOP会使⽤JDKProxy，去创建代理对象，⽽对于没有实现接⼝的对象，就⽆法使⽤ JDK Proxy 去进⾏代理了，这时候Spring AOP会使⽤基于asm框架字节流的Cglib动态代理 ，这时候Spring AOP会使⽤ Cglib ⽣成⼀个被代理对象的⼦类来作为代理。每个线程中都有一个自己的ThreadLocalMap类对象，可以将线程自己的对象保持到其中，各管各的，线程可以正确的访问到自己的对象。
2024年网络安全进阶学习路径-2024年进阶学习指南
2401_85026965的博客
10-10 1176
网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。走安全行业的工程方向的，技术上面其实有很大的重叠性，抛开甲乙方、岗位名称、岗位职责等因素来看，作为学技术的，也根据以往我们给学员推荐就业和入职情况来看，只要好好掌握以下几种技术（网络协议与安全设备、Linux操作系统、Web服务部署/开发、主流渗透测试/安全工具、一门及以上的编程语言）中的2到3个，都可以较好的胜任工作需求。
小白怎么编写vue前端
09-14
对于初学者来说，开始编写Vue前端项目大致可以按照以下几个步骤进行： 1. **安装环境**： - 首先确保已安装Node.js和npm (Node Package Manager)。可以通过官方网站下载并安装。 - 使用命令行工具，如`npx create...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值