- 博客(36)
- 收藏
- 关注
RSS订阅原创 一起学web conponent
引用作为一个黑盒，插入到document tree里面，提供了一些方法供外面引用，里面外面不会相互污染，document tree里不清楚shadow tree里面具体的内容。（1）.打开开关 this.attachShadow({mode: 'open'});例：通过标签方式创建（创建的div需要克隆一下，可能被其他处引用）（4）被用于定义webcomponent的html结构。（1）伪类 :host ::part。1.构造 -> 渲染 -> 更新->移除。（3）不会被渲染在dom tree。
2025-01-08 11:41:43
317
2
原创 vue3学习笔记（11）-组件通信
ref定义的数据在模板里面引用的时候可以不用.value。父传子 接收用defineProps([''])1.props 父传子 子传夫。$event:事件对象。
2024-12-30 18:00:18
160
原创 vue3学习笔记（10）-$subscribe，store组合式写法
2.localStorage里面穿的都是字符串，关掉浏览器数据还在。1.$subscribe订阅，监视vuex中数据得修改。只能获取字符串，用ts语法写明，作为字符串使用。
2024-12-30 17:06:14
284
1
原创 vue3学习笔记（9）-pinia、storeToRefs、getters
如果在reactive里面定义ref，则打印c时，无需.value 他自动拆包，如果直接在外面定义的ref则需要.value,他没有拆包。更优雅的写法，结构赋值正常那种结构出来的数据不是响应式的，如果用storeToRefs包裹就可以是响应式了。1.新的集中式状态（数据）管理库，redux vuex pinia。3.pinia存储读取数据。
2024-12-30 16:49:28
253
原创 vue3学习笔记（8）-路由的props、replace、编程式路由导航、重定向
写法二，函数写法，可以自己决定将什么作为props给组件 （params和query）path圈黄的部分 ，如果props为true，则相当于通过下方标签方式，进行穿值。其中push（这里面，有两种写法和to一样，对象和字符串）写法三，对象写法，可以自己决定将什么作为props给组件。编程式导航重复跳转在vue2里面报错，vue3不报错。脱离标签实现路由跳转，脱离RouterLink。push ：推入栈内，可以回退页面，默认。页面显示3秒，自动跳转下一个页面。写法一，将路由收到的多有。
2024-12-26 17:58:23
173
原创 vue3学习笔记（7）-路由
history模式:url更加美观，路径上不带#，服务端配合处理路径问题，否则报错。src、views || oages：路由组件。一般组件 ：亲手写出来的hash模式:带#，服务器无需处理路径。路由组件:靠路由规则渲染出来的。components：一般组件。index.vue页面。1.router定义。4.路由器的工作模式。
2024-12-26 15:01:11
196
原创 vue3学习笔记（6）-生命周期、hooks
3.hooks 让相同的数据方法贴在一起 模块化开发 （没有hooks没有组合式）父和子之间的生命周期流程，子所有的流程钩子走完了，继续走父亲的钩子。4.hooks能写钩子，计算属性。命名需要位 useXXX。加入所有相关数据，并暴露。
2024-12-26 11:15:27
229
原创 vue3学习笔记（4）-watch监听
（3）函数返回一个值（getter函数）(2) 引入watch ---》 监视。例一 ：监视ref定义的基本类型的数据。1.watch监听，只能监听四种数据。（2）reactive定义的数据。（4）一个包含上述内容的数组。(1)：自动.value。（1）ref定义的数据。
2024-12-18 17:57:37
256
原创 vue3学习笔记（3）-ref、reactive
import { reactive } from 'vue' //引入对象类型，改变不需要后缀加value了。先引入ref ，并包裹 （前面待_下划线的，不是给我们用的）模板中引用不需要加value，下面写的js代码需要加value。数据最重要，方法放到orther里。数组也属于对象，可以动态修改。
2024-08-22 20:52:04
170
原创 vue3学习笔记 - vue2、vue3区别
vue2是配置项optionsApi，vue3是组合式。env.d.ts：ts认识 .png .txt。vite.config.ts：整个工程配置文件。.gitignore：git忽略文件。index.html:入口文件。src的入口 main.ts。public：页签图标。
2024-08-21 20:49:36
148
原创 sql增删改查
查询表加查询条件：select * from t_user where user_age=28。查询表：select * from t_user。
2023-11-24 15:17:21
95
原创 koa项目搭建
1.env文件 连接数据库 账号密码端口号信息2.db文件夹下的seq.js文件引入并且下载Sequelize组件，引入env中的数据库配置文件const { Sequelize } = require('sequelize')const { MYSQL_HOST, MYSQL_PORT, MYSQL_USER, MYSQL_PWD, MYSQL_DB } = require('../config/config.default')Sequelize是一个操作数据库插件，实例化Se..
2022-05-17 14:59:18
1014
原创 上传pdf图片 文件
1.标签部分配置项含义👉 上传 Upload - Ant Design 上传文件 <Upload // 对应后端的 ctx.request.files.file name="file" listType="text" className="avatar-uploader" showUploadList={false} action="/ap..
2022-05-13 10:56:57
1614
原创 上传图片base64
1.使用的Upload组件2.上传前面调用beforeUpload方法，里面进行判断格式（jpg或者png），或者判断尺寸1024，3.转为base64格式的（url变成字符串）4.上传中handleChange，调用转换成base64的方法其中为什么要转换成base6呢？1. 提升性能:网页上的每一个图片，都是需要消耗一个 http 请求下载而来的,图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地.减少ht..
2022-05-10 18:33:43
3323
原创 博客markdown
1.下载markdownit库2.引用3.使用4.来源Vue中Markdown转HTML【Vue】_哔哩哔哩_bilibili
2022-05-10 09:56:33
134
原创 引用高德地图外部接口
右侧地址天气组件（引用的高德提供的接口）1.IP定位2.获取天气IP定位-API文档-开发指南-Web服务 API | 高德地图API天气查询-API文档-开发指南-Web服务 API | 高德地图API实战获取设备ip"public-ip": "^4.0.4",const publicIp = require('public-ip') // 获取外网ipconst ip_param = await publicIp.v4()...
2022-05-08 12:07:07
872
原创 vuex的使用
应用场景：基于父子，组件兄弟组件我们传值会很方便，但是没有关系的组件之间要使用同一组数据就可以用vuex，他提供了一个公共仓库，保存着所有组件都能公用的数据。vuex里面包含action，mutation，state步骤执行顺序是devtools：vue发开的浏览器插件，可以帮助记录跟踪每次修改的state的状态的，知道究竟是哪一步骤改动了state，方便跟踪错误， state一定是通过mutation来修改的，只有这样dextools才能跟踪。可以通过 vue...
2022-04-01 12:17:23
1183
原创 js防抖和节流+闭包
防抖：不想频繁的调用代码使用场景模拟：乘客出行准备乘坐大巴车，第一个乘客上车之后，大巴车规定等候10分钟，若在10分钟之内有人上车，那就再等10分钟，直到10分钟之内没有上车的，就立即发车。(最后一次生效)实例：实时搜索功能，一般输入一个字请求一个接口，这样很消耗性能 <input type="text" id="input"></input> <script> function func(){
2022-03-30 18:29:29
726
3
原创 promise的使用
1.用来处理异步请求， //用延时模拟异步操作 setTimeout(() =>{ console.log('hello') },1000)2.Promise是一个类，所以引用要靠对象,调用时候有两个参数一个resolve一个reject,这两个本身又是函数这就是回调地狱，可以用promise来解决 new Promise((resolve,reject)=>{ set
2022-03-28 18:31:07
445
原创 vue页面跳转打开新的窗口
1.主页面里写入，可以在url里面拼接参数和tokenwindow.parent.postMessage({ type:"iframe", id:"other_"+parseInt(Math.random()*100), title:"电路详情列表", // url:"https://www.baidu.com/s?ie=UTF-8&wd=baidu" url:CORE_CONFIG.DETAIL_URL+'?objectid=' + val.OBJECTID + '&a..
2022-03-28 17:09:36
3148
原创 vue路由+配置+实践+keep—alive
路由配置npm router 在src中创建router文件夹，在文件夹中创建index.js文件来配置路由相关信息index.js中定义//配置路由相关信息import Vue from 'vue'import Router from 'vue-router' //安装导入的路由import Login from '@/components/login'import Main from '@/components/main'//1.通过Vue.use(插件)来安装插件Vu
2022-02-11 11:02:59
646
原创 插槽+组件应用
情况一创建父页面main.vue和子页面list1.vue ，父页面中如下<template> <div> <listA :data_child_A='data_parent_A'> <button>按钮1</button> </listA> <listA :data_child_A='data_parent_A'> <button>
2022-02-11 10:15:39
515
原创 脚手架+父子组件之间的通信+实践
步骤一 新建页面父组件 main.vue子组件1 list1.vue子组件2 list2.vue步骤二 父传子 propsmain.vue中<template> <div> <listA :data_child_A='data_parent_A'></listA> <listB></listB> </div></template><scri.
2022-02-10 17:48:43
523
原创 【组件之间的通信】
组件应用：1.组件的使用（全局）<div id='app'> <!-- 3.使用组件 --> <my_cpcc></my_cpcc></div><script> //1.创建组件构造器 const cpcc = vue.extend({ template: ` <div> <h2>我是组件</h2>
2022-01-19 17:16:57
527
2
原创 js入门刚学会得知识点
1..v-if与v-show的区别？在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。一般来说，v-if 有更高的切换消耗
2022-01-14 14:31:48
112
原创 vue中axios请求接口封装
1.基本请求接口（默认是get请求，不写method） axios({ url:'http://123.456' }).then(res =>{ console.log(res) })2.post请求接口 axios({ url:'http://123.456', method:"post", }).then(res =>{ console.log(res)
2021-12-13 13:34:34
2123
原创 JQ+bootstrap+模态框实现备注列（手动输入）+ 定义接口(可多选数据传入) + 父子页面传参数(传参)
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button.
2021-11-18 13:44:19
525
2
原创 vue+echarts实现中国地图，左边显示人数
<template> <div class="container"> <h2>疫情人数：{{counter}}</h2> <div ref="echarts" style="width:100%;height:376px"></div> </div></template> tooltip: { //这里设置提...
2021-08-02 14:34:07
585
原创 vue-cil2和echarts实现图
一，项目提前准备1.创建脚手架，删除多余部分（helloworld）2.安装echarts npm install echarts --save3.在components文件夹中创建组件echarts.vue文件4.在App.vue文件中的template模板中引入echarts<template><div id='app'> <echarts></echarts></div></template&g...
2021-08-01 20:07:45
178
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人