• 【Vue】组件化和声明周期函数

    1. 组件化

    组件化就是指一个后台我们将它的各个部分拆分成各个组件，比如 csdn 的上边栏、右侧广告区等都可以是组件，组件可以复用。Vue 的一个好处就是组件化。

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
head>
<body>
   
    <div  id="app">
        <button v-on:click="num++">觉得wanqing好看就点一下吧，共有 {{num}} 人觉得我好看button>

        <h1>使用全局组件h1>
        <counter>counter>

        <h1>使用局部组件h1>
        <button-counter>button-counter>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>


    
    <script>

        // 全局注册一个组件
        Vue.component("counter",{
            template: ``,
            data(){
                return{
                    num : 1
                }
            }
        })

        //局部声明一个组件
        const buttonCounter = {
                        template: ``,
            data(){
                return{
                    num : 1
                }
            }
        }

        let vm = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            components:{ // 在 Vue 示例中注册局部组件
                'button-counter' : buttonCounter
            }
        });

    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    2. Vue 生命周期钩子函数

    在这里插入图片描述

    • beforeCreate ： 创建之前，数据模型未加载，方法也未加载
    • created: 创建完成，数据模型已加载，方法也加载，页面模板也加载成功，但是模板还没渲染（即 data 还没渲染到模板中，也就是说插值表达式还未解析）
      —— 决定渲染那个模板 ： Vue 实例 和 tempate 进行挂载
    • beforeMount: 挂载之前，模板还没渲染，和上面 created 状态一样
    • mount: 挂载完成，此时 data 已经渲染到模板中
    • beforeUpdate: 更新之前，即 data 数据模型已经修改成功，但是此时还没将 修改好的 data 渲染到页面中
    • update: 更新结束，将更新好的数据模型放入页面模板中

    3. Vue 脚手架进行模块化开发

    使用 Vue 脚手架进行模块化开发可以实现单页应用，其他所有功能都是通过引用 vue 的组件

    见文章 https://blog.csdn.net/liuwanqing233333/article/details/127582713

  • 相关阅读:
    ACM. HJ89 24点运算 ●●●
    EB和Varuxn的单字聊天
    Hive性能调优行之有效的优化方法
    hvv蓝初 看完可去 面试可用 面经
    IO流框架，缓冲流
    记录一次 添加脚本的记录+改错记录
    学习ITIL4又给数字人带来哪些优势
    Postman可以集成到CI，CD流水线中做自动化接口测试吗？
    139 单词拆分 140 单词拆分II
    linux12企业实战 -- 56 zabbix常规监控错误汇总
  • 原文地址：https://blog.csdn.net/liuwanqing233333/article/details/128007816