Vue3 watch监视数据
摘要：watch监视ref定义的数据视频 watch监视reactive定义的数据视频 2.watch函数 与Vue2.x中watch配置功能一致 两个小“坑”： 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。 监视reactive定义的响应
阅读全文
posted @
2023-04-19 21:11
垂序葎草
阅读(53)
推荐(0) 编辑
Vue3 computed计算属性
摘要：视频 7.计算属性与监视 1.computed函数 与Vue2.x中computed配置功能一致 写法 import {computed} from 'vue' setup(){ ... //计算属性——简写 let fullName = computed(()=>{ return person.f
阅读全文
posted @
2023-04-19 15:54
垂序葎草
阅读(37)
推荐(0) 编辑
Vue3 setup中两个注意点
摘要：视频 6.setup的两个注意点 setup执行的时机 在beforeCreate之前执行一次，this是undefined。 setup的参数 props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。 context：上下文对象 attrs: 值为对象，包含：组件外部传递过来，但
阅读全文
posted @
2023-04-18 18:29
垂序葎草
阅读(17)
推荐(0) 编辑
Vue3 reactive对比ref
摘要：视频 5.reactive对比ref 从定义数据角度对比： ref用来定义：基本类型数据。 reactive用来定义：对象（或数组）类型数据。 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。 从原理角度对比： ref通过Object.defineP
阅读全文
posted @
2023-04-18 18:00
垂序葎草
阅读(19)
推荐(0) 编辑
Vue3 vue3响应式原理_Proxy&Reflect
摘要：Proxy视频 Reflect视频 Vue3.0的响应式 实现原理: 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。 通过Reflect（反射）: 对源对象的属性进行操作。 MDN文档中描述的Proxy与Reflect： Proxy：https:
阅读全文
posted @
2023-04-18 17:51
垂序葎草
阅读(128)
推荐(0) 编辑
Vue3 回顾vue2的响应式原理
摘要：视频 vue2.x的响应式 实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。 Object.defineProperty(data, 'count',
阅读全文
posted @
2023-04-18 11:10
垂序葎草
阅读(15)
推荐(0) 编辑
Vue3 reactive函数
摘要：视频 3.reactive函数 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数） 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象） reactive定义的响应式数据是“深层次的”。 内
阅读全文
posted @
2023-04-18 10:56
垂序葎草
阅读(75)
推荐(0) 编辑
Vue3 ref函数处理基本类型或对象类型
摘要：基本类型视频 对象类型视频 2.ref函数 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<d
阅读全文
posted @
2023-04-17 18:03
垂序葎草
阅读(525)
推荐(0) 编辑
Vue3 初识setup
摘要：视频 二、常用 Composition API 官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 1.拉开序幕的setup 理解：Vue3.0中一个新的配置项，值为一个函数。 setup是所有Compositi
阅读全文
posted @
2023-04-17 12:19
垂序葎草
阅读(53)
推荐(0) 编辑
Vue3 安装开发者工具
摘要：视频 1.Chrome网上商店 2.扩展软件，拖动到插件里
阅读全文
posted @
2023-04-17 11:59
垂序葎草
阅读(93)
推荐(0) 编辑
Vue3 vue-cli创建工程的工程结构分析
摘要：视频 不能用vue2的写法了 #components ##HelloWorld.vue <template> <div class="hello"> <h1>{{ msg }}</h1> <p> For a guide and recipes on how to configure / custom
阅读全文
posted @
2023-04-17 11:50
垂序葎草
阅读(31)
推荐(0) 编辑
Vue3 vue-cli或vite创建工程
摘要：使用 vue-cli 创建工程视频 使用 vite 创建工程视频 一、创建Vue3.0工程 1.使用 vue-cli 创建 官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create ## 查看@vue/cli版本，确
阅读全文
posted @
2023-04-17 11:00
垂序葎草
阅读(39)
推荐(0) 编辑
Vue3 简介
摘要：视频 Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next
阅读全文
posted @
2023-04-14 15:29
垂序葎草
阅读(69)
推荐(0) 编辑
Vue2总结
摘要：笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放
阅读全文
posted @
2023-04-14 15:20
垂序葎草
阅读(32)
推荐(0) 编辑
Vue.js element-ui
摘要：基本使用视频 按需引入视频 7.1移动端常用UI组件库 Vant https://youzan.github.io/vant Cube UI https://didi.github.io/cube-ui Mint UI http://mint-ui.github.io 7.2PC端常用UI组件库.
阅读全文
posted @
2023-04-13 23:43
垂序葎草
阅读(25)
推荐(0) 编辑
Vue.js history模式与hash模式
摘要：视频 13.路由器的两种工作模式 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。 hash模式： 地址中永远带着#号，不美观 。 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标
阅读全文
posted @
2023-04-13 23:18
垂序葎草
阅读(147)
推荐(0) 编辑
Vue.js 组件内路由守卫
摘要：视频 组件内守卫： //进入守卫：通过路由规则，进入该组件时被调用 beforeRouteEnter (to, from, next) { }, //离开守卫：通过路由规则，离开该组件时被调用 beforeRouteLeave (to, from, next) { } About.vue App.v
阅读全文
posted @
2023-04-13 11:08
垂序葎草
阅读(133)
推荐(0) 编辑
Vue.js 独享路由守卫
摘要：视频 独享守卫: beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') 'atgui
阅读全文
posted @
2023-04-13 10:36
垂序葎草
阅读(22)
推荐(0) 编辑
Vue.js 全局前置和后置-路由守卫
摘要：全局前置路由守卫视频 全局后置路由守卫视频 12.路由守卫 作用：对路由进行权限控制 分类：全局守卫、独享守卫、组件内守卫 全局守卫: //全局前置守卫：初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=>{ console.log('beforeE
阅读全文
posted @
2023-04-13 10:31
垂序葎草
阅读(145)
推荐(0) 编辑
Vue.js 两个新的生命周期钩子（路由组件独有）
摘要：视频 11.两个新的生命周期钩子 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。 具体名字： activated路由组件被激活时触发。 deactivated路由组件失活时触发。 Home.vue News.vue #components ##Banner.vue <template>
阅读全文
posted @
2023-04-12 21:33
垂序葎草
阅读(27)
推荐(0) 编辑
