当前位置: 首页 > news >正文

vue学习day05-watch侦听器(监视器)、Vue生命周期和生命周期的四个阶段、、工程化开发和脚手架Vue cli

13、watch侦听器(监视器)

(1)作用:监视数据变化,执行一些业务逻辑或异步操作

(2)语法:

1)简写语法——简单数据类型,直接监视
Watch:{
数据属性名(newValue,oldValue){
一些业务逻辑或异步操作
},

‘对象·属性名’(newValue,oldValue){

一些业务逻辑或异步操作

}

}

②示例:

结果:

2)完整写法——添加额外配置项
①deep:true对复杂类型深度监视

②immediate:true初始化立刻执行一次handler方法

14、Vue生命周期和生命周期的四个阶段

(1)Vue生命周期

        1)概念:
        一个Vue实例从创建到销毁的整个过程。

(2)生命周期的四个阶段(创建、挂载、更新、销毁)

        1)创建阶段:将数据变为响应式数据。执行一次。在数据转化完成后可以发送初始化渲染     请求
        2)挂载阶段:渲染模版。执行一次。挂载完后,可以进行dom操作。
        3)更新阶段:数据修改,视图更新。可以执行多次。
        4)销毁阶段:销毁实例。

(3)Vue生命周期函数(钩子函数)

Vue生命周期过程中,会自动运行一些函数,被称为生命周期钩子,让开发者可以在特定的阶段运行自己的代码

        1)创建阶段:
                ①beforeCreate
                ②created:发送初始化渲染请求
        2)挂载阶段
                ①beforeMount
                ②mounted:操作dom
        3)更新阶段
                ①beforeUpdate
                ②updated
        4)销毁阶段
                ①before Destroy:释放除Vue以外的资源(清除定时器,延时器……)
                ②destroyed

(4)示例

代码:

结果:

15、工程化开发和脚手架Vue cli

(1)开发Vue的两种方式

        1)核心包传统开发模式:基于html/css/js文件,直接引入核心包,开发Vue。
        2)工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。

(2)概念

        Vue cli是Vue官方提供的一个全局命令工具,可以帮助我们快速创建一个标准化基础架子。(集成了webpack配置)

(3)好处

        1)开箱即用,0配置
        2)内置babel等工具
        3)标准化

(4)使用步骤

        1)全局安装(一次):yarn global add @vue/cli 或npm i @vue/cli -g
        2)查看Vue版本vue –version

        3)创建项目架子:vue create project-name(项目名-不能用中文)
                ①新建一个文件夹,右键打开“终端”

                ②创建vue项目架子(vue create 项目名)

回车:

                ③选择Vue2

回车:

(创建,需等待)

创建成功(自动产生一个vue-demo1文件):

(没产生,先刷新一下)

4)启动项目:yarn serve 或npm run serve(找package.json)
        ①进到创建的目录里,执行npm run serve

回车:

        ②在浏览器输入:“localhost:8080”,启动成功

(5)安装出现问题

如果已经安装或者安装了nvm,又或者初次安装,但是出现(vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的 名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一 次。 所在位置 行:1 字符: 1 + vue create vue-demo1 + ~~~     + Category)

(或者安装了nvm的),可以尝试一下这个方法

1)通过vue.cmd在你安装脚手架的那个盘查找(这里是D盘)vue-codemod.cmd文件,复制它的路径

2)按win键,打开“设置”,找到“高级系统设置”

3)打开“环境变量”,在“系统变量”里,新建一个“VUE”的变量,找到“Path”,新建一个,将“%VUE%”填进去

相关文章:

vue学习day05-watch侦听器(监视器)、Vue生命周期和生命周期的四个阶段、、工程化开发和脚手架Vue cli

