Vue 快速上手
Vue概念
Vue 是一个用于构建用户界面的渐进式框架
构建用户界面：基于数据渲染出用户看到的页面
渐进式：循序渐进
框架：一套完备的项目解决方案
Vue 的两种使用方式:
① Vue 核心包开发
场景:局部 模块改造
② Vue 核心包 & Vue 插件 工程化开发
场景:整站 开发
创建实例new Vue()
创建 Vue 实例，初始化渲染
核心步调 4步:
1.准备容器
2.引包(官网)-开发版本/生产版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
一旦引入 Vuejs核心包，在全局环境，就有了Vue 构造函数
Vue.js (vuejs.org)https://v2.cn.vuejs.org/Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)https://cn.vuejs.org/
指定设置项 → 渲染数据
①el指定挂载点
② data 提供数据
插值表达式{{}}
插值表达式是一种 Vue 的模板语法
1.作用:使用表达式进行插值，渲染到页面中
2.语法:{{ 表达式 }}
3.注意
响应式特性
Vue 核心特性:响应式
我们已经掌握了基础的模板渲染，实在除了基本的模板渲染，Vue背后还做了大量工作。
比如:数据的响应式处置惩罚 →响应式:数据变化，视图自动更新
实例：const后面界说的
data中的数据，是会被添加到实例上（在console里进行）
1.访问数据 实例.属性名
2.修改数据 实例.属性名=新值
开发者工具
安装 Vue 开发者工具:装插件调试 Vue 应用
(1)通过谷歌应用商店安装(国外网站)
(2)极简插件:下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件
(还是edge好用)
Vue 指令
1.什么是 Vue 指令呢?
指令就是带有 v- 前缀 的特别 属性，差别属性 对应 差别的功能
学习差别指令 →解决差别业务场景需求
2.如果必要动态剖析标签，可以用哪个指令?语法?
v-html="表达式"->动态设置元素 innerHTML
3.可以在API — Vue.js (vuejs.org)查看api查看指令
v-html/v-show/v-if/v-else/v-on /v-bind /v-for /v-model
Vue 指令 v-show vs v-if
v-show1.作用:控制元素显示隐蔽2.语法:v-show="表达式"false 隐蔽表达式值 true 显示3.原理:切换 display:none 控制显示隐蔽,频繁切换显示隐蔽的场景
v-if1.作用:控制元素显示隐蔽(条件渲染)2.语法: v-if="表达式"表达式值 true 显示，false 隐蔽3.原理: 基于条件判定，是否 创建 或 移除 元素节点4.场景: 要么显示，要么隐蔽，不频繁切换的场景
v-else v-else-if1.作用:辅助 v-if 进行判定渲染
2.语法:v-else或v-else-if="表达式"3.注意: 必要紧挨着 v-if 一起使用
v-on1.作用: 注册变乱,添加监听,提供处置惩罚逻辑
2.语法:① v-on:变乱名="内联语句② v-on:变乱名="methods中的函数名（）"3.简写 变乱名4.注意:methods函数内的 this 指向 Vue 实例而语法1可以直接拿到data内里数据
v-bind1.作用:动态的设置html的标签属性→src url title
2.语法:v-bind:属性名="表达式"3.注意:简写情势 :属性名="表达式"
v-for数组、对象、数字1.作用:基于数据循环，多次渲染整个元素
2.遍历数组语法:v-for="(item,index) in 数组",item 每一项，index 下标
v-for 中的 key
key作用:给元素添加的唯一标识，便于Vue进行列表项的正确排序复用
注意点:1.key 的值只能是 字符串 或 数字范例2.key 的值必须具有 唯一性3.推荐使用 id 作为 key(唯一)，不推荐使用 index 作为 key(会变化，不对应)<li v-for="(item, index) in xxx" :key="唯一值">
v-model1.作用:给 表单位素 使用，双向数据绑定:→ 可以快速 获取 或 设置 表单位素内容
①数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
2.语法:v-model='变量 '
综合案例-小黑记事本
列表渲染v-for
删除功能filter使用
添加功能
通过 v-model 绑定 输入框 → 实时获取表单位素的内容
点击按钮，进行新增，往数组最前面加unshift
- add() {
- this.rwlist.unshift({
- id: +new Date(),
- name: this.tianjia
- })
- }
统计数组长度
清空
数组设为[]
指令补充
指令修饰符
通过"."指明一些指令 后缀，差别 后缀 封装了差别的处置惩罚操作 → 简化代码
① 按键修饰符
@keyup.enter键盘回车监听
②v-model.trim去除首尾空格v-model.number转数字
③变乱修饰符
@变乱名.stop克制冒泡
@变乱名.prevent →克制默认行为
v-bind对于样式操作的加强
操作class
语法 :class="对象/数组"
① 对象 →键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类
<div class="box” :class="{ 类名1:布尔值，类名2:布尔值}"></div>
② 数组 →数组中全部的类，
都会添加到盒子上，本质就是一个 class 列表
<div class="box" :class="[ 类名1，类名2，类名3]"></div>
操作syle
语法 :style="样式对象"
<div class="box" :style="{CSS属性名1:CSS属性值，CSS属性名2:CSS属性值}"></div>
实用场景:某个具体属性的动态设置
v-model应用于其他表单位素
常见的表单位素都可以用 v-model绑定关联 → 快速 获取 或 设置 表单位素的值
它会根据 控件范例 自动选取 正确的方法 来更新元素（下面这个不消记住）
性别:<input v-model="gender" type="radio" name="ren" value="1">男
computed 盘算属性
概念:基于现有的数据，盘算出来的新属性。依赖的数据变化，自动重新盘算。
盘算属性 →可以将一段 求值的代码 进行封装
基础语法:
① 声明在 computed 设置项中，一个盘算属性对应一个函数
② 使用起来和普通属性一样使用{{盘算属性名 }}
//需求:对 this.list 数组内里的 num 进行求和 →this.list.reduce((sum, item) => sum + item.num, 0)
盘算属性 vs 方法
盘算属性:有缓存的，一旦盘算出来结果，就会立刻缓存；
下一次读取→直接读缓存就行→性能特别高
作用:封装了一段对于数据的处置惩罚，求得一个结果。
语法:① 写在 computed 设置项中
② 作为属性，直接使用 →this.盘算属性{{ 盘算属性 }}
methods 方法:
作用:给实例提供一个方法，调用以处置惩罚业务逻辑
语法:① 写在 methods 设置项中@变乱名="方法名"
② 作为方法，必要调用 this.方法名(){{ 方法名()}}
完备写法
盘算属性默认的简写，只能读取访问，不能"修改
如果要"修改"-->必要写盘算属性的完备写法
set(value) 随便什么不是value也行
成绩案例
watch 侦听器
作用:监督数据变化，实行一些 业务逻辑 或 异步操作
语法:
简朴写法 →简朴范例数据，直接监督
完备写法 →添加额外设置项
(1)deep:true 对复杂范例深度监督
(2)immediate:true 初始化立刻实行一次handler方法
综合案例:水果购物车
渲染/删除/修改数目/全选反选/统计总价/恒久化
生命周期
生命周期 &生命周期四个阶段/生命周期钩子/生命周期案例
四个阶段，八个钩子
created:响应式数据准备好了，可以开始发送初始化染请求
综合案例:小黑记账清单（饼图不想学）
列表渲染(请求)/添加/删除/饼图渲染
工程化开发入门
工程化开发和脚手架
ctrl+shift+`显示终端，注意文件要从你命名的文件打包导入vs code
镜像：npm config set registry https://registry.npmmirror.com/
命令：npm i -g @vue/cli
3之后要cd到该文件App.vue上一级（可能是src）
less-loader 是一个允许你在Webpack中处置惩罚LESS文件的加载器。
命令：npm install less-loader --save-dev
项目运行流程
在div内里引入组件时候也要有头身体尾巴顺序
组件化
安装 less 和 less-loader: 使用以下命令安装这两个包，并将它们添加到 package.json 的 devDependencies 中（自动）：
- npm install less less-loader --save-dev
组件注册
注意命名一定要大驼峰（没用就重新创建文件）
综合案例:小兔鲜首页（没找到文件）
拆分模块-局部注册/结构样式完满/拆分组件-全局注册
组件的三大组成部分(结构/样式/逻辑)
scoped样式辩论
就是<style scoped><style>然后这内里写div也是局部的了
data是一个函数
组件通信
组件通信语法
组件通信，就是指 组件与组件 之间的数据通报
组件的数据是独立的，无法直接访问其他组件的数据
想用其他组件的数据 →组件通信
组件通信解决方案
父子关系props 和 $emit
非父子关系1. provide & inject2. eventbus
通用解决方案:Vuex(适合复杂业务场景)
父子通信1.父组件通过 props 将数据通报给子组件2.子组件使用 $emit 关照父组件修改更新
父传子
prop
hobby.join(,)
props 校验
作用:为组件的 prop 指定验证，不符合要求,控制台就会有错误提示→帮助开发者快速发现错误 语法:范例校验,非空校验,默认值,自界说校验
没穿值按默认值，传了按传的
子传父
newTitle变成传智教诲然后赋值更新数据
prop &data、单向数据流
共同点:都可以给组件提供数据。
区别:
data 的数据是自己的 → 随便改
prop 的数据是外部的 → 不能直接改，要遵循 单向数据流
单向数据流:这个数据流动是单向的，父级 prop 的数据更新，会向下游动，影响子组件。
修改父的count再拿到父的count
非父子(扩展)
src/util/EventBus.js
AB都要导入import Bus from '../utils/EventBus.js'
发布一接收多，一对多
复杂可以响应式
综合案例:小黑记事本(组件版，我不想看)
拆分组件/渲染/添加/删除/统计/清空/恒久化
进阶语法
v-model原理
模板中获取变乱的形参→$event 获取
v-model应用于组件
vlue接收，value绑定，父组件v-model
sync修饰符
ref和$refs
$nextTick
Vue是异步更新 DOM 的
想要在 DOM 更新完成之后做某件事，可以使用$nextTick
自界说指令
基本语法(全局&局部注册)
inserted和mounted差不多，都在渲染完操作，全局注册在main.js,使用在App.main
指令的值
- el 代表的是指令绑定的 DOM 元素。
- binding 是一个对象，包罗了指令的相关信息，如 value（指令的值）、arg（指令的参数）、modifiers（指令修饰符）等。binding.value可以拿到指令的值
1.通过指令的值相关语法，可以应对更复杂指令封装场景
2.指令值的语法
① v-指令名="指令值"，通过 等号 可以绑定指令的值
② 通过 binding.value 可以拿到指令的值
③ 通过 update 钩子，可以监听指令值的变化，进行dom更新操作
v-loading 指令封装
场景:实际开发过程中，发送请求必要时间，在请求的数据未回来时，页面会处于空白状态 =>用户体验欠好
需求:封装一个 v-loading 指令，实现加载中的效果
- css3引进了::来界说伪元素，为了和伪类做区分，:是css2的写法
- .loading::before 选择全部具有 loading 类的元素，并在其前面添加一个伪元素。
- content: ""; 必须提供，即使它是空字符串，因为 content 属性是创建伪元素的必要条件。
- position: absolute; 将伪元素定位为绝对定位，这意味着它相对于其近来的已定位（非 static）先人元素定位。
- left: 0; top: 0; 将伪元素的位置设置在其父元素的左上角。
- width: 100%; height: 100%; 使伪元素的尺寸与其父元素相同。
- background: #fff url("./loading.gif") no-repeat center; 设置伪元素的背景为白色，并添加一个加载动画的GIF图像，该图像不重复且居中显示。 no-repeat：不平铺（背景图像只显示一次，而不是在整个元素的背景上重复时，可以使用这个属性）
伪元素定位就是使用CSS的伪元素（::before 和 ::after）来在HTML元素的前后添加一些内容，而且通过CSS来控制这些内容的位置。
1.通过指令相关语法，封装了指令v-loading 实现了请求的loading效果
2核心思绪
(1)准备类名 loading，通过伪元素提供遮罩层
(2)添加或移除类名，实现loading蒙层的添加移除
(3)使用指令语法，封装v-loading 通用指令
inserted 钩子中，binding.value 判定指令的值，设置默认状态 update 钩子中，binding.value 判定指令的值，更新类名状态
默认插槽
插槽分类:默认插槽(组件内定制一处结构)上
具名插槽(组件内定制多处结构
作用域插槽:是插槽的一个传参语法
场景:当组件内某一部分结构不确定，想要自界说怎么办?用插槽 slot 占位封装
1.先在组件内用 slot 占位
2.使用组件时,传入具体标签内容插入
后备内容
具名插槽
组件内 有多处不确定的结构 怎么办?
具名插槽
1.slot占位,给name属性起名字来区分
2.template共同 v-slot:插槽名 分发内容
v-slot:插槽名 可以简化成#插槽名
作用域插槽
作用域插槽的作用是什么?
可以给插槽上绑定命据，供未来使用组件时使用
步调
(1)给 slot 标签,以 添加属性的方式传值
(2)全部属性都会被网络到一个对象中
(3)template中,通过、#插槽名="obj"、 接收
综合案例:商品列表
MyTag 组件封装
my-tag 标签组件封装
1.创建组件-初始化
2.实现功能
(1)双击显示，而且自动聚焦
v-if v-else @dbclick 操作 isEdit
自动聚焦:1.$nextTick =>$refs 获取到dom，进行focus获取核心2.封装v-focus指令 (2)失去核心，隐蔽输入框
@blur 操作 isEdit 即可 (3)回显标签信息
回显的标签信息是父组件通报过来的
v-model实现功能(简化代码)v-model=>:value 和 @input
组件内部通过props接收，:value设置给输入框
(4)内容修改了，回车 =>修改标签信息
@keyup.enter，触发变乱 $emit('input',e.target.value)
MyTable 组件封装
my-table 表格组件的封装
1.数据不能写死，动态通报表格渲染的数据
props
2.结构不能写死-多处结构自界说 【具名插槽】
(1)表头支持自界说工
(2)主体支持自界说
路由入门
单页应用程序
单页面应用(SPA):全部功能在 一个html页面上实现
单页面应用
系统类网站/内部网站/文档类网站/移动端站点
多页面应用
公司官网/电商类网站
路由概念
路由是一种映射关系
Vue中的路由是路径 和 组件 的映射关系
根据路由就能知道差别路径的，应该匹配渲染哪个组件
VueRouter的基本使用
目标:认识插件 VueRouter，掌握 VueRouter的基本使用步调
作用:修改地点栏路径时，切换显示匹配的组件
说明:Vue 官方的一个路由插件，是一个第三方包
官网:https://v3.router.vuejs.org/zh/
npm install vue-router@3.6.5
1.怎样实现路径改变，对应组件切换?
Vue 官方插件 VueRouter
2.VueRouter 的使用基本步调(5+2)
5个基础步调
①下包 ②引入③ Vue.use 安装注册④创建路由对象 ⑤ 注入Vue实例
2个核心步调
创建组件，设置规则(路径组件的匹配关系)
配导航，设置路由出口 router-view(组件展示的位置）
组件目录存放题目
分类开来 更易维护
src/views文件夹页面组件-页面展示-共同路由用
src/components文件夹复用组件-展示数据-常用于复用
路由进阶
路由模块封装
路由模块的封装抽离的利益是拆分模块，利于维护
快速引入组件：基于 @ 指代 src 目录，从 src 目录出发找组件
这个是绝对路径
声明式导航&导航高亮
1.router-link是什么?vue-router提供的全局组件,用于更换a标签
2.router-link怎么用?to="/路径值
<router-link></router-link>必须传入to属性，指定路由路径值
3.router-link利益?能跳转能高亮(自带激活时的类名)
精确匹配&模糊匹配
自界说高亮类名
嫌类名太长，配一下（在index.js里）
声明式导航传参
查询参数传参
搜索关键词可以{{$route.query.参数名}}
要想再出现搜索结果要在
动态路由传参
搜索关键词可以{{$route.query.words}}
搜索结果要this.$route.query.words
对比
动态路由参数可选符
search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"?" 正则表达式，问号表示0个大概1个，解决search后无参数空白页题目
路由重定向
路由404
路由模式
编程式导航（跳转）
综合案例:面经基础版
一级路由/二级路由/导航高亮/请求渲染/路由传参/缓存组件
通过 children 设置项，可以设置嵌套子路由
1.在children设置项中，配规则
2.准备二级路由出口
首页请求渲染
npm add axios
${}就是要用模板字符串，写在属性值内里的，不是写在标签之间
push用router,取参数用route
数据加载好了再进行渲染
这个是组件名，没有设置name的才会用文件名作为组件名
基于VueCli自界说创建项目
ESLint手动修正代码规范错误
（这里我生存时候对齐的不能自动格式化。可以ctrl+shift+f）
vuex概述
构建多组件共享的数据环境
- <template>
- <div id="app">
- <h1>根组件</h1>
- <input type="text">
- <Son1></Son1>
- <hr>
- <Son2></Son2>
- </div>
- </template>
- <script>
- import Son1 from './components/Son1.vue'
- import Son2 from './components/Son2.vue'
- export default {
- name: 'app',
- data: function () {
- return {
- }
- },
- components: {
- Son1,
- Son2
- }
- }
- </script>
- <style>
- #app {
- width: 600px;
- margin: 20px auto;
- border: 3px solid #ccc;
- border-radius: 3px;
- padding: 10px;
- }
- </style>
Son1.vue
- <template>
- <div class="box">
- <h2>Son1 子组件</h2>
- 从vuex中获取的值: <label></label>
- <br>
- <button>值 + 1</button>
- </div>
- </template>
- <script>
- export default {
- name: 'Son1Com'
- }
- </script>
- <style lang="css" scoped>
- .box{
- border: 3px solid #ccc;
- width: 400px;
- padding: 10px;
- margin: 20px;
- }
- h2 {
- margin-top: 10px;
- }
- </style>
- <template>
- <div class="box">
- <h2>Son2 子组件</h2>
- 从vuex中获取的值:<label></label>
- <br />
- <button>值 - 1</button>
- </div>
- </template>
- <script>
- export default {
- name: 'Son2Com'
- }
- </script>
- <style lang="css" scoped>
- .box {
- border: 3px solid #ccc;
- width: 400px;
- padding: 10px;
- margin: 20px;
- }
- h2 {
- margin-top: 10px;
- }
- </style>
创建一个空仓库
vue2=>路由是3，vuex版本3
vue3=>路由是4，vuex版本4
第一步npm add vuex@3如果出现题目
怎样提供&访问vuex的数据
如许便于我以后添加别的盘算属性
mutations的基本使用
传参
监听
辅助函数-mapMutations
如果你想改变货架上的商品，你不能直接去拿，你必要通过一个特别的通道（这就是 mutation）。这个通道有专门的工作人员（mutations 函数）来处置惩罚这些商品的变动。
mapMutations 就像是给你一个快速通道，让你可以直接在你的组件里调用这些工作人员，而不必要每次都跑到超市的后门去。（仓库界说方法，组件可以直接调用）
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
