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

网站建设的技术方案/长沙做优化的公司

news 文章来源：https://blog.csdn.net/weixin_46370595/article/details/132516313 2025/3/16 6:27:12

网站建设的技术方案,长沙做优化的公司,产品推广计划怎么写,电子商务网站建设日程表一、今日目标 1.生命周期生命周期介绍生命周期的四个阶段生命周期钩子声明周期案例 2.工程化开发入门工程化开发和脚手架项目运行流程组件化组件注册二、Vue生命周期思考：什么时候可以发送初始化渲染请求？（越早越好）什么…

一、今日目标

1.生命周期

生命周期介绍
生命周期的四个阶段
生命周期钩子
声明周期案例

2.工程化开发入门

工程化开发和脚手架
项目运行流程
组件化
组件注册

二、Vue生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DACIFzt7-1693057054325)(assets/1682065937815.png)]

三、Vue生命周期钩子

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDd6J4Lc-1693057054327)(assets/1682066040295.png)]

<!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>Document</title>
</head>
<body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 1. 创建阶段（准备数据）beforeCreate () {console.log('beforeCreate 响应式数据准备好之前', this.count)},created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段（渲染模板）beforeMount () {console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)},mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)// 可以开始操作dom了},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdate () {console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)},updated () {console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)},// 4. 卸载阶段beforeDestroy () {console.log('beforeDestroy, 卸载前')console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')},destroyed () {console.log('destroyed，卸载后')}})</script>
</body>
</html>

四、生命周期钩子小案例

1.在created中发送数据

<!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>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.data}})</script>
</body>
</html>

2.在mounted中获取焦点


<!DOCTYPE html>
<html lang="zh-CN"><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><!-- 初始化样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"><!-- 核心样式 --><style>html,body {height: 100%;}.search-container {position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.search-container .search-box {display: flex;}.search-container img {margin-bottom: 30px;}.search-container .search-box input {width: 512px;height: 16px;padding: 12px 16px;font-size: 16px;margin: 0;vertical-align: top;outline: 0;box-shadow: none;border-radius: 10px 0 0 10px;border: 2px solid #c4c7ce;background: #fff;color: #222;overflow: hidden;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}.search-container .search-box button {cursor: pointer;width: 112px;height: 44px;line-height: 41px;line-height: 42px;background-color: #ad2a27;border-radius: 0 10px 10px 0;font-size: 17px;box-shadow: none;font-weight: 400;border: 0;outline: 0;letter-spacing: normal;color: white;}body {background: no-repeat center /cover;background-color: #edf0f5;}</style>
</head><body>
<div class="container" id="app"><div class="search-container"><img src="https://www.itheima.com/images/logo.png" alt=""><div class="search-box"><input type="text" v-model="words" id="inp"><button>搜索一下</button></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {words: ''},// 核心思路：// 1. 等input框渲染出来 mounted 钩子// 2. 让input框获取焦点 inp.focus()mounted () {document.querySelector('#inp').focus()}})
</script></body></html>

五、工程化开发和脚手架

1.开发Vue的两种方式

核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RTuvPyF3-1693057054329)(assets/1682090039070.png)]

工程化开发模式优点：
- 提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
工程化开发模式问题：
- webpack配置不简单
- 雷同的基础配置
- 缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

2.脚手架Vue CLI

基本介绍：

Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

开箱即用，零配置
内置babel等工具
标准化的webpack配置

使用步骤：

全局安装（只需安装一次即可）

 yarn global add @vue/cli 或者 npm i @vue/cli -g

查看vue/cli版本
```
vue --version
```

创建项目架子

vue create project-name #(项目名不能使用中文)

启动项目

yarn serve 或者 npm run serve (命令不固定，找package.json)

六、项目目录介绍和运行流程

1.项目目录介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KtCQK5se-1693057054330)(assets/1682092148521.png)]

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

1. main.js 入口文件
2.App.vue App根组件
3. index.html 模板文件

2.运行流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jHbLh6fy-1693057054331)(assets/1682094032876.png)]

七、组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为
好处：便于维护，利于复用 → 提升开发效率
组件分类：普通组件、根组件

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lvJHfnHX-1693057054331)(assets/1682168852372.png)]

八、根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXGMolcu-1693057054332)(assets/1682169131688.png)]

2.组件是由三部分构成

