vue技术

最新推荐文章于 2023-05-29 16:08:22 发布
最新推荐文章于 2023-05-29 16:08:22 发布
阅读量561 收藏
点赞数
分类专栏： 笔记 学习 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53950248/article/details/122048446
版权

目录

声明周期

引出生命周期

代码实现

运行效果

 分析生命周期

代码实现

运行效果

更新流程

​ 

 代码实现

运行效果

 销毁过程

代码实现

总结

 代码实现

运行效果

声明周期

引出生命周期

生命周期:

1.又名:声明周期回调函数、声明周期函数、生命周期钩子

2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

4.生命周期函数中的this指向是vm或组件实例对象

代码实现

<!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>引出生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-if="a">你好啊</h2>
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            a:false,
            opacity:1
        },
        methods:{
           /* change(){
                console.log('开启了一个定时器')
               setInterval(()=>{
               this.opacity-=0.01
               if(vm.opacity<=0)vm.opacity=1
                },16)
            }*/
        },
        //Vue完成模板的解析并把真实的DOM元素放入页面后(挂载完毕)调用mounted
        mounted(){
            console.log('mounted',this)
            setInterval(()=>{
             this.opacity-=0.01
             if(this.opacity<=0)this.opacity=1
     },16)
        },
    })
    //通过外部的定时器实现(不推荐)
    //     setInterval(()=>{
    //         vm.opacity-=0.01
    //         if(vm.opacity<=0)vm.opacity=1
    // },16)
</script>
</html>

运行效果

 分析生命周期

代码实现

<!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>分析生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root":x="n">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="add">点我n+1</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',       
        data:{
            n:1
        },
        mathods:{
            add(){
                this.n++
            }
        },
        beforeCreate(){
            console.log('beforeCreate')
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforeMount')
            console.log(this)
            document.querySelector('h2').innerText='哈哈'
        },
    })
</script>
</html>

运行效果

更新流程

 

 代码实现

<!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>分析生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root":x="n">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="add">点我n+1</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',       
        data:{
            n:1
        },
        mathods:{
            add(){
                this.n++
            }
        },
        beforeCreate(){
            console.log('beforeCreate')
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforeMount')
        },
        mounted(){
            console.log('beforeUpdate')
        },
        updated(){
            console.log('update')
            console.log(this.n)
            debugger;
        }
    })
</script>
</html>

运行效果

 销毁过程

代码实现

<!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>分析生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root":x="n">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',       
        data:{
            n:1
        },
        mathods:{
            add(){
                console.log('add')
                this.n++
            },
            bye(){
                console.log('bye')
                this.$destroy()
            }
        },
        beforeCreate(){
            console.log('beforeCreate')
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforeMount')
        },
        mounted(){
            console.log('beforeUpdate')
        },
        updated(){
            console.log('update')
        },
        beforeDestroy(){
            console.log('beforeDestroy')
            this.add()
        },
        destroyed(){
            console.log('destroyed')
        }
    })
</script>
</html>

总结

 

 常用的生命周期钩子:

1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]

2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息

2.销毁后自定义事件会失效。但原生DOM事件依然有效

3.一般不会再beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了

 代码实现

<!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>引出生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <button @click="opacity=1">透明度设置为1</button>
        <button @click="stop">点我停止变换</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            opacity:1
        },
        methods:{
           stop(){
             //  clearInterval(this.timer)
             this.$destroy()
           }
        },
        //Vue完成模板的解析并把真实的DOM元素放入页面后(挂载完毕)调用mounted
        mounted(){
            console.log('mounted',this)
            this.timer=setInterval(()=>{
                console.log('setInterval')
             this.opacity-=0.01
             if(this.opacity<=0)this.opacity=1
         },16)
        },
        beforeDestroy(){
            console.log('vm即将驾鹤西游了')
            clearInterval(this.timer)
        }
    })
</script>
</html>

运行效果

 

