Vue3学习笔记(6)-Vue3中的生命周期
Vue3中的生命周期
Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
beforeCreate[页面创建前]===>setup()
created[页面创建后]=======>setup()
beforeMount[页面挂载前] ===>onBeforeMount
mounted[页面挂载后]=======>onMounted
beforeUpdate[页面更新前]===>onBeforeUpdate
updated[页面更新后] ====&# ...
Vue3学习笔记(5)-Vue3中的计算属性,watch监视属性以及watchEffect
Vue3中的计算属性和watch监视属性1.computed函数
与Vue2.x中computed配置功能一致
代码展示:
Demo组件<template> <h1>一个人的信息</h1> 姓：<input type="text" v-model="person.firstName"> <br> 名：<input type="text" v-model="person.lastName"> <br> <span>全名：{{person.fullName}}</span> <br> 全名：<input type="text" v-model="person.fullName"></template><script> // Vue3中将计算属性变成了一个api(函数) impo ...
Vue3学习笔记(4)-Vue3中setup的两个注意点
setup的两个注意点：
setup执行的时机
在beforeCreate之前执行一次，this是undefined。
setup的参数
props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
context：上下文对象
attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。*
emit: 分发自定义事件的函数, 相当于 this.$emit。
代码展示:
父组件<template> <Demo @hello="showHelloMsg" msg="你好啊" school="五邑大学"> <!-- 由于兼容性问题，Vue3中推荐使用v-slot来指定插槽 --> <template v-slot:qwe> <span>五邑大学</span> </template> & ...
Vue3学习笔记(3)-Vue3中的响应式原理
Vue3中的响应式原理复习Vue2中的响应式原理
实现原理：
对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
Object.defineProperty(data, 'count', { get () {}, set () {}})
存在问题：(这些问题Vue3中不复存在)
新增属性、删除属性, 界面不会更新。
直接通过下标修改数组, 界面不会自动更新。
代码展示:<template> <div> <h1>Vue2中的响应式原理</h1> <h2 v-show="person.name">姓名:{{person.name}}</h2> <h2>年龄: ...
Vue3学习笔记(2)-vue3中的新特性:setup,ref函数,reactive函数
1.拉开序幕的setup
理解：Vue3.0中一个新的配置项，值为一个函数。
setup是所有Composition API（组合API）“ 表演的舞台 ”。
组件中所用到的：数据、方法、生命周期等等，均要配置在setup中。
setup函数的两种返回值：
若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
若返回一个渲染函数：则可以自定义渲染内容。（了解）
注意点：
尽量不要与Vue2.x配置混用
Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
如果有重名, setup优先。
setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
代码展示:<template> <!-- Vue3新特性,模板结构中引用多个组件不再需 ...
Vue3学习笔记(1)-初识Vue3
Vue3初识介绍1.Vue3简介
2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
github上的tags地址
2.Vue3带来了什么1.性能的提升
打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%
等……
2.源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking
……
3.拥抱TypeScript
Vue3可以更好的支持TypeScript
4.新的特性
Composition API（组合API）
setup配置
ref与reactive`
watch与watchEffect
provide与inject
……
新的内置组件
Fragment
Teleport
Suspense
其他改变
新的生命周期钩子
data 选项应始终被声明为一个函数(Vue2中可以被设置成一个对象或方法)
移除keyCode支持作为 v-on 的修饰符(即不能再使用类似@ ...
Cookie学习(js-cookie)
Cookie-js的基本使用:什么是cookie?为什么需要cookie
cookie的中文翻译是饼干的意思, 所谓cookie其实就是一些数据的信息,是一种保存在客户端(我们的电脑)的纯文本文件,当我们使用自己的电脑通过浏览器进行网页的访问的时候,服务器就会生成一个证书返回给我们的浏览器并写入我们的本地电脑,这个证书就是cookie
cookie最常用在记录用户的登录信息当中,假设我们正在浏览一个网站,网站的信息需要我们登录了才能观看,但我们进行了登陆操作后,浏览器会把我们填写的用户名和密码按照固定的格式发送给服务器,待服务器验证无误后,就会把我们请求的内容返回给我们的浏览器,这时我们就能查看到刚刚请求的页面了,但是要知道http协议是无状态协议,换而言之就是服务器并不会记录我们的登陆状态,因此当我们请求同一个网站的另一个页面时, 服务器会要求我们重新登陆, 这时你就会很崩溃,因为你在同一个网站点击一下, 浏览器就会叫你重新登陆!!! 但是现实生活中,这种情况并不会发生, 通常我们在同一个网站登录一次过后, 很长一段时间都不需要再次登录, 这就要归功于cookie了!
cookie出 ...
MocK.Random的常见用法
模拟Web数据：
生成随机域名(每次运行结果不同)：var Random = Mock.RandomRandom.domain() // "nhou.org.cn"
生成随机IP(每次运行结果不同)var Random = Mock.RandomRandom.ip() // "74.97.41.159"
生成随机URL(每次运行结果不同)var Random = Mock.RandomRandom.url() // "news://wrmt.na/rbcgbws"
模拟地理位置数据：
生成随机省份：var Random = Mock.RandomRandom.province() //"海南省"
生成随机城市：var Random = Mock.RandomRandom.city() // "澳门半岛"
生成在某个省份的某个城市：var Random = Mock.RandomRandom.city(true) // "广东省 广州市"
模 ...
正则表达式复习(2)
正则表达式的限定符
写在普通元字符或字符符号的后面修饰前面 一个符号 出现的次数
1、* 表示出现 0 ~ 多次（包括0次）
2、+ 表示出现 1 ~ 多次（包括1次）
3、? 表示出现 0 ~ 1次（包括0次）
4、{n} 表示出现 n 次（包括n次）
5、{n,} 表示出现 n ~ 多次（包括n次）
=>{0,} 等价于 *
=>{1,} 等价于 +
6、{n,m} 表示出现 n ~ m（包括n次）
=>{0,1} 等价于 ?
代码展示:// 1、 *// 表示你的字符串里面需要出现一个 0 ~ 多个 的数字组成的片段// 即只要出现了数字就符合要求,不出现也算，0次const res = /\d*/;console.log(res.test('1hdjkha'));//ture// 表示你的字符串只能由 0 ~ 多个数字组成const res1 = /^\d*$/con ...
正则表达式复习(1)
什么是正则表达式？
正则表达式也叫规则表达式,是一个复杂的数据类型：object
作用：
1、专门用于验证字符串是否符合规则
2、从字符串中获取一部分符合规则的内容
语法：
=》使用一些特定的符号来组合成一个表达式
=》使用这个表达式去验证字符串，或者从字符串里面获取一些内容
创建正则表达式的两种方式:
1、以字面量创建
2、内置构造函数创建
代码展示:// 1、以字面量创建var a = /abcd/;console.log(a);///abcd/console.log(typeof a);//object// 2、内置构造函数创建var res = new RegExp('abcd');console.log(res);// /abcd/// 意义:字符串里面包含一段'abcd',字母即可，切记是一段字符串 // =》aabbccdd 不包含'abcd' // =》aaabcdd 包含'abcd'
结果展示:
正则表达式的边界元字符
1、 ^ ：表示字符串的开始 (写在转义符 ...
