初始VUE 生命周期

最新推荐文章于 2024-02-23 17:22:22 发布
最新推荐文章于 2024-02-23 17:22:22 发布
阅读量164 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_index_q_p_z_/article/details/80339967
版权 
自己理解的生命周期以及对DOM的操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>理解生命周期</title>
</head>
<body>
<div id="app">
    <input type="type" v-model="num">
    <p id="p1">创建前--颜色的变化</p>
    <p id="p11">创建后--颜色的变化</p>
    <p id="p2">载入前--颜色的变化</p>
    <p id="p21">载入后--颜色的变化</p>
    <p id="p3">更新前--颜色的变化</p>
    <p id="p31">更新后--颜色的变化</p>
    <p id="p4">销毁前--颜色的变化</p>
    <p id="p41">销毁后--颜色的变化</p>
    <button @click="add">add</button>
    <button @click="del">del</button >
</div>
</body>
<script src="../vue.js"></script>
<script charset="UTF-8" type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
          add:function () {
              this.num++;
          },
          del:function () {
              this.num = 0;
          }
        },
        beforeCreate:function () {
            console.log("beforeCreate=》创建前");
            console.log(this.num,"num");
            console.log(this.$el,"el的值");
            document.getElementById("p1").style.color="red";
        },
        created:function () {
            console.log("created=》创建后");
            console.log(this.num,"num");
            console.log(this.$el,"el的值");
            document.getElementById("p11").style.color ="red";
        },
        beforeMount:function () {
            console.log("beforeMount=》载入前");
            console.log(this.num,"num");
            console.log(this.$el,"el的值");
            document.getElementById("p2").style.color ="red";
        },
        mounted:function () {
            console.log("mounted=》载入后");
            console.log(this.num,"num");
            console.log(this.$el,"el的值");
            document.getElementById("p21").style.color ="red";
        },
        beforeUpdate:function () {
            console.log("beforeUpdate=》更新前");
            console.log(this.num,"num");
            console.log(this.$el,"el的值");
            document.getElementById("p3").style.color ="red";
        },
        updated:function () {
            console.log("updated=》更新后");
            console.log(this.num,"num");
            console.log(this.$el,"el的值");
            document.getElementById("p31").style.color ="red";
        },
        beforeDestroy:function () {
            console.log("beforeDestroy=》销毁前");
            console.log(this.num,"num");
            console.log(this.$el,"el的值");
            document.getElementById("p4").style.color ="red";
        },
        destroyed:function () {
            console.log("destroyed=》销毁后");
            console.log(this.num,"num");
            console.log(this.$el,"el的值");
            document.getElementById("p41").style.color ="red";
        }
    })
</script>
</html>
最初加载效果

当点击 add 按钮 加载效果



a_index_obj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue生命周期详解
Phoneix的博客
06-25 9989
目录 前言： 一、生命周期流程图详解 1.beforeCreate、Created 2.编辑模板过程 3.beforeMount、Mounted 4.beforeUpdate、Updated 5.beforeDestroy、Destroyed 二、生命周期代码 1.父子组件加载生命周期 2.父子组件更新生命周期 3.父子组件销毁生命周期 前言： 1、什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新
vue生命周期总结
weixin_42823014的博客
03-30 2万+
一、vue生命周期 vue生命周期是什么？ Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、dest
VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染
a8892117的博客
04-15 944
VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章，自己也根据它进行搭建环境。 文章地址：vue.js2.0实战(1):搭建开发环境及构建项目 接下来对初始的框架进行讲解，只讲index.html是如何被渲染出来的。 一、启动项目 第一步：cmd进入项目文件里，运行npm run d...
Vue的生命周期的详解
热门推荐
weixin_45791692的博客
04-11 14万+
Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识，以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数，分别为： beforeCreate( 创建前
Vue 生命周期
weixin_47227886的博客
04-14 3万+
主要阶段 挂载（初始化相关属性） ① beforeCreate ② created ③ beforeMount ④ mounted 更新（元素或组件的变更操作） ① beforeUpdate ② updated 销毁（销毁相关属性） ① beforeDestroy ② destroyed Vue实例的产生过程 ① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。...
超详细vue生命周期解析(详解)
weixin_42707287的博客
12-25 12万+
vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先，生命周期是个啥？ 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的.
Vue生命周期函数
weixin_43613849的博客
05-29 1万+
1、常用生命周期函数 生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候，也就是我们调用 new Vue() 这句话的时候，vue会帮助我们去创建一个实例，创建过程其实并不像我们想的那么简单，他要经过很多的步骤 Init(Events & Lifecycle):首先他会去初始化事件和生命周期相关的内容,当最基础的初始化完成的时候，在这个时间点上，vue会自动的帮我去之行一个函数，这个函数就是beforeCreate 1、beforeCreate be..
Vue学习 — 详解Vue生命周期
小绵杨
03-19 881
目录一、前言二、生命周期三、双向绑定 一、前言 二、生命周期 三、双向绑定
Vue生命周期函数详解
wen110898的博客
09-28 1万+
前言： 相信很多前端的小伙伴们接触到了Vue都是先学会使用再去理解的吧，想要更好的理解 Vue，那么Vue的生命周期函数一定要理解！ 下图是我对Vue生命周期函数图解的详细解释，应该很通俗易懂了吧，不懂也没关系，下面我会附上代码帮助小伙伴们更好地理解。 首先我们要知道，Vue生命周期函数分为三个阶段： 创建阶段 运行阶段 销毁阶段 1.创建阶段： 创建Vue的实例对象，初始化。这时候该对象只有默认的一些周期函数和默认事件，其他东西还未创建。 实例初始化阶段主要有两个函数： beforeCreate
详解Vue生命周期钩子
qq_56427830的博客
02-23 818
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
浅析Vue 生命周期
08-27
这是因为在实例初始化阶段， Vue 需要读取所有的生命周期函数，以便在后续的生命周期中执行相应的操作。 beforeCreate阶段 在beforeCreate阶段，Vue实例已经读取了所有的生命周期函数，但还没有执行任何钩子函数。...
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
Vue生命周期示例详解
08-30
在深入理解Vue生命周期之前，我们需要了解一些基本概念，如组件、数据绑定和Vue实例。 Vue生命周期涉及到的主要阶段包括： 1. **beforeCreate**：在实例被创建后，但数据观测（data observer）和属性及方法...
vue组件生命周期详解
08-28
Vue组件生命周期详解 Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 ...
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
vue3 初始生命周期
08-27
在Vue 3中，初始生命周期函数是 `beforeCreate` 和 `created`。 1. `beforeCreate`：在实例初始化之后，数据观测和事件配置之前被调用。此时，实例已经完成了部分初始化，但是还没有初始化完全。这个阶段不会访问到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值