画个圈圈诅咒你 yebo
关注
专栏目录
前端网页技术之 Vue
cgblpx的博客
08-02 5万+
文章目录VueVue概念同类产品官网特点渐进式框架入门案例.html改造入门案例.htmlMVVM框架基础语法运算符 operator方法 methodsVue解析数据三种data值的写法高级用法：v-命令指令集双向绑定 v-model闪现 v-cloak判断 v-if循环 v-for事件 v-on绑定 v-bind小结Vue组件概述使用测试Vue路由概述使用步骤入门案例Vue的AjaxAjax概述Ajax原理axios测试常见错误Vue的生命周期lifecycle概述测试扩展：观察者设计模式HBuilde
好文推荐：vue技术内幕
liuhao9999的博客
02-24 1247
vue技术内幕 http://caibaojian.com/vue-design/art/
Vue3学习笔记-06
JZYCLL的博客
07-22 189
Vue3学习笔记-06 一、内置指令 ​ 接着Vue3学习笔记-05 4. v-cloak 指令 当网速过慢的时候，可以让未经过解析的模板不会渲染在页面上 <style> [v-cloak]{ display:none; } </style> <div id="root"> <h2 v-cloak>{{name}}</h2> </div> <script> new Vue({
Vue知识点（3）
woai_mihoutao的博客
07-07 269
Vue知识
Vue技术栈
山山而川~
01-20 3505
vue技术栈学习
vue笔记一：Vue技术栈
dream_summer的博客
05-13 9646
目录vue笔记一：Vue技术栈1、node.js2、 npm3、ES64、Babel5、项目构建工具vue-cli6、路由vue-router7、状态管理vuex8、http请求⼯具axios9、文件打包工具webpack10、Vue.jsVue实例vue生命周期以及不同生命周期下的应用 vue笔记一：Vue技术栈 1、node.js 如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment)，这就是node.js。 node.j
【Vue】笔记一：vue技术栈详解
weixin_55846296的博客
05-29 2403
Nuxt.js是一个基于Vue.js的轻量级应用框架，可用于创建SPA、静态站点或服务端渲染站点，它提供了很多快捷方法和配置项来帮助开发者使用Vue.js开发Web应用，还提供了预渲染、处理异步数据、服务器端渲染等功能。综上所述，Vue技术栈包括Vue框架、Vue Router、Vuex、Axios、Element UI、Nuxt.js和TypeScript等技术，这些技术可以帮助我们快速构建高性能、美观实用的Web应用。Vue技术栈主要包含Vue框架本身以及一些常用的Vue生态技术，下面一一进行介绍。
实战Vue：基于Vue的移动端购物商城
热门推荐
KaiSarH
11-27 6万+
基于Vue的移动端购物商城
Vue 技术栈(全家桶)课件笔记
zhaotian2017的博客
03-24 3964
Vue 技术栈(全家桶) 尚硅谷前端研究院 第 1 章：Vue 核心 1.1. Vue 简介 1.1.1. 官网 1. 英文官网: https://vuejs.org/ 2. 中文官网: https://cn.vuejs.org/ 1.1.2. 介绍与描述 1. 动态构建用户界面的渐进式 JavaScript 框架 2. 作者: 尤雨溪 1.1.3. Vue 的特点 1. 遵循 MVVM 模式 2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发3
Vue详解
yinuo_chao的博客
05-19 1万+
Vue详解 Vue.js目前最火的一个前端框架。点击跳转Vue详解视频 在谷底也要开花！ P00 前言：回顾SSM阶段 P01 前端核心分析 Vue：前端体系、前后端分离 1、概述 Vue（读音 /vju`/，类似于 view）是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目
基于微信小程序+springboot+vue技术构建的商城平台
04-28
基于 微信小程序 + springboot + vue 技术构建 ，支持单店铺，多店铺入驻的商城平台。项目包含 微信小程序，管理后台。基于java后台语言，已功能闭环，且达到商用标准的一套项目体系。 基于 微信小程序 + ...
基于Vue技术实现的购物网站（含设计报告）
06-30
本项目适用于课程设计，利用Vue实现的一个模仿antd官网的购物网站。项目功能如下所示。 1）前端功能 商品分类展示; 商品详情 商品搜索 订单详情(购物车) 登录与注册 注意：注册用户可以购买商品，非注册用户仅可以...
Vue技术七大问题避坑指南+编程技术开发+编程问题+编程案例
最新发布
06-05
Vue技术七大问题避坑指南+编程技术开发+编程问题+编程案例Vue技术七大问题避坑指南+编程技术开发+编程问题+编程案例Vue技术七大问题避坑指南+编程技术开发+编程问题+编程案例Vue技术七大问题避坑指南+编程技术开发+...
利用Vue技术实现音乐播放器
04-03
1、利用Vue技术，实现前端音乐播放器 2、功能： a、能够根据人名和歌曲进行搜索。 b、能够根据搜索到的歌曲进行播放。 c、能够显示该歌曲的许多热搜评论。 d、能够将有mv视屏的歌曲进行区分，并且可以点击播放...
Java数据结构与算法
画个圈圈诅咒你 的博客
12-19 1139
顺序存储二叉树 概念 基本说明 从数据存储来看，数组存储方式和树的存储方式可以相互转换，即数组可以转换成树，树也可以转换成数组，看右面的示意图。 要求 1)右图的二叉树的结点，要求以数组的方式来存放arr:[1,2,3,4,5,6,6] 2)要求在遍历数组arr时，仍然可以以前序遍历，中序遍历和后序遍历的方式完成结点的遍历。 特点 1)顺序二叉树通常只考虑完全二叉树 2)第n个元素的左子节点为2*n+1 3)第n个元素的右子节点为2*n+2 4)第n个元素的父节点为(n-1)/2 5
基于Flask搭建个人网站
画个圈圈诅咒你 的博客
07-05 962
no
2021-04-15
画个圈圈诅咒你 的博客
04-18 893
前端HTML5-02 1、语义化标签（1）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值