13、watch侦听器(监视器) (1)作用:监视数据变化,执行一些业务逻辑或异步操作 (2)语法: 1)简写语法——简单数据类型,直接监视 ① Watch:{ 数…...

数字人+展厅互动体验方案:多元化互动方式,拓宽文化文娱新体验

数字化创新已成为推动展厅可持续发展,创造全新消费体验,满足游客多元化需求的关键力量。 “数字人数字互动展厅”可以适应年轻一代的文化传播与多媒体互动新体验趋势,打造新生代潮玩聚集地,促进文化创意传播与互动体验场景创新&a…...

在Spring Boot项目中集成监控与报警

在Spring Boot项目中集成监控与报警 大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 1. 引言 在当今的软件开发中,监控和报警系统是保证系统稳定性和可靠性的重要组成部分。Spring Boot…...

opencv实现目标检测功能----20240704

早在 2017 年 8 月,OpenCV 3.3 正式发布,带来了高度改进的“深度神经网络”(dnn)模块。 该模块支持多种深度学习框架,包括 Caffe、TensorFlow 和 Torch/PyTorch。这次我们使用Opencv深度学习的功能实现目标检测的功能,模型选用MobileNetSSD_deploy.caffemodel。 模型加载…...

音视频解封装demo:使用libmp4v2解封装(demux)出mp4文件中的h264视频数据和aac语音数据

1、README 前言 本demo是使用的mp4v2来将mp4文件解封装得到h264、aac的,目前demo提供的.a静态库文件是在x86_64架构的Ubuntu16.04编译得到的,如果想在其他环境下测试demo,可以自行编译mp4v2并替换相应的库文件(libmp4v2.a&#…...

手撸俄罗斯方块(一)——简单介绍

手撸俄罗斯方块 简单介绍 《俄罗斯方块》(俄语:Тетрис,英语:Tetris),是1980年末期至1990年代初期风靡全世界的电脑游戏,是落下型益智游戏的始祖,电子游戏领域的代表作之一&a…...

构建LangChain应用程序的示例代码:61、如何使用 LangChain 和 LangSmith 优化链

本示例介绍如何使用 LangChain 和 LangSmith 优化链。 设置 我们将为 LangSmith 设置环境变量,并加载相关数据 import osos.environ["LANGCHAIN_PROJECT"] "movie-qa" # 设置 LANGCHAIN_PROJECT 环境变量为 "movie-qa"import pan…...

Android系统通过属性设置来控制log输出的方案

Android系统通过属性设置来控制log输出的方案 背景 项目中经常需要在针对性的模块或者文件,分析问题的时候输出Log,但问题分析完成后,又由于性能问题,需要关闭这些log输出。当前大多数情况下是控制整个系统的log等级来实现&#…...

JavaDoc的最佳实践

文章目录 一、JavaDoc 使用说明1.1 什么是 JavaDoc1.2 文档注释结构1.3 常见的 Javadoc 标签 二、文档最佳实践2.1 注释原则2.2 实际案例 参考资料 一、JavaDoc 使用说明 1.1 什么是 JavaDoc JavaDoc 是一款能根据源代码中的文档注释来产生 HTML 格式的 API 文档的工具。 Jav…...

数字力量助西部职教全面提升——唯众品牌大数据、人工智能系列产品中标甘肃庆阳职院数字经济人才培养基地!

近日,唯众品牌凭借在大数据和人工智能领域深耕多年的技术积累和卓越产品,成功中标庆阳职业技术学院全国一体化算力网络国家枢纽节点数字经济人才培养基地项目,标志着唯众在助力西部职业教育与数字经济融合发展的新征程上迈出了坚实的一步。 …...

Swagger的原理及应用详解(四)

本系列文章简介: 在当今快速发展的软件开发领域,特别是随着微服务架构和前后端分离开发模式的普及,API(Application Programming Interface,应用程序编程接口)的设计与管理变得愈发重要。一个清晰、准确且易于理解的API文档不仅能够提升开发效率,还能促进前后端开发者之…...

Elasticsearch7.10集群搭建

Elasticsearch详细介绍: Elasticsearch 是一个分布式、RESTful 风格的搜索和分析引擎。它的核心基于 Apache Lucene,能够处理海量的数据,并支持实时的全文搜索。以下是关于 Elasticsearch 的详细介绍。 一、基本概念 索引(Index…...

SMU Summer 2024 Contest Round 3

A.Hcode OnlineJudge 先用欧拉筛把质数预处理出来&#xff0c;然后枚举左端点的质数&#xff0c;只需要询问右端点是不是质数并取差值的min就行了 #include<bits/stdc.h> #define endl \n #define mk make_pair #define int long long using namespace std; typedef lon…...

uniapp 封装瀑布流组件

思路&#xff1a; 1.coulumns&#xff1a;需要分成几列 2.如何分布数据 3.计算每列的宽度 4.图片进行高度自适应 <template><view :style"{ margin: boxM }"><view class"flex flex-justify-start bg-red" style"background-colo…...

pd虚拟机去虚拟化是什么意思?pd虚拟机去虚拟化教程 PD虚拟机优化设置

Parallels Desktop for Mac&#xff08;PD虚拟机&#xff09;去虚拟化是指在虚拟机&#xff08;Virtual Machine&#xff0c;简称 VM&#xff09;中禁用或减少虚拟化层的影响&#xff0c;使其表现更接近于物理机。这种操作通常用于提高虚拟机的性能或解决某些软件兼容性问题。具…...

低代码研发项目管理流程优化:提效与创新的双重驱动

随着信息技术的迅猛发展&#xff0c;软件项目的规模和复杂度日益增加&#xff0c;传统的软件开发方式已经难以满足快速迭代和高效交付的需求。在这一背景下&#xff0c;低代码平台应运而生&#xff0c;以其高效、灵活、易用的特点&#xff0c;迅速成为软件行业的新宠。然而&…...

32位版 C 库函数time 将在 2038 年溢出,那到时候,它该何去何从

简单地说&#xff0c;通常不必担心&#xff0c;在64位操作系统已经成为主流的今天这基本上不是问题&#xff08;在写这篇回答的时候&#xff0c;我才发现我甚至找不到32位的机器来测试&#xff09;刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「32库函数的…...

C语言 printf函数缓冲机制

printf不立即打印到stdout的原因 printf函数使用了缓冲机制。当我们调用printf时,输出通常不会立即显示在屏幕上,而是先存储在一个缓冲区中。这是为了提高I/O操作的效率。 缓存数据输出的原理 stdio库维护了一个缓冲区。当缓冲区满了,或者在特定条件下,缓冲区的内容会被刷新…...

【Linux进阶】文件系统8——硬链接和符号连接:ln

在Linux下面的链接文件有两种&#xff0c; 一种是类似Windows的快捷方式功能的文件&#xff0c;可以让你快速地链接到目标文件&#xff08;或目录)&#xff1b;另一种则是通过文件系统的inode 链接来产生新文件名&#xff0c;而不是产生新文件&#xff0c;这种称为硬链接&…...

代码随想录算法训练营Day64|拓扑排序(卡码网117)、dijkstra朴素版

拓扑排序 117. 软件构建 (kamacoder.com) 拓扑排序简单的说是将一个有向图转为线性的排序。 它将图中的所有结点排序成一个线性序列&#xff0c;使得对于任何的边uv&#xff0c;结点u在序列中都出现在结点v之前&#xff0c;这样的序列满足图中所有的前驱-后继关系。 拓扑排…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...