- 博客(23)
- 收藏
- 关注
RSS订阅原创 Vue3注册全局属性 (app.config.globalProperties)
app.config.globalProperties：一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。
2024-05-10 00:37:11
154
1
原创 将元素移动到页面顶部vue3示例（scrollIntoView方法）
当传入参数true时，相当于{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}当未传入参数时，默认值为：{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}tab.scrollIntoView（）;注：如果元素未能完全在视口内，则根据最短滚动距离原则，垂直方向滚动父级容器，使元素完全在视口内。注：如果元素未能完全在视口内，则根据最短滚动距离原则，水平方向滚动父级容器，使元素完全在视口内。
2024-05-07 01:12:52
447
原创 vue3生命周期（父子执行顺序）及其他钩子函数
父组件beforeDestroy => 子组件beforeDestroy =>子组件destroyed => 父组件destroyed。父组件beforeUpdate => 子组件beforeUpdate =>子组件updated => 父组件updated。为了保证父组件的视图与子组件的数据同步，Vue 在子组件数据变化后先触发父组件的生命周期钩子函数，然后再更新子组件的视图。父组件beforeCreate => 父组件created => 父组件beforeMount =>
2024-04-26 00:52:41
1137
2
原创 vue3组件通信（记录所有遇到的通信方式，以后看到新的方式会追加）
父组件：用provide传输对应的数据，并提供一个key，后续的子组件在拿数据也是根据此key。孙组件：数据可以进行修改，而且所有的组件数据都是同步的。2、绑定多个数据同步。
2024-04-25 01:47:03
323
2
原创 vue3可视化大屏解决方案（transform）
注意：demo中用到页面全屏插件-screenfullscreenfull基本用法：isFullscreen : 是否是全屏状态isEnabled: 判断是否支持全屏toggle: 调用 screenfull.toggle() 可以双向切换全屏与非全屏。
2024-04-20 16:39:54
436
原创 vue3修饰符用法
这意味着如果一个父元素和子元素都有相同类型的事件监听器，并且点击了子元素，那么只会触发子元素的事件监听器，父元素的事件监听器将被忽略。用于限制事件只能在触发事件的元素本身上触发，而不是在子元素上触发。在上述的代码中，当按钮被点击时，submitForm函数会被调用，同时会阻止表单的默认提交行为。例如，我们有一个父元素和一个子元素，父元素绑定了一个点击事件，子元素是父元素的一个子元素。修饰符可以确保点击子元素时不会触发父元素的点击事件，只有当点击父元素本身时才会触发。在上面的例子中，当按钮被点击时，
2024-04-17 01:14:11
678
原创 Vue3自定义指令用法
/ 在绑定元素的 attribute 前,或事件监听器应用前调用// 在元素被插入到 DOM 前调用// 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用// 绑定元素的父组件更新前调用// 在绑定元素的父组件及他自己的所有子节点都更新后调用// 绑定元素的父组件卸载前调用// 绑定元素的父组件卸载后调用el：指令绑定到的元素。这可以用于直接操作 DOM。binding：一个对象，包含以下属性。value：传递给指令的值。例如在中，值是2。oldValue：之前的值，仅在和。
2024-04-17 00:09:29
312
原创 vue3路由（基本用法、路由守卫、动态路由）
这里做法是使用isReady方法，它返回一个 Promise，它会在路由器完成初始导航之后被解析，也就是说这时所有和初始路由有关联的异步入口钩子和异步组件都已经被解析。用于在组件中获取当前路由的信息，返回一个包含路由信息的对象。用于获取路由实例，可以通过它来进行一些动态的路由操作，比如跳转到新的路由。route中有一个配置项是meta，专门提供给我们，在meta项中配置自己的属性与值，可用于在守卫中的权限判断。2、在全局路由守卫中设置跳转规则（未登录则跳转到登录页，已登录跳转到首页或放行）
2024-04-16 00:25:02
1421
1
原创 vsCode配置全局代码片段
2、然后在生产的文件中写入你要配置的代码片段，保存就好啦，就可以在任意地方使用啦。1、点击设置，选择用户代码片段，然后选择新建全局代码片段文件，起名创建文件。3、使用方法，在任意地方输入你配置的代码片段前缀。
2024-04-13 16:15:15
171
1
原创 for in与for of的理解
for in可以遍历对象，for of不可以遍历对象，只能遍历带有iterator接口的，比如Set，Map，String，Array。for in与for of都能够循环数组，for in 输出的是数组的index下标，而for of输出的是数组的每一项的值。属性, 就被视为具有 iterator接口, 就可以使用 for of循环。遍历对象返回的对象的key值,遍历数组返回的数组的下标(index)。for in遍历的是数组的索引，对象的属性，以及原型链上的属性。一个数据结构只要部署了。
2024-04-10 00:22:42
155
1
原创 vue3中prettierrc.json 配置
可能的值是 “none”、“es5”（在 ES5 中有效）和 “all”。默认为 “es5”。可以是 “always”、“avoid”、或 “as-needed”。默认为 “always”。默认为 false。可以是 “preserve”、“always” 或 “never”。默认为 “as-needed”。默认为 false。默认为 false。默认为 false。默认为 false。bracketSpacing：指定是否在对象字面量中的括号之间添加空格。默认为 false。默认为 false。
2024-04-09 23:51:35
356
原创 vue3中.eslintrc.cjs常见rules配置及说明
eslintrc.cjs文件中在rules配置规则。"warn" 或者 1，出现问题会有警告。"error" 或者 2，出现问题会报错。规则的细节请到ESLint官方网站查看。"off" 或者 0，不启用这个规则。
2024-04-09 23:34:02
461
原创 创建一个Vue3+Vite+Ts应用
根目录中会有.eslintrc.cjs文件和.prettierrc.json文件去配置对应的代码规范和格式化。注意：引入ESLint和Prettier需要VSCode安装相应插件配合使用。前提条件：已安装 18.0 或更高版本的。
2024-04-09 23:00:48
137
原创 Vue3中watch(5种情况)和watchEffect的用法
/ watch 接收两个参数// 第一个是要监听的值// 第二个是监听的值发现变化要执行的函数// watch 返回一个函数，函数作用是停止监听// newValue 是新的值// oldValue 是旧的值})当监视【ref】定义的【对象类型】数据时：1. 修改对象里的某个属性时是不会触发监听的2. 只有修改整个对象的时候才会触发注意：如果要修改对象里的某个属性时也触发监听侧需要传递第三个参数，第三个参数是一个配置对象：{deep: true}
2024-04-09 01:31:10
464
1
原创 pinia使用方法
6、注意Store获取到后不能解构，否则失去响应式，解构的话需要用pinia提供了一个函数storeToRefs。这个文件就是存有关counter相关的数据。（类似vuex的模块化）2、在main.js中引入pinia并创建容器挂载到根实例上。
2024-04-08 01:38:06
273
1
原创 vue3+Ts+vite 打包体积分析插件 rollup-plugin-visualizer
官方地址：https://github.com/btd/rollup-plugin-visualizer。
2024-04-04 10:49:07
254
原创 cookie、sessionStorage、localStorage
sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。localStorage的生命周期是永久的，无论是关闭页面还是换个新的页面导入链接他的数据都还在，但是在浏览器不一样的情况下打开是没有数据的。cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。
2024-04-01 23:45:19
324
原创 vue封装公共组件库并发布到npm库
vue组件封装的原理：利用vue框架提供的api: Vue.use( plugin )，我们需要把封装好组件的项目打包成vue库，并提供install方法，然后发布到npm中。Vue.use( plugin )的时候会自动执行插件中的install方法。
2024-03-25 22:03:39
92
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人