语法高亮插件
三部分构成
- template：结构（有且只能一个根元素）
- script: js逻辑
- style：样式 (可支持less，需要装包)
让组件支持less

（1） style标签，lang=“less” 开启less功能

（2）装包: yarn add less less-loader -D 或者npm i less less-loader -D

九、普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

创建.vue文件（三个组成部分）
在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可 <组件名></组件名>

4.注意：

组件名规范 —> 大驼峰命名法，如 HmHeader

5.语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Imoz189E-1693057054334)(assets/1682227966812.png)]

// 导入需要注册的组件
// import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'export default {  // 局部注册components: {// '组件名': 组件对象,HmHeader:HmHeaer,HmHeader // 也可以简写}
}

十、普通组件的注册使用-全局注册

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤

创建.vue组件（三个组成部分）
main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —> 大驼峰命名法，如 HmHeader

5.语法

Vue.component(‘组件名’, 组件对象)

例：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

vue2 生命周期,工程化开发入门

一、今日目标 1.生命周期生命周期介绍生命周期的四个阶段生命周期钩子声明周期案例 2.工程化开发入门工程化开发和脚手架项目运行流程组件化组件注册二、Vue生命周期思考：什么时候可以发送初始化渲染请求？（越早越好）什么…...

编程日记 2023/9/2 22:35:08

Elasticsearch 分布式搜索——聚合

1.聚合的种类聚合常见的有三类： **桶（Bucket）**聚合：用来对文档做分组 TermAggregation：按照文档字段值分组，例如按照品牌值分组、按照国家分组Date Histogram：按照日期阶梯分组，例…...

编程日记 2023/9/2 22:34:06

苹果将在iPhone16系列中引入微透镜阵列技术，亮度更高、功耗更低

根据韩国媒体The Elec的报道，苹果公司正与其主要供应商三星和LG展开合作，以评估并衡量是否有必要在明年的iPhone 16系列中引入微透镜（micro-lens）技术来升级屏幕。这项方案集中在OLED屏幕架构上，计划采用微透镜阵列&…...

编程日记 2023/9/2 22:33:05

Window10 安装 Lua

1、下载地址：https://luabinaries.sourceforge.net/download.html 2、下载 3、解压后共有4个文件，这里我把这几个文件放到如下目录 D:\Program Files\lua-5.4.2\bin 4、定义环境变量 5、打开 powershell，运行 lua54 -v PS C:\Windows\syste…...

编程日记 2023/9/2 22:32:04

Centos替代方案分析（Ubuntu篇）

最受欢迎Linux操作系统在上百个Linux版本中，Ubuntu和CentOS是最受欢迎的开源操作系统，以其稳定性、高性能和广泛的社区支持而闻名。Ubuntu以友好的用户界面和多样的应用程序生态系统吸引着广大用户，适用于桌面和服务器。而CentOS则因其与RH…...

编程日记 2023/9/2 22:31:01

关于计数以及Index返回订单号升级版可以控制年月日累计（不重复）（sqlite）

