VUE2-3

皮皮岛。

已于 2023-07-05 18:08:26 修改

阅读量94

点赞数

文章标签： vue.js

于 2023-06-29 13:40:39 首次发布

本文链接：https://blog.csdn.net/qq_43799531/article/details/130251967

版权

第一天：前端工程化与webpack

前端工程化的相关概念
webpack 的常见用法
打包发布
Source Map

目标：

了解工程化的前端开发方式
能够知道webpack在实际开发中起到的作用

第二天：VUE基础入门

VUE的基本使用步骤
VUE中常用指令
VUE-dev tools调试工具

目标：

能够使用VUE的指令完成页面结构的渲染
能够使用VUE的调试工具辅助VUE 的开发

标题第三天VUE入门part-2

过滤器和侦听器
计算属性的用法
axios 的基本用法
VUE-cli的安装和使用

目标：

能够在实际开发中合理运用过滤器，侦听器，计算属性解决自己遇到的问题
能够使用axios 发起Ajax 请求
能够使用VUE-cli工具生成工具化的vue 项目

标题第四天组件与生命周期

组件的注册与使用
组件的props自定义属性
解决组件样式冲突
组件的生命周期
组件之间的通讯（数据共享）

目标：
① 能够掌握.vue 单文件组件的基本用法
②能够掌握组件通讯的三种方式
③ 掌握组件生命周期的执行顺序和应用场景

标题第五天：ref＆购物车案例

使用ref 引用DOM 元素和组件实例
$nextTick 的基本使用
购物车案例

目标：
① 能够使用ref 获取页面上 DOM 或组件的引用
② 能够知道 $nextTick 的应用场景并合理地使用
③通过“购物车案例〞巩固前 4 天所有学知识

标题第六天：vue 组件的高级用法

•动态组件的使用
•插槽的使用（默认插槽、具名插槽、作用域插槽）
•自定义指令
•ESLint 的使用
目标：
①能够使用 keep-alive 实现组件的缓存
② 能够使用插槽提高组件的复用性
⑨ 能够了解常见的 ESLint 语法规则

标题第七天：路由(vue-router)

•路由的基本配置与使用
•路由重定向
•嵌套路由、动态路由
•编程式导航、路由导航守卫
目标：
①能够在项目中安装和配置路由
②能够使用路由实现单页面应用程序的开发
⑨ 能够使用导航守卫控制路由的访问权限

标题第八天：黑马头条（收尾案例）

•vant 组件库
•封装 axios
•上拉加载＆下拉刷新
。 Vant 主题定制
目标：
① 掌握 Vant 组件库的基本使用
② 能够知道如何封装 axios 请求模块
⑨ 能够知道如何实现上拉加载和下拉刷新功能

第一天

前端工程化

1. 小白眼中的前端开发 vs 实际的前端开发

小白眼中的前端开发：

会写HTML+CSS +Javascript 就会前端开发
需要美化页面样式，就拽一个 bootstrap过来
需要操作 DOM或发起Ajax 请求，再拽一个 jQuery 过来。需要快速实现网页布局效果，就拽一个 Layui 过来

实际的前端开发：

模块化（js 的模块化、cs5 的模块化、资源的模块化）。
组件化（复用现有的UI结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理）
自动化（自动化构建、自动部署、自动化测试）

2. 什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标淮化。
企业中的vue 项目和 React 项目，都是基于工程化的方式进行开发的。
好处：前端开发自成体系，有一套标准的开发方案和流程。

3. 前端工程化的解决方案

