vue2+vue3——42+-CSDN博客

本文链接：https://blog.csdn.net/weixin_46574762/article/details/130274377

vue2+vue3——42+

vue2 v-cloak指令【14:14】

在这里插入图片描述

调网速： no throttling 不让慢； offline 断网

在这里插入图片描述

JS 阻塞

在这里插入图片描述

红色外部JS ；绿色网页核心；粉色 JS 脚本

在这里插入图片描述

红色外部JS 我要走不了，谁都别想走：绿色不可以渲染到页面，放到页面容器；粉色 JS脚本不可以被执行，没有容器

在这里插入图片描述

换位置： body 最下方

在这里插入图片描述

v-cloak 本质是一个特殊的属性

在这里插入图片描述

display : none

在这里插入图片描述

vue2 v-once指令【04:16】

在这里插入图片描述

区别于 @click.once 事件修饰符

在这里插入图片描述

vue2 v-pre指令【04:14】

在这里插入图片描述

vue2 自定义指令_函数式【17:52】

vue2 自定义指令_对象式【19:57】

vue2 自定义指令_总结【12:18】

vue2 引出生命周期【23:20】

动态绑定加冒号v-bind缩写，里面是对象

CSS 属性 : 数据名

在这里插入图片描述

重名可以简写：里面是JS表达式，里面是对象，就可以使用对象简写形式

在这里插入图片描述

外部定时器： vue 不认识你写的定时器，所以写在外面（不推荐）

x <= 0 ： js 不擅长 === 0 ，浮点数

在这里插入图片描述

狂开定时器 : 错误写法，不断调用开启新的定时器，指数增长

在这里插入图片描述

methods 两种：事件回调（eg：点击按钮）；模板里面的插值语法，亲自调用

虚拟DOM 、真实DOM 、把真实DOM 放到页面：

mounted ： vue 完成模板的解析、把初始（只有一次初始）真实 DOM 放入页面，以后叫做更新

在这里插入图片描述

生命周期函数：特殊时间点调用的函数

在这里插入图片描述

生命周期钩子

在这里插入图片描述

vue2 生命周期_挂载流程【29:49】

debugger

在这里插入图片描述

不指定template 选项： el 作为模板 #root ，外部

在这里插入图片描述

mounted 初始化操作

在这里插入图片描述

template 选项：只能有一个根节点，用 div 包裹起来成为一个

在这里插入图片描述

完全替换，整个红色框 id= root

在这里插入图片描述

el : ‘#root’ ：在 div id=“root” ，有 root

在这里插入图片描述

vue2 生命周期_更新流程【09:26】

template 不能作为根元素：不参与编译，最终出现到页面上的是里面的

在这里插入图片描述

Vue3 会细讲解决办法

存真实DOM节点： vm.$el ； diff算法，节点复用，需要存原来的节点

在这里插入图片描述

vue2 生命周期_销毁流程【19:20】

没啥记的

vue2 生命周期_总结【20:46】

新增一个 this.timer 属性，关闭定时器。不要起名为： this.id 、 this.key

在这里插入图片描述

beforeDestroy不管他杀、还是自杀

在这里插入图片描述

8个4对， +3个路由

vue2 对组件的理解【24:24】

废话

vue2 非单文件组件【33:10】

Vue.extend() 继承、延伸

在这里插入图片描述

data函数式：必须使用，相当于构造函数，每次返回全新对象

在这里插入图片描述

el与data的两种写法

在这里插入图片描述

对象方式：有引用关系，一改全改

在这里插入图片描述

三步

在这里插入图片描述

定义、创建组件

在这里插入图片描述

template 选项

在这里插入图片描述

自定义指令directives 、过滤器filter 、组件components

注册组件（局部注册）：最好 key名字:组件名字相同，可以简写成为组件名

在这里插入图片描述

编写组件标签

在这里插入图片描述

注册组件：全局注册（组件名字，组件在哪里变量名地址）

在这里插入图片描述

vue2 组件的几个注意点【17:29】

命名

在这里插入图片描述

脚手架 MySchool

指定 vue开发者工具中的名字 name : “”

在这里插入图片描述

