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

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

时间:2024-07-14 09:56:01浏览次数:22  
标签:生命周期 cli vue 创建 Vue 阶段 工程化

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%”填进去

标签:生命周期,cli,vue,创建,Vue,阶段,工程化
From: https://blog.csdn.net/2301_76648183/article/details/140324088

相关文章

  • vue-01 安装与第一个vue程序
    1.安装直接使用<script>下载vue.js后导入直接在线导入链接使用cli脚手架2.第一个vue程序<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="vue.js"......
  • Vue 3 后端错误消息处理范例
    1.错误消息格式前后端消息传递时,我们可以通过json的errors字段传递错误信息,一个比较好的格式范例为:{errors:{global:["网络错误"],password:["至少需要一个大写字母","至少需要八位字符"]}}errors中,字段名代表出错位置(如果是输入框的话,对应错误要......
  • three.js+vue污水处理厂数字孪生平台智慧城市web3d
    案例效果截图如下: 主场景三维逻辑代码如下:<template><divclass="whole"><!--threejs画布--><divid="threejs"ref="threejs"></div><!--污水厂模型加载进度条--><a-progress:stroke-colo......
  • 基于SpringBoot+Vue+uniapp的校园美食交流系统的详细设计和实现(源码+lw+部署文档+讲
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于SpringBoot+Vue+uniapp的房屋租售网站的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于SpringBoot+Vue+uniapp的蜀都天香酒楼系统的详细设计和实现(源码+lw+部署文档+讲
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于SpringBoot+VueJS+微信小程序技术的图书森林共享小程序设计与实现:7000字论文+源
          博主介绍:硕士研究生,专注于信息化技术领域开发与管理,会使用java、标准c/c++等开发语言,以及毕业项目实战✌    从事基于javaBS架构、CS架构、c/c++编程工作近16年,拥有近12年的管理工作经验,拥有较丰富的技术架构思想、较扎实的技术功底和资深的项目管理经......
  • springboot+vue+mybatis文化遗产管理系统+PPT+论文+讲解+售后
    信息数据从传统到当代,是一直在变革当中,突如其来的互联网让传统的信息管理看到了革命性的曙光,因为传统信息管理从时效性,还是安全性,还是可操作性等各个方面来讲,遇到了互联网时代才发现能补上自古以来的短板,有效的提升管理的效率和业务水平。传统的管理模式,时间越久管理的内容越多......
  • ts vue3 自定义指令
    当然,以下是将前面两个步骤汇总到一起的完整实现方案:1.定义指令首先,在src/directives文件夹中创建你的自定义指令文件。例如,v-focus.ts和v-color.ts:v-focus.ts:import{Directive}from'vue';constvFocus:Directive={mounted(el){el.focus();}};ex......
  • vue-cli 搭建的项目 node搞版本兼容 配置写法
    先删除package-lock.json和node_modules再安装 兼容低版本安装方式 npminstall--legacy-peer-deps启动命令npmrunservewindow环境打包命令npmrunbuild:win注意:如果是要跑liunx环境就需要多安装一条命令window环境打包命令npmrunbuild:liunx......