早期的前端工程化解决方案：
• grunt ( https://www.gruntjs.net/ )
• gulp ( https://www.gulpjs.com.cn/)
目前主流的前端工程化解决方案：
• webpack ( https://www.webpackjs.com/ )
• parcel (https://zh.parcelis.ora/ )

一、前端工程化和webpack

1、前端工程化

前端开发：

模块化（js的模块化，css的模块化，资源的模块化）
组件化（复用现有的UI结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
自动化（自动化构建、自动部署、自动测试）
什么是前端工程化
在企业的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规划化、标准化。

好处：前端开发自成体系，有一套标准的开发方案和流程。

前端工程化的解决方案
目前主流的前端工程化解决方案：

webpack (主要)
parcel
2、webpack
webpack的基本使用

1、什么是webpack

概念：webpack是前端项目工程化的具体解决方案。
主要功能：他提供了友好的前端模块化的支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性，性能优化等强大功能。

2、【案例】创建列表隔行变色项目

新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
新建src源代码目录
新建src->index.html首页和src->index.js脚本文件
初始化页面基本结构
运行npm install jquery -S命令，安装jQuery
通过ES6模块化的方式导入jQuery，实现列表隔行变色效果

运行结果：出错，语法不兼容

Vue

什么是vue

在这里插入图片描述

vue 指令

1、内容渲染指令（v-text 、{{}}、v-html）

2、属性绑定指令（v-bind 简写：）

4、列表渲染（v-for）

在这里插入图片描述

3、事件绑定（v-on 简写@，包含$event、事件修饰符）

在这里插入图片描述

4、v-model指令，双向绑定

5、条件渲染指令（v-show、v-if）
在这里插入图片描述

在这里插入图片描述

4、列表渲染（v-for）

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for指令需要使用item in items形式的特殊语法中，其中：

items是待循环的数组
item是被循环的每一项

过滤器

侦听器

在这里插入图片描述

计算属性

在这里插入图片描述

axios

在这里插入图片描述
某个方法的返回值是promise实例，则前面可以添加await
await只能用于被async修饰的方法中

使用解构赋值，后面的axios（{}）的结果里有六个属性（包含data属性），用{data}解构出data属性，{data：res}的含义是，把data属性重命名为res。

get

post

在这里插入图片描述

v-cli

安装v-cli
npm install -g @vue/cli

运行v-cli
在准备好的路径下，输入vue create +项目名称
请添加图片描述
空格键选择
第一项选择后，稍后会询问选择VUE2还是VUE3
第二项babel解决js兼容性
第三项微软的脚本语言
第四项渐进式的web框架
第五项路由
第六项vuex
第七项css预处理器–less
第八个代码编写风格的约束
第九个单元测试
第十个E2E测试
Router
请添加图片描述

npm run serve

使用管理员权限打开windows powershell
输入 Set-ExecutionPolicy RemoteSigned
改为A
解决了以下问题
在这里插入图片描述
把程序运行起来
不要关闭黑框，关闭后程序停掉（如果不小心关闭了，那网页会刷新不出来，相当于关闭了服务器）

使用vs code打开目录

serve项目测试中
build项目已结束
在这里插入图片描述

vue中src目录的构成

在这里插入图片描述

vue项目运行流程

在工程化项目中，vue要做的事很单纯，通过main.js把APP.js渲染到index.html的指定区域中
其中：

APP.vue用来编写待渲染的模板结构
index.html中需要预留一个el区域
main.js把APP.vue渲染到了index.html所预留的区域中

在这里插入图片描述

el和.$mount（）作用相同

在这里插入图片描述

vue组件的三个组成部分

输入<后选择第一个vue提示，可默认生成结构
在这里插入图片描述

模板中只能有一个根节点，不然会报错
在<style>中使用less之前，把标签更改为<style lang="less">

在父组件中使用子组件的三个步骤

在父组件中使用import语法导入需要的子组件
使用components节点注册组件（与data同级）
以标签形式使用刚才注册的组件，<Left></Left>

在这里插入图片描述

安装此插件，可以实现@代表src根目录

安装插件
打开设置打开settings.json文件，在最上插入如下代码

// 导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnlmport":true,
// 配置@的路径提示
"path-autocomplete.pathMappings":{
"@":"${folder}/src"
}

在这里插入图片描述

通过`components`注册的是私有子组件

比如，在组件A的components节点下，这侧了组件F，则组件F只能用在组件A中，不能被用在组件C中

注册全局组件

在vue项目中的main.js入口文件中，通过Vue.component()方法，可以注册全局组件。
在这里插入图片描述

使用时<MyCount></MyCount>

自动补齐`<MyCount></MyCount>`标签插件

在这里插入图片描述
安装此插件后，，只写前面一半，后面会自动补齐

实操过程中出现问题：复制别人文件，没有node_modules和package-lock.json文件

背景： node_modules和package-lock.json 重复配置着两个文件最快的方法是

npm i -D vue

后面复原了之后又出现了很多问题

错误2：`ValidationError：Progress Plugin Invalid Options`

背景：他是在我运行npm run serve的时候出来的报错
在这里插入图片描述
我也试了很多很多方法什么再删除node_modules等等方法我都没有成功还是你运行一样报错
直到现在我又重新找方法解决问题终于！终于！终于！解决了

补充一点哈：注意看一下你之前的版本是vue2 还是vue3 如果是vue2的话你执行npm install -g yarn或者npm i -D vue，他可能会自动帮你升级为vue3，而在vue3和vue2对比当中， main.js的配置是不一样的

运行提示有一个警告并且提示你在main.js当中那要留意提下脚手架和Vue版本问题 export 'default' (imported as 'Vue') was not found in 'vue'

遇到上面这个问题的前提是你安装好了yarn 只需要在运行yarn install就可以了成功！！！

解决方法：
先安装yarn

npm install -g yarn

再执行

yarn install

————————————————
版权声明：本文为CSDN博主「大鼻子cheers」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yms869/article/details/128294880

父组件向子组件传值，使用`props`方法

一个公共组件，用在不同的组件中时，不同组件希望的初始值不相同时怎么办？
解决办法：使用谁使用公共组件谁提供一个初始值

组件的props

props是组件的自定义属性，在封装通用组件的时候，合理的使用props可以极大的提高组件的复用性

在父组件中export default{}中定义props[]自定义属性的名字

 export default{
 // 组件的自定义属性
 props：['自定义属性A','自定义属性B','其他自定义属性...']
 }

使用:

子组件中定义接收的自定义属性名称：
父组件中<MyCount init="6"></MyCount>给自定义属性赋值

目前的init值为“6”，字符型
注：如果在init前加:( 添加v-bind后)，:init="6"含义发生转变：
js语句在没有''包裹时，属于数值型，所以:init="6"内的"6"，属于数值型（这里的init名称不是固定的，是可以更改的）

props是只读的

子组件中，程序员只能接收props的值，不能改变
在这里插入图片描述
注：不要直接修改prop的值，vue中不支持直接修改prop的值

如果使用者不给传初始值怎么办？

通过default来定义属性的默认值
数组形式的prop不能拥有default属性要改为prop对象

props的default默认值

  export default{
 // 组件的自定义属性
	 props:{
 		init:{
 		// 用default属性定义属性的默认值
 		default:0
	 	}
 	}
 }

props的type值类型

export default{
 // 组件的自定义属性
		 props:{
 				init:{
 						// 用default属性定义属性的默认值
 						default:0,
 						// 用type属性定义属性的值类型
 						//如果传递过来的值不符合此类型，则会在终端报错
 						type:Number
	 	}
 	}
 }

type的值可以是数值，字符串，对象，数组，布尔值。

props的required必填项校验(如果`required`的值为`true`，props必须有父组件提供的数据值，如果父组件没有提供数据，有`default`默认值也会报错)

export default{
 // 组件的自定义属性
		 props:{
 				init:{
 						// 用default属性定义属性的默认值
 						default:0,
 						// 用type属性定义属性的值类型
 						//如果传递过来的值不符合此类型，则会在终端报错
 						type:Number,
 						// 必选项
 						required:ture
	 	}
 	}
 }

在这里插入图片描述

组件之间的样式冲突问题

在这里插入图片描述
因为各个组件最终都会在index.html中，所以在一个组件里设置的H3样式，也会影响其他组件中的H3标签，解决原理：
同一个组件的js都添加同一个属性data-v-001，然后在设置样式时，使用属性选择器h3[data-v-001]
解决方法：
vue约定可以自动添加，在当前.vue文件style标签里添加scoped，vue自动在底层，生成.vue文件时候，为每个标签添加data-v-001属性
在这里插入图片描述
在加上scoped之后还是会有缺陷
在父组件中如何修改子组件的颜色

在这里插入图片描述

在created阶段，可以发起ajax请求拿数据

在这里插入图片描述

1、父组件向子组件共享数据

在这里插入图片描述

简单类型是把值直接复制，父组件中的message跟子组件中的msg值是彼此无关的。
复杂类型是复制一份对象的引用传过去

2、子组件向父组件共享数据

在这里插入图片描述

3、兄弟组件之间共享数据

在这里插入图片描述

卸载vue

在这里插入图片描述

什么是ref引用（在vue中用来引用dom对象）

在这里插入图片描述
ref命名不能重复

使用ref引用组件实例

在这里插入图片描述
想要在父组件中设置一个按钮，用来更改子组件中的数据/方法
在父组件中怎样访问子组件的实例(this)

this.$nextTick(cd)方法，把cd回调函数，推迟到下一个周期执行

等组件的DOM更新完成之后，在执行cd回调函数

在这里插入图片描述

动态组件

1.什么是动态组件

动态组件是指动态切换组件的显示与隐藏

2.如何实现动态组件的渲染

在这里插入图片描述
防止动态组件切换时，被销毁，使用keep-alive包裹

没有标签表示被激活，加上标签表示被封存
在这里插入图片描述
我们有时候会希望组件被缓存时，去做一件事，组件被激活时，做一件事

keep-alive对应的生命周期函数

在这里插入图片描述

keep-alive默认会把所有包裹起来的组件，都缓存，那么

keep-alive的include属性

在这里插入图片描述
这里还有一个对立属性，exclude，表示不包含的意思。
不可以跟include同时使用，二选一。

声明组件时，为组件设置name属性

插槽

1.什么是插槽

插槽(Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽
在这里插入图片描述
在子组件中声明一个插槽区域<slot></slot>
在父组件中的Left组件区域，声明p标签

在这里插入图片描述

简写为#

后备内容，为预留的插槽提供后备（默认内容）

在这里插入图片描述

父组件中没有定义插槽的内容，子组件中可以设置默认内容，当父组件中定义此插槽的内容后，子组件中的默认内容失效。
在这里插入图片描述
插槽在定义的时候，可以定义一些数据，给父组件在用这个插槽时候使用

叫obj是可以的，但是为了表明他是通过作用域插槽提供的数据，最好叫做scope来接收。

在提供数据时，可以用msg=“”来写死属性值，也可以用:user=“”来动态绑定属性值
在这里插入图片描述

在这里插入图片描述

binding可以改名的
console.log(binding)

binding.value的值的是color的值blue
binding值有一个缺点，是只有在第一次绑定到元素上的时候才会触发，如果在触发后更改其中的属性值，页面中的数据发生了更新，bind函数却不会执行了。
在这里插入图片描述

updata函数

在这里插入图片描述

函数简写

在这里插入图片描述

全局

在这里插入图片描述
全局共享的自定义指令要写在main.js文件中

向vue原型上，挂载axios
优点：在所有.vue组件中都可以使用

在这里插入图片描述

在这里插入图片描述
第17行，如果router：router，可以简写为router

1.在app.vue中添加三个哈希地址的链接
2.在app.vue中添加占位符
3.在路由模块中(index.js)中，在路由实例对象中，添加router数组，声明三条对应关系。
在这里插入图片描述

在这里插入图片描述
导入vue-router后使用可以代替a链接
在中to代替了中的href
在to中可以省略#，直接写/home

小问题：在访问默认端口号时，/，没有内容显示

在这里插入图片描述

子路由规则不用/开头，父路由规则用/开头

在这里插入图片描述

按哪个按钮都会转到电影模块，但是能通过路由，传递不同的mid数据，通过mid数据返回到服务器拿不同的数据，渲染到页面上。
通过路由，实现按不同哈希值的按钮，在同一个模块，显示出对应的信息。

shouThis()打印电影模块的this
在这里插入图片描述
this. $ro u t e 是路由的参数对象 t hi s .$ router是路由的导航对象

在路由组件中开启props：true
才能在电影组件中获得对应的mid

在这里插入图片描述

在这里插入图片描述
封装axios模块，以后所有的请求都要封装在api文件中

皮皮岛。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VUE2-3

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标淮化。企业中的vue 项目和 React 项目，都是基于工程化的方式进行开发的。好处：前端开发自成体系，有一套标准的开发方案和流程。概念：webpack是前端项目工程化的具体解决方案。主要功能：他提供了友好的前端模块化的支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性，性能优化等强大功能。2、【案例】创建列表隔行变色项目。
复制链接

扫一扫