标签自拟合：必须保证在脚手架环境下

不使用脚手架：后续组件不能够渲染

在这里插入图片描述

简写

在这里插入图片描述

vue2 组件的嵌套【12:29】

在这里插入图片描述

app 管理者：没有数据

在这里插入图片描述

vue2 VueComponent构造函数【25:21】

在这里插入图片描述

vue2 Vue实例与组件实例【09:04】

废话

vue2 一个重要的内置关系【28:26】

原型对象

在这里插入图片描述

只要看到 toString 就是object原型对象

在这里插入图片描述

vue

在这里插入图片描述

控制台输入 vm

vue 原型对象

在这里插入图片描述

object 原型对象

在这里插入图片描述

vue2 单文件组件【32:08】

vue文件必须使用脚手架

在这里插入图片描述

vue文件命名

在这里插入图片描述

vue文件，插件推荐

在这里插入图片描述

vue文件：组成组件的 3核心：

非单文件的：结构、交互，缺少样式

在这里插入图片描述

3种暴露方式： js模块化

分别暴露

在这里插入图片描述

统一暴露

在这里插入图片描述

默认暴露：一般使用

在这里插入图片描述

导入方式：

在这里插入图片描述

import 组件名name from "./文件名.vue"后缀可写可不写

在这里插入图片描述

文件结构

在这里插入图片描述

main.js 是 boss ，也是入口文件

el: 容器

在这里插入图片描述

vue2 创建Vue脚手架【13:47】

安装 + 启动

vue cli （command line interface 命令行）：开发工具、开发平台：向下兼容，用最新的

61集安装 vue-cli

vue官网告诉你，怎么安装 node
CSDN博客讲解

node -v 显示安装的nodejs版本
npm -v 显示安装的npm版本

如出现下载缓慢请配置npm 淘宝镜像：
npm config set registry https://registry.npm.taobao.org

第一步（仅第一次执行）：全局安装@vue/cli。有一些 warning 是正常的，安装完，断掉CMD终端，再重新开启（不是cls清空界面）。输入vue才不报错
npm install -g @vue/cli
第二步：切换到你要【创建项目】的目录，然后使用命令创建项目
vue create vue_test
第三步：启动项目
npm run serve
在这里插入图片描述

尚硅谷教程 webpack-js的兼容性处理和语法检查 eslint

在这里插入图片描述

结束按两次 Ctrl + C

vue2 分析脚手架结构【27:35】

vscode 打开文件夹

npm 结构介绍

package.json ： $ 说明书：采用依赖、用了哪些库

在这里插入图片描述

package-lock.json ：包版本控制文件

src 代码

APP大哥带小弟components，main.js是入口， assets静态资源

alt属性

HTML 的img标签说明

alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容

public

尚硅谷：移动端理想视口、布局视口

href BASE_URL

href是Hypertext Reference的缩写，意思是指定超链接目标的URL，href 属性的值可以是任何有效文档的相对或绝对URL
在这里插入图片描述

尚硅谷： webPack 教程插件完成

vue2 render函数【29:46】

reader 配置项

在这里插入图片描述

方法二：引入模板解析器（完整vue）

ES6 模块化语法

残缺了模板解析器

在这里插入图片描述

引入完整版 vue ： vue/dist/vue

方法一： render 渲染

残缺版的vue 不能解析 template

createElement

在这里插入图片描述

改为箭头函数（只有一个参数，可以省略小括号）

在这里插入图片描述

箭头函数，只有一个参数，可以省略小括号

在这里插入图片描述

箭头函数，只有一句函数体、并且是一个返回值return，可以省略{} return

在这里插入图片描述

传参方式1：第一个是HTML内置元素，第二个是具体内容

传参方式2： APP组件，import 进来的（不是字符串，HTML里"app"元素）

vue 包括：核心（生命周期、处理事件）+ 模板解析器

webpack 会将 .vue 变成 .js

在这里插入图片描述

runtime 没有模板解析器，不能使用 template 配置项；组件vue文件的template由其他模块操心

vue2 修改默认配置【17:15】

绝对不可以修改的 and 可以修改的，文件

在这里插入图片描述

