- 博客(30)
- 收藏
- 关注
原创 Pinia
Store是使用defineStore()定义的并且他需要一个唯一名称,作为第一个参数传递:这个name,也称为id,是必要的,pinia使用它来将store连接到devtools 里返回的函数统一使用useX作为命名方案,这是约定的规范state() {return {counter: 0})
2023-07-27 20:57:33
1060
原创 Vue 3 Router
可以通过 /* webpackChunkName: 'home' */ 这样的方式修改这个js 文件的名字,便于查找。链接精准激活时,应用于渲染的 的class, 默认是router-link-exact-active。默认的激活时的类名叫 router-link-active, 可以通过active-class 修改。在Url 中显示参数 localhost:8080/home?懒加载会在dist 文件夹下面的js 文件夹中生成单独的js 文件。
2023-05-20 12:01:04
1889
原创 Vue 3 CompositionAPI
2. reactive API 定义响应式数据2.1 reactive 只能用于对象或者数组这样的复杂类型数据(不可以为 String、Number、Boolean)二. ref1. ref 的使用1.1 默认情况下,在template 中使用ref 时,vue 会自动对其进行解包(取出其中的value)2. ref 的浅层解包2.1 直接的ref 可以进行解包2.2 对象包裹的ref 的浅层解包三. reactive 和 ref 的使用场景1.
2023-05-15 14:16:24
756
原创 Vue 2 OptionsAPI
名称自定义任何包含响应式数据的复杂逻辑,都应该使用计算属性计算属性是有缓存的计算属性和methods 的区别:计算属性会基于它的依赖关系进行缓存,是有缓存的在数据不发生变化时,计算属性是不需要重新计算的依赖的数据发生变化,计算属性会自动重新进行计算在多次调用时,methods 会多次执行,计算属性只执行一次。
2023-05-12 09:30:29
1297
原创 对象的引用-深拷贝-浅拷贝
1.对象的引用赋值// 1. 对象的引用赋值const info = {name: "why",age: 18};const obj = info;info.name = "kobe";console.log(obj.name); // kobe2.对象的浅拷贝// 2. 对象的浅拷贝const info = {name: "why",age: 18,friend: {name: "kobe", age: 18}};const obj = Object.assign({},i
2022-05-06 09:08:32
210
原创 JavaScript
目录一. for in 和 for of(1) for in 用于数组(2) for in 用于对象(3) for of 用于数组(4) for of不能用于对象,因为TypeError: obj is not iterable(对象是不可迭代的)一. for in 和 for of(1) for in 用于数组var arr = [1,2,3];for(var k in arr){ console.log(k); console.log
2022-04-20 22:34:02
855
原创 Bom 浏览器对象模型
< BOM > 1.概述 BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window BOM 由一系列相关的对象构成,并且每个对象提供了很多方法和属性 BOM 缺乏标准,JavaScript 语法的标准化组织是ECMA,DOM 的标准化组织是W3C,BOM 最初是Netscape浏览器标准的一部分 DOM 和 BOM的对比:...
2022-04-20 13:27:41
886
原创 Dom 文档对象模型
< DOM > 1.文档:一个页面就是一个文档,DOM中使用document表示 2.元素:页面中的标签都是元素,DOM中使用element表示 3.节点:网页中所有的内容都是节点(标签、属性、文本、注释等),DOM中使用node表示 DOM把以上内容都看做是对象 1.获取页面元素: (1)根据ID获取: document.getElementById() // 1.因为文档页面是从上往下加载的,先得有标签, 所...
2022-04-20 13:23:46
380
原创 JS实现pc端、移动端网页特效
目录一. PC端网页特效二. 移动端网页特效一. PC端网页特效PC端网页特效 1.元素偏移量 offset 系列 (1)offset 偏移量:使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等 (2)特点:动态获取(随着该元素位置、大小的变化动态变化) (3)作用: 1.可以获得元素距离带有定位的父元素的位置 2....
2022-04-20 13:23:02
820
原创 三栏布局(中间定宽两边自适应 和 两边定宽中间自适应)
三栏布局两边定宽中间自适应1.flex布局中间定宽两边自适应1.flex布局<div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div></div><style> div{ height:
2022-04-15 21:16:41
1388
原创 webpack
一.前端工程化与webpack 1.前端工程化 模块化:js 的模块化、css 的模块化、资源的模块化 组件化:复用现有的UI结构、样式、行为 2.webpack 的基本使用 1.什么是webpack webpack 是前端项目工程化的具体解决方案 主要功能: 前端模块化开发 代码压缩混淆 处理浏览器端...
2022-03-04 17:43:06
131
原创 Vue2笔记
Vue React Angular 前端三大框架 组件(是对UI结构的复用)一.Vue概述 1.什么是Vue 是一套用于构建用户界面的前端框架 (1)构建用户界面 用vue 往html 页面中填充数据 (2)框架 框架是一套现成的解决方案 程序员只能遵守框架的规范去编写自己的业务功能 2.Vue 的特性 (1)数据驱动视图 (2)...
2022-03-04 17:42:03
719
原创 Vue3笔记
一.前端工程化 webpack 代码压缩、解决js 的浏览器兼容性问题、性能优化 webpack.config.js文件下: mode 节点: 1.development 开发时用,不代码压缩和性能优化,打包速度块 2.production 发布时用,代码压缩和性能优化,打包速度慢 webpack.config.js文件是webpack 的配置文件,打包...
2022-03-04 17:41:23
822
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人