1数据库创建： RAGMA foreign_keys false;-- ---------------------------- -- Table structure for OrderSIndex -- ---------------------------- DROP TABLE IF EXISTS "OrderSIndex"; CREATE TABLE "OrderSIndex" ("Id" INTEGER…...

编程日记 2023/9/2 22:29:59

前端实现在线预览文件

一、实现word、xls、ppt文件的在线预览功能 1、通过调用微软的在线预览功能， word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现（预览前提：资源必须是公共可访问的） <iframe srchttps://…...

编程日记 2023/9/2 22:28:58

海外有哪些流行的支付方式？

大家好，我是老三，很久没写支付相关的文章了，这期给大家讲一讲，海外都在用哪些支付方式。简介我们先来看下两个主流电商产品的美国站的支付方式： 在国内，想必大家都习惯了支付宝和微信支付二分天下&…...

编程日记 2023/9/2 22:27:56

服务器数据恢复-重组RAID导致RAID6数据丢失的数据恢复案例

服务器数据恢复环境： 一台存储设备中有一组由12块硬盘组建的RAID6磁盘阵列，上层采用EXT3文件系统，共划分3个LUN。服务器故障&分析： 存储设备在运行过程中RAID6阵列突然不可用，管理员对故障存储进行了重新分配RAI…...

编程日记 2023/9/2 22:26:55

Redis数据库持久化---RDB（Redis DataBase）概念与实操

一、概念 1redis提供了两种持久化的方式，分别是RDB（Redis DataBase）和AOF（Append Only File）。 RDB（Redis DataBase）：是在不同的时间点，将redis存储的数据生成快照并存…...

编程日记 2023/9/2 22:25:54

分部署存储Ceph

文章目录 Ceph一.deploy-ceph部署1.系统环境初始化1.1 修改主机名，DNS解析1.2 时间同步1.3 配置apt基础源与ceph源1.4关闭selinux与防火墙1.5 创建 ceph 集群部署用户cephadmin1.6分发密钥 2. ceph部署2.1 安装ceph 部署工具2.2 初始化 mon 节点2.3 安装ceph-mon服务…...

编程日记 2023/9/2 22:24:52

项目：点餐系统3mysql知识回顾MySQL客户端

连接数据库 mysql -uroot -p 密码：空一、第三方库：MySQL 数据库-存储并管理数据的仓库，是一个C/S架构 MySQL客户端通过sql来告诉MySQL服务器，自己需要做什么操作 1.sql语句 sql：structure query language结构化查询…...

编程日记 2023/9/2 22:23:50

docker命令学习

docker vscode插件出现的问题 docker命令 docker images （查看所有的镜像） docker ps -a （查看所有的容器） docker ps （查看运行的容器） docker run imageID docker run --gpus all --shm-size8g -it imag…...

编程日记 2023/9/2 22:22:49

【STM32教程】第二章通用输入输出口GPIO

资料下载链接： 链接：https://pan.baidu.com/s/1hsIibEmsB91xFclJd-YTYA?pwdjauj 提取码：jauj 1. GPIO的基本结构 1.1 概述 GPIO（General Purpose Input Output）意思是通用输入输出口可配置为8种输入输出模式&a…...

编程日记 2023/9/2 22:21:48

2023.9 - java - ArrayList

ArrayList 类是一个可以动态修改的数组，与普通数组的区别就是它是没有固定大小的限制，我们可以添加或删除元素。 ArrayList 继承了 AbstractList ，并实现了 List 接口。 ArrayList 类位于 java.util 包中，使用前需要引入它&…...

编程日记 2023/9/2 22:20:46

记1次前端性能优化之CPU使用率

碰到这样的一个问题，用户反馈页面的图表一直加载不出来，页面还卡死打开链接页面，打开控制台 Network 看到有个请求一直pending，结合用户描述，页面一直loading,似乎验证了我的怀疑：后端迟迟没有相应。但是…...

编程日记 2023/9/2 22:19:44

记一次postgres导致cpu100%

周末想打两把训练赛，没想到朋友发来一个截图我：嗯？？wtf 于是我上服务器看了一下日志，诶我超，还真的查看进程详情 [rootiZ7xv7q4im4c48qen2do2bZ project]# pstree -tp postgres memory(904475)─┬─…...

编程日记 2023/9/2 22:18:41

详谈SpringBoot启动项目后执行自定义方法的方式

在 main 启动函数中调用这个是在所有启动后执行，也是常用之一。 SpringBootApplication public class ListenerApplication {public static void main(String[] args) {SpringApplication.run(ListenerApplication.class, args);System.out.println("启动成…...

编程日记 2023/9/2 22:17:39

KubeAdmin方式搭建K8S(1.26.0)

本次安装K8S版本为1.26.0 服务器环境配置 ip描述配置192.168.233.221master节点CPU（2C） 内存（2G） 硬盘（50G）192.168.233.222node1节点CPU（2C） 内存（2G） 硬盘…...

编程日记 2023/9/2 22:16:38

代码随想录打卡—day57—【编辑距离】— 9.2+9.3 编辑距离系列

1 647. 回文子串 647. 回文子串纯暴力解法，应该是O（n^3），居然AC了： class Solution { public:int countSubstrings(string s) {// 暴力int cnt 0;cout << s.substr(1,1);for(int i 0; i < s.size();i){…...

编程日记 2023/9/2 22:15:37

Blender界面学习03 原点、鼠标所在位置的缩放与旋转

物体的坐标原点可以移动放大缩小时默认是屏幕中央，修改为鼠标在哪儿就缩放哪儿默认旋转时围绕屏幕的中心可以修改为指定对象旋转...

编程日记 2023/9/2 22:14:35

指针结构体题

目录初阶指针_指针的概念 1.使用指针打印数组内容 2.字符串逆序 3.整形数组和字符串数组 4.打印菱形 5.打印水仙花数 6.计算求和结构体 7.喝汽水问题 8.程序死循环解释 9.选择题总结tips 今天是重点是指针&结构体题题目。🆗🆗&#x…...

编程日记 2023/9/2 22:13:33

【力扣每日一题02】数组篇--删除有序数组中的重复项

一、题目给你一个升序排列的数组 nums ， 请你原地删除重复出现的元素，使每个元素只出现一次返回删除后数组的新长度。元素的相对顺序应该保持一致。然后返回 nums 中唯一元素的个数。二、思路解析这道题要用到 “双指针” 的概念&…...

编程日记 2023/9/2 22:12:32

Vue在表格中拿到该行信息的方式（作用域插槽-#default-scope-解决按钮与行点击的顺序问题）

遇到的问题在做表格的时候，表格是封装好了的，用于展示数据。如果想给单行增加按钮，可以单独写一列存放按钮，最基本的需求是，点击按钮后要拿到数据然后发起请求。且Vue的element-plus，当我们点击按钮之后…...

编程日记 2023/9/2 22:11:31

OJ练习第158题——单词拆分 II

单词拆分 II 力扣链接：140. 单词拆分 II 题目描述给定一个字符串 s 和一个字符串字典 wordDict ，在字符串 s 中增加空格来构建一个句子，使得句子中所有的单词都在词典中。以任意顺序返回所有这些可能的句子。注意：词典中的…...

编程日记 2023/9/2 22:10:30

ArcGIS地块面积分割调整工具插件

地块分割调整工具可以实现将选定的图斑按照面积比例或者指定的面积，分割成多个图斑。各个图斑的面积用逗号分隔，比例分割设置时，用整数表示。面积分割时，最后一个图斑的面积可以不写，插件可以自动计算图斑的面积&a…...

编程日记 2023/9/2 22:09:29

基于Matlab实现多个图像增强案例（附上源码+数据集）

图像增强是数字图像处理中的一个重要步骤，它通过一系列的算法和技术，使图像在视觉上更加清晰、明亮、对比度更强等，以便更好地满足人们的需求。在本文中，我们将介绍如何使用Matlab实现图像增强。文章目录部分源码源码数据集下载…...

编程日记 2023/9/2 22:08:28

计算机网络概述部分

目录计算机网络在信息时代的作用计算机网络的重要特征网络，internet,Internet的区别局域网广域网的区别网络协议的分层计算机网络在信息时代的作用计算机网络的重要特征连通性：彼此联通，交换信息共享性：信息共享…...

编程日记 2023/9/2 22:07:27

使用DOSBOX运行TurboC2，TC2使用graphics库绘图

Turbo C是由美国Borland公司开发的一套C语言程序开发工具，Borland公司是一家专门从事软件开发、研制的大公司。该公司相继推出了一套Turbo系列软件，如Turbo BASIC、Turbo Pascal、Turbo Prolog，这些软件很受用户欢迎 [1] 。 Turbo C集成了程序…...

编程日记 2023/9/2 22:06:26

OpenCV（二）：认识Mat容器

目录 1.什么是Mat类 2.Mat类能存储的数据整数类型（有符号和无符号）： 浮点数类型： 布尔类型： 3.Mat类的创建 1.利用矩阵宽、高和类型参数创建Mat类 2.利用矩陈Size(结构和数据类型参数创建Mat类 3.利用已有Mat…...

编程日记 2023/9/2 22:05:25

一、今日目标

1.生命周期

2.工程化开发入门

二、Vue生命周期

三、Vue生命周期钩子

四、生命周期钩子小案例

1.在created中发送数据

2.在mounted中获取焦点

五、工程化开发和脚手架

1.开发Vue的两种方式

2.脚手架Vue CLI

基本介绍：

好处：

使用步骤：

六、项目目录介绍和运行流程

1.项目目录介绍

2.运行流程

七、组件化开发

八、根组件 App.vue

1.根组件介绍

2.组件是由三部分构成

九、普通组件的注册使用-局部注册

1.特点：

2.步骤：

3.使用方式：

4.注意：

5.语法：

十、普通组件的注册使用-全局注册

1.特点：

2.步骤

3.使用方式

4.注意

5.语法

相关文章：