common.js 暴露 model.exports = {}

在这里插入图片描述

vue2 ref属性【18:37】

标签属性ref 、 key

Ctrl+ R 刷新控制台

原生HTML， id 可以给一个元素打标识，用的时候可以获取你

给标签

在这里插入图片描述

给组件

在这里插入图片描述

ref

给标签

$ref : { title : h1

在这里插入图片描述

给组件

在这里插入图片描述

vue2 props配置【30:21】

动态传入，但是要提前说一声 props

第一种声明方式：数组，简单接受

在这里插入图片描述

数据处理

错误方式：无论些什么都当做字符串

在这里插入图片描述

解决方法1 ：强制类型转换

在这里插入图片描述

方法2： v-bind , 动态绑定； age的值，是动态绑定，是运行引号里面的JS表达式

在这里插入图片描述

第二种声明方式：对象key-value， value写JS的内置构造函数/对象

在这里插入图片描述

第三种声明方式：对象中对象，默认值指定+必要值限制

在这里插入图片描述

可以修改，但是vue出现问题

在这里插入图片描述

数据打架

在这里插入图片描述

优先级 props > data

在这里插入图片描述

props 只做初始化，其他交给 data

在这里插入图片描述

保留一定不可用

保留 key ：给节点做标记，内部 diff算法使用

在这里插入图片描述

保留 ref : 给节点打标识

在这里插入图片描述

vue2 mixin混入【13:35】

默认暴露

在这里插入图片描述

分别暴露

在这里插入图片描述

混合 hunhe

在这里插入图片描述

必须写在mixins 的数组里

在这里插入图片描述

可以写多个配置项

在这里插入图片描述

多个mixin

在这里插入图片描述

打架：以自己的为主，混合的为辅；钩子谁的都要，混合在前，自己在后

在这里插入图片描述

全局混合 vue.mixin(hunhe)

在这里插入图片描述

vue2 插件【12:51】

应用插件 plugins install

在这里插入图片描述

传入参数 vue （vm构造者）

在这里插入图片描述

全局过滤器filter 、定义全局指令directive、定义混入mixin 、原型新增方法属性 prototype

在这里插入图片描述

filter 截取字符串长度

在这里插入图片描述

director ： v-bind 一样的功能，但可以自动获取焦点

在这里插入图片描述

prototype

在这里插入图片描述

插件使用方法：

引入多个插件

在这里插入图片描述

传入参数

在这里插入图片描述

vue2 scoped样式【14:55】

脚手架在解析文件的时候，先import 再读取配置项，最后解析模板

在这里插入图片描述

scope 范围、作用域

在这里插入图片描述

原理：标签属性选择器

在这里插入图片描述

选择语言

在这里插入图片描述

安装出现问题：版本不兼容

在这里插入图片描述

使用效果

在这里插入图片描述

默认 CSS

vue2 TodoList案例_静态【23:42】

拆完就写，写完就引入

在这里插入图片描述

接手别人的项目

在这里插入图片描述

只要html 的 body 里面

在这里插入图片描述

css全选

在这里插入图片描述

先拆结构、再拆样式（折叠 or Ctrl Shift C 找到每一个部分）

剪切、立马写上组件标签

在这里插入图片描述

vue2 TodoList案例_初始化列表【15:02】

在这里插入图片描述

决定标签里动态属性（不是样式，样式是class里面的事）

错误写法，全部都被打钩上了

在这里插入图片描述

正确： v-bind ，如果后面是是true就拥有

在这里插入图片描述

vue2 TodoList案例_添加【28:45】

输入数据

在这里插入图片描述

生成唯一标识

在这里插入图片描述

兄弟之间，不能传数据

在这里插入图片描述

父传子

在这里插入图片描述

子传父

在这里插入图片描述

清空输入框

在这里插入图片描述

不操作DOM

在这里插入图片描述

输入为空不添加

在这里插入图片描述

vue2 TodoList案例_勾选【21:59】

绑定事件

@click

在这里插入图片描述

@change

在这里插入图片描述

数据在哪里，操作数据的方法就在哪里

逐层传递

在这里插入图片描述

v-model绑定bool ，那么可以决定勾还是不勾

在这里插入图片描述

props 只读，不可以改变；做的是浅层次的监视，而且不能加深度监视deep

在这里插入图片描述

vue2 TodoList案例_删除【09:49】

在这里插入图片描述

确定删除吗

在这里插入图片描述

浏览器输出项

在这里插入图片描述

删除函数

在这里插入图片描述

传递

在这里插入图片描述

vue2 TodoList案例_底部统计【14:51】

在这里插入图片描述

ES6 reduce ：条件统计，年龄大于18，订单额度大于1000，有几个男士（MDN）

函数、初始值；数组长度是几就被调用几次

在这里插入图片描述

vue2 TodoList案例_底部交互【15:35】

计算属性，需要this

在这里插入图片描述

计算属性套娃

在这里插入图片描述

传

在这里插入图片描述

v-model 简写methods不行； v-model 绑定计算属性

在这里插入图片描述

checkbox 返回要么 true 要么 false

在这里插入图片描述

不用再写methods 的 checkAll

删除已完成

在这里插入图片描述

传递

在这里插入图片描述

vue2 TodoList案例_总结【10:20】

vscode插件：外置APP打开文件

vue2 浏览器本地存储【22:35】

localStorage

在这里插入图片描述

存点东西

在这里插入图片描述

key value

在这里插入图片描述

json

在这里插入图片描述

读取

在这里插入图片描述

删除、清空

在这里插入图片描述

vue2 TodoList_本地存储【08:50】

在这里插入图片描述

一个问题：读出 null

在这里插入图片描述

深度监视

在这里插入图片描述

vue2 组件自定义事件_绑定【24:57】

在这里插入图片描述

给组件的实例对象vc上，绑定事件

在这里插入图片描述

子传父：传参

在这里插入图片描述

简写 @ v-on

在这里插入图片描述

简写 ref + mounted

在这里插入图片描述

增加一个 3s 延迟加载

在这里插入图片描述

只触发一次 $on 改成 $once

在这里插入图片描述

多个参数

传入对象

数组接收 …a

在这里插入图片描述

vue2 组件自定义事件_解绑【12:53】

在这里插入图片描述

多个解绑

在这里插入图片描述

写事件名 @demo ，如同 @click

在这里插入图片描述

解绑所有

在这里插入图片描述

销毁后， vc的自定义事件全部失效

在这里插入图片描述

vue2 组件自定义事件_总结【22:36】

子传父：页面呈现

在这里插入图片描述

ref

在这里插入图片描述

问题：不能写回调函数，必须写methods

在这里插入图片描述

观察这个this是谁： app里面写，却是student

在这里插入图片描述

正确写法： methods 或箭头函数

在这里插入图片描述

绑定原生事件 @click.native

@click

在这里插入图片描述

@click.native

在这里插入图片描述

只能有一个根元素

在这里插入图片描述

点一下粉色就可以弹窗

在这里插入图片描述

总结

在这里插入图片描述

事件回调留在父组件

在这里插入图片描述

vue2 TodoList案例_自定义事件【07:14】

App.vue 只需要将【v-bind:事件名 = “回调名”】改为【 @事件名 = “回调名”】

在这里插入图片描述

methods不用改

在这里插入图片描述

MyHeader.vue

不需要 props

在这里插入图片描述

调用方式修改 : $mit 触发事件 (事件名, 传入对象)

在这里插入图片描述

vue开发者工具触发事件 : payload 是参数

在这里插入图片描述

App.vue 将 : 变 @

在这里插入图片描述

MyFooter.vue

删除 props 中父传子的方法

在这里插入图片描述

调用回调

在这里插入图片描述

vue2 全局事件总线1【22:02】

vue2 全局事件总线2【20:35】

在这里插入图片描述

vc = new VC , 给 Vue.prototype.x = vc

在这里插入图片描述

给x这个傀儡, 绑定hello事件

在这里插入图片描述

组件 a–>school ; 事件名 demo --> hello

在这里插入图片描述

触发事件

在这里插入图片描述

vm

在这里插入图片描述

改名 $bus

在这里插入图片描述

销毁你给傀儡身上你自己设置的事件 , 傀儡在vm身上, 活得久

在这里插入图片描述

千万不要啥也不写, 全部销毁

在这里插入图片描述

vue2 TodoList案例_事件总线【08:00】

$bus 安装全局事件总线

在这里插入图片描述

删除原传递 : 爷传孙

在这里插入图片描述

$on 收数据的人, 绑定事件总线身上的自定义事件

在这里插入图片描述

$off注意销毁

在这里插入图片描述

触发

vue 开发者工具

自定义事件

在这里插入图片描述

全局事件 : 本质自定义事件给 $bus=this=root 绑定 ,

触发人是 $bus=this=root 多半是事件总线

vue2 消息订阅与发布_pubsub【18:16】

在这里插入图片描述

安装 npm i pubsub-js

在这里插入图片描述

引入对象

在这里插入图片描述

订阅消息 subscribe (消息名 , 回调函数)

在这里插入图片描述

消息的发布 publish (消息名 , 数据)

在这里插入图片描述

收到两个参数回调函数 ( 消息名 , 数据)

在这里插入图片描述

取消订阅

在这里插入图片描述

第三方库 this 不是 vue

在这里插入图片描述

正确方法一 : 箭头函数 , this 是 vue

在这里插入图片描述

正确方法二 : methods

在这里插入图片描述

全局总线 vs pubsub

想收消息: $bus=this=root 绑定事件 vs 订阅消息

在这里插入图片描述

发消息方 : 触发hello事件 vs 发布hello 消息

在这里插入图片描述

vue2 TodoList案例_pubsub【05:42】

app组件需要数据(删除id) , Item发布消息

在这里插入图片描述

引入库 : 第三方在上 , 自己在下

在这里插入图片描述

删除之前事件总线写的

在这里插入图片描述

占位 , 消息名

在这里插入图片描述

发布

父亲辛苦传来的 [函数名] ; $bus全局事件总线 [事件名]; 订阅消息的 [消息名]

在这里插入图片描述

vue2 TodoList案例_编辑【25:52】

右悬浮样式 , 所以顺序颠倒

红色在 App.vue

在这里插入图片描述

编辑

事件@click methods

在这里插入图片描述

注意设置对象属性没有使用 $set 后面会出错 : 没有响应

在这里插入图片描述

输入框

在这里插入图片描述

$set 添加数据

在这里插入图片描述

失去焦点 : 自动确定

在这里插入图片描述

第二次及其后续修改属性 ,不需要 $set

在这里插入图片描述

set 不需要设置多次 : 当 isEdit 存在

在这里插入图片描述

真正修改逻辑 : 失去焦点时

绑定事件

在这里插入图片描述

编辑时 , 隐藏编辑按钮

在这里插入图片描述

校验不为空

在这里插入图片描述

vue2 $nextTick【08:05】

点击编辑按钮后, 自动获取焦点

在这里插入图片描述

input 框还没有 show 出来 , 有点慢 , 没出来就获取不到焦点

不是该数据就立刻执行, 而是等后面的一起执行

在这里插入图片描述

定时器

在这里插入图片描述

nextTick 等待 DOM节点更新之后再执行

在这里插入图片描述

vue2 动画效果【14:02】----------------------------------------------------------------------------未学习

vue2 过度效果【12:40】

vue2 多个元素过度【04:07】

vue2 集成第三方动画【04:53】

vue2 总结过度与动画【10:15】----------------------------------------------------------------------------未学习

vue2 配置代理_方式一【29:10】

浏览器输入地址 , 敲下回车 , 就是 get 请求

在这里插入图片描述

axios 尚硅谷教程

axios(promise风格)

在这里插入图片描述

下载 npm i axios

在这里插入图片描述

引入包

npm i axios

点击事件 @click

methods

get().then( 响应对象response => { response . data 才是真正的数据}

跨域了 : 协议名http , 主机名 , 端口号 (自己主机端口不一致, 收不到)

在这里插入图片描述

1.cors 后端处理 , 谁都能访问你的数据 , 自己家网站可以

在这里插入图片描述

3. 代理服务器 (服务器和服务器用http, 不用 ajax , ajax是前端- 浏览器-window-xhr-fetch)

在这里插入图片描述

node.js 没有

在这里插入图片描述

1.nginx

2.vue-cli

在这里插入图片描述

代理

vue.config.js文件

在这里插入图片描述

vue官网

在这里插入图片描述

配置代理, 重新启动

在这里插入图片描述

端口修改成为代理服务器的端口 8080 , 要数据

在这里插入图片描述

代理服务器根路径

在这里插入图片描述

方法一: 两个缺点

一个错误 , 当和根路径下的文件重名 , ( 代理服务器就直接取 public 之下的文件 )

在这里插入图片描述

默认给你 index.html

在这里插入图片描述

不能配置多个代理只能是 5000 端口

在这里插入图片描述

vue2 配置代理_方式二【19:26】

在这里插入图片描述

请求前缀

在这里插入图片描述

路径/路由转换重写

在这里插入图片描述

多个代理

在这里插入图片描述

vue2 github案例_静态组件【13:15】

引入 bootstrap

在这里插入图片描述

分区

在这里插入图片描述

search

在这里插入图片描述

list

在这里插入图片描述

app.vue

在这里插入图片描述

样式 (加 scope , 如果不是 ,样式会丢 ), list 用 bootstrap自带

在这里插入图片描述

app.vue 中最外侧容器 , 叫 app ; 与 html 中重名 ; 脱掉一层衣服

在这里插入图片描述

vue2 github案例_列表展示【14:53】

get 请求数据

在这里插入图片描述

JS6里面的模板字符串

在这里插入图片描述

获取数据

在这里插入图片描述

全局事件总线

安装总线

在这里插入图片描述

接收数据 : 定义自定义事件

在这里插入图片描述

发送方: 触发自定义事件

在这里插入图片描述

收到数据 : 收到数据存到自身

在这里插入图片描述

数据 : 只用3个

在这里插入图片描述

div 改为 v-for

在这里插入图片描述

vue2 github案例_完善案例【22:51】

在这里插入图片描述

展示

在这里插入图片描述

搜索请求后

在这里插入图片描述

请求成功 / 数据回来后

在这里插入图片描述

修改一: 不太好

接收者 : 修改回调函数参数

在这里插入图片描述

发送者 : 触发事件

在这里插入图片描述

修改二

在这里插入图片描述

data数据再次封装

在这里插入图片描述

替换 , 原来的数据不动

ES6 通过字面量合并对象 ( 以后面为主)

在这里插入图片描述

断网测试

在这里插入图片描述

vue2 vue-resource【06:50】

在这里插入图片描述

vue-resource 对 xhr 封装

npm i vue resource

在这里插入图片描述

引入 \ 使用

在这里插入图片描述

插件 : 往原型 \ 实例 \ 指令 \ 过滤器

在这里插入图片描述

this.$http 和 axios 用法返回值完全一样 ,同样 promise 风格

在这里插入图片描述

vue2 默认插槽【21:22】

静态

样式

在这里插入图片描述

传入数据

在这里插入图片描述

插槽

在这里插入图片描述

默认值

在这里插入图片描述

删除传递参数

在这里插入图片描述

修改后插槽内容

在这里插入图片描述

先app.vue解析 , 再塞入 category

在这里插入图片描述

插入的样式写在 app.vue

在这里插入图片描述

样式写哪里都可以

在这里插入图片描述

vue2 具名插槽【12:49】

接收者 :

在这里插入图片描述

发送者 :

在这里插入图片描述

不要写 : &nbsp (超文本标记语言中表示空格

在这里插入图片描述

正确: 包成 div

在这里插入图片描述

可以多对一

在这里插入图片描述

如果不想用 div , 可以 template , 少一层结构

在这里插入图片描述

template v-slot:footer : 还可以换种写法 vue2.6

在这里插入图片描述

不写 template 报错

在这里插入图片描述

vue2 作用域插槽【22:00】

接收方 : 将数据传给插槽使用者

在这里插入图片描述

发送方 : 塞结构 , 拿数据

必须 template

在这里插入图片描述

多个参数

在这里插入图片描述

ES6 解构赋值

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'