- 博客(33)
- 收藏
- 关注
RSS订阅原创 ele-h5项目使用vue3+vite+vant4开发：第四节、业务组件-SearchView组件开发
需求分析使用 和 实现动画效果使用nameSearch 组件复用computed 计算属性理解watch 监听属性理解watch。
2024-02-03 19:37:14
1048
2
原创 ele-h5项目使用vue3+vite+vant4开发：第三节、自定义hooks-useToggle实现搜索页展示切换
理解hooks 就是将去改变一个参数值时，页面也会更新对应的值的想法、抽象，用代码实现的地方。
2024-02-03 13:55:11
983
原创 在Vue 3中，如何理解使用CSS变量（也被称为自定义属性）来动态地设置和更新组件的样式
在上面的示例中，我们在`<style vars>`块中定义了一个CSS变量`--bg-color`。然后，在组件的模板中，我们通过绑定`:style="`--bg-color: ${bgColor}`"`将`bgColor`变量绑定到样式中的`--bg-color`变量上。同时，在`<h1>`标签中，我们使用`var(--bg-color)`来引用并使用该CSS变量。当按钮被点击时，`bgColor`变量会在`red`和`blue`之间切换。这使得我们可以更方便地根据条件或用户输入来改变组件的样式。
2024-02-01 23:33:14
1215
原创 在vue3中，组件的script setup 里如何理解 v-model 参数
在组件的模板中，我们通过绑定`:value="modelValue"`将`modelValue`属性绑定到`input`元素的`value`属性上。在`handleChange`方法中，我们使用`$emit`方法触发了`update:modelValue`事件，并传递了`input`元素的值作为参数。在上面的示例中，我们在`MyComponent`组件上使用了`v-model="message"`，从而实现了将`message`属性双向绑定到`MyComponent`组件的`modelValue`属性上。
2024-02-01 23:22:01
651
原创 在Vue 3中，理解使用defineEmits函数来定义组件的事件。
在Vue 3中，可以使用`defineEmits`函数来定义组件的事件。`defineEmits`函数接受一个对象作为参数，该对象的键是事件名，值是一个回调函数或一个函数数组。在上面的示例中，我们使用`defineEmits`函数定义了一个名为`myEvent`的事件。然后，在组件的方法中，我们使用`$emit`方法触发了`myEvent`事件，并传递了一个字符串参数。通过使用`defineEmits`函数，我们可以明确地列出组件支持的事件，并提供类型推断和文档化的好处。
2024-02-01 23:07:13
782
原创 ele-h5项目使用vue3+vite+vant4开发：第一节、页面头部实现
定义在Vue中，通过定义组件的props选项来声明组件的属性。属性是从父组件传递给子组件的数据，通过属性可以实现父子组件之间的通信。在Vue 3中，可以使用函数来定义组件的属性。无论是使用函数还是直接在props选项中定义属性，都可以通过父组件传递数据给子组件的方式来使用这些属性。使用例如，在父组件中使用子组件并传递属性：{ value: 1, label: '牛腩' },{ value: 2, label: '红烧肉' },{ value: 3, label: '宫保鸡丁' }
2024-02-01 00:15:33
1327
原创 配置vite自动按需引入 vant 组件
什么是 tree shaking？Tree shaking是一种优化技术，用于减少JavaScript或其他编程语言中未被使用的代码的体积，从而提高应用程序的性能和加载速度。它的原理是通过静态分析代码，识别出未被引用的模块和代码块，并将其在编译过程中移除无用的资源,包括JS代码、CSS文件实现方法：使用了es6语法importexport。
2024-01-31 22:29:09
844
原创 AST语法树是什么？
在上面的示例中，AST的根节点是一个Program节点，表示整个程序。程序中有一个FunctionDeclaration节点，代表一个函数声明。函数声明有一个Identifier节点表示函数名，一个Parameters节点表示函数的参数列表，一个BlockStatement节点表示函数的代码块。它用于表示源代码的结构和语法信息，并可以作为编译器、解释器等工具的基础。一个AST由多个节点组成，每个节点代表源代码中的一个语法结构。AST是根据编程语言的语法规则构建的，因此不同编程语言的AST可能有所区别。
2024-01-31 21:35:20
540
原创 使用 vite 配置请求代理
与其他打包工具（如 Webpack）不同，Rollup 更注重于创建小型、高效的打包文件，适用于构建库、框架和组件等应用场景。Rollup 采用 ES6 模块的标准语法，可以将代码转换为标准的 ES5 语法，并且支持 Tree Shaking 特性，可以识别并删除未使用的代码，使打包后的文件更小、更高效。使用 Rollup 打包代码可以提供更小的文件体积和更好的性能，同时还可以通过插件系统扩展其功能，例如添加压缩插件来进一步减小文件体积。通过反向代理服务器分配不同标识进行访问，不同的域服务端。
2024-01-31 00:35:39
1054
原创 使用ionic/angular开发app项目 使用Android Studio进行打包apk命令操作
本文章得有一个基于ionic、angular、node的环境app项目 为前提才能正常跑，没有仅供参考。
2024-01-30 14:47:28
835
1
原创 vue-router 实现页面路由
单页面应用（又叫SPA）：不刷新而切换页面某部分，实际是切换页面里的部分内容。单页面应用路由：实际表示应用页面的状态pathname（history api） 或 hash（url中#后面的部分）用来记录路由一个url对应一个路由路由就是表示页面的状态，一般用url的 pathname 或者 哈希#带着后面的部分 来表示。
2024-01-30 00:14:54
709
2
原创 安装 vant-ui 实现底部导航栏 Tabbar
介绍 - Vant 4 (vant-ui.github.io)Vant 是一个轻量、可定制的移动端组件库。
2024-01-29 23:20:33
871
原创 使用Vite创建vue3项目
Vite是一个现代化的前端构建工具，专为快速开发现代Web应用而设计。它与传统的构建工具不同，采用了一种全新的开发模式，旨在提供更快的冷启动、热模块替换和按需编译的能力。Vite的主要特点包括：快速的冷启动：Vite利用ES模块的特性，在开发环境下将每个模块作为单独的文件处理，而不是将它们打包到一个文件中。这样，在启动项目时，Vite只需要进行少量的初始化工作，大大缩短了冷启动时间。真正的按需编译：Vite只会编译当前正在开发的文件，而不是整个项目，这种按需编译的方式极大地提高了开发过程中的编译速度。
2024-01-28 18:06:12
437
原创 Git 介绍 与 配置
Git是一个分布式版本控制系统，用于跟踪文件的更改和协作开发。它可以管理项目的版本历史记录，并允许多个开发者在同一时间进行并行开发。Git的基本配置包括用户名和电子邮件地址，这些信息将出现在提交记录中。此外，还可以配置一些其他的Git选项，例如默认文本编辑器、换行符规范等。这些配置是全局的，会应用于所有的Git仓库。如果只想对当前仓库进行配置，可以去掉。解决上图产生的问题就出现了git 分布式版本控制系统 看下图。命令查看当前的Git配置。
2024-01-28 17:22:46
441
原创 TypeScript 基础概念，安装使用
泛型 generic：包括 泛型 对象类型、泛型 函数、泛型 类。特殊类型 ： void any unknown never。对象类型：匿名、接口 interface、类型 type。3、将typescript编译成JavaScript。1、初始化项目，新建package.json。下面是tsconfig.json文件里的参数。4、新建一个tsconfig.json。什么是ts TypeScript?2、安装typescript。基础类型：字符串、数字、布尔。函数 function。复杂类型：数组、对象。
2024-01-28 17:07:59
488
原创 TypeScript 基础学习
一种基于JavaScript的强类型、静态的编程语言，提供了类型检测的工具。TypeScript是具有类型语法的JavaScript。
2024-01-26 20:44:30
471
2
原创 Android Studio 安装配置教程 - Windows版
第一次创建项目，下载以gradle为主要的内容，其他内容就是支持项目编译运行所需要的插件，组件等内容，而这个gradle如果网络不好就会直接停止下载，你可以切换网络环境继续下载，直到你的项目可以正常运行为止。Android Studio 默认会把你的SDK下载放在C盘选择custom，下一步。手动下载Gradle版本然后解压到指定目录下，你可以上网上去看看。分别点击三个目录，选择Accept，点击Finish。下载快慢看网速，点击Finish。自定义修改路径，下一步。
2024-01-26 13:40:44
1250
3
原创 JavaScript 数组的对象值为文字，为null时，sort排序对null的处理方式
const arr = [{a: '委屈问问去'},{a: null},{a: '问问去'},] const arrr = arr.sort(function (a, b)=>{ if(a.a === null){ //如果a值为null，就把a的对象放最后 return 1 }else{ return -1 }})结果： [{a: '委屈问问去'},{a: '问问去'},{a: null},.
2021-08-18 15:20:04
1164
原创 angular 架构概览和项目结构
angular 架构概览angular架构概览基本涉及常见重要的知识点：模块 路由 组件 模板 服务 指令 管道不同的类型，文件名通常会都按照一定的规范来命名，以便直接看出该文件的角色。当然，文件命名只是给开发人员来方便维护、辨别，对于 Angular 来说，这些都是一份份的 ts 文件代码，所以，都需要在相对应的文件中加上一些装饰器比如：@Directive，@Pipe，@Component，@NgModel 等这些，才能够让 Angular 识别出该文件的角色、用..
2021-08-09 20:05:16
2022
原创 @angular/core--@viewChild
属性装饰器，用于配置一个视图查询。 变更检测器会在视图的 DOM 中查找能匹配上该选择器的第一个元素或指令。 如果视图的 DOM 发生了变化，出现了匹配该选择器的新的子节点，该属性就会被更新。说明:在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询。元数据属性：selector - 用于查询的指令类型或名字。read - 从查询到的元素中读取另一个令牌。static - 如果为 true，则在变更检测运行之前解析查询结果，如果为 false，则在变更检测之后解析。默认为 f
2021-07-20 11:59:34
158
原创 javaScript中方法使用记录(拓展中...)
js方法使用记录1.split()方法1.split()方法语法：stringObject.split( separator, howmany)返回值：一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。提示：如果把空字符串 (
2021-07-15 10:58:51
73
原创 Property ‘contentWindow‘ does not exist on type HTMLElement,类型htmlelement上不存在contentwindow属性
一、问题Property 'contentWindow' does not exist on type HTMLElement二、解决方法 /** * Property 'contentWindow' does not exist on type HTMLElement - 出现这个问题的处理方法； * start */ const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =
2020-09-28 14:48:09
5284
原创 【注释修正版】tinymce paste，paste_preprocess中粘贴图片之前， 完整图片上传方法 以及使用文件服务返回的URL使用方法（使用正则获取img标签），js获取img标签。
Tinymce富文本想学，图片上传可参考代码怎么写的。一、实例：注释：只写了blob流图片数据格式上传，专门用在word文档里复制粘贴用的(只能一张一张复制粘贴上传)，好像tinymce，paste不支持全选图片，多张上传（我懒，想少掉点头发）paste_preprocess(plugin, args) { const z = '<img[^<>]*? src="([^<>]*?)"'; const IMG = args
2020-09-25 17:56:37
2431
1
原创 IDEA tomcat 正常启动却报404错误的问题。原始服务器没有找到目标资源的当前表示，或者不愿意透露目标资源的存在
@TOThe origin server did not find a current representation for the target resource or is not willing to disclose that one exists.Tomcat 配置1、网页输入localhost:8080跳转的页面：||下面不用看了–...
2019-05-13 17:36:51
21789
18
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人