VUE
关注
分享
扫一扫
董厂长
I'm looking for opportunities. If you are interested, please send me a message.
展开
-
click.stop 阻止事件冒泡
这意味着，如果在一个嵌套的元素上使用了 `click.stop` 修饰符，那么当该元素被点击时，该元素上的处理函数会被触发，但是事件不会继续传播到父元素上。在上面的代码中，当用户点击“Click me”按钮时，只会触发该按钮上的处理函数，而不会触发父元素上的处理函数。在上面的代码中，当用户点击“Submit”按钮时，`submitForm` 方法会被调用，并且使用了 `prevent` 修饰符来阻止表单提交。`click` 和 `click.stop` 都是事件修饰符，用于处理鼠标点击事件。原创 2023-07-24 16:29:11 · 1493 阅读 · 0 评论 -
数组变化，但是无法更新视图（原因和思考）
写代码时候遇到数组更新后，视图不更新。一般的解决方案是重新解构赋值。原因的话，其实一开始就想到了自己写Vue项目中遇到的问题。当时把annotations放到一个数组中，然后展现到视图层，让用户预览自己的所有pdf注释，然后遇到了注释数组更新，视图层不更新的问题。复习一下Vue2数据响应原理，（ 注：Vue3响应式改成了Proxy听说Vue3响应式原理变成了Proxy_董厂长的博客-优快云博客）官方的解释很清晰：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue原创 2022-07-13 12:00:08 · 2333 阅读 · 0 评论 -
听说Vue3响应式原理变成了Proxy
事情是这样的，最近要code review，本来想把之前那个表单校验任务优化一下。失焦校验真SB，尝试使用ES6的Proxy来做校验。_董厂长的博客-优快云博客背景：这两天准备优化表单代码，公司规定的是失焦校验。问题描述：表单里有个input框，只能输入数字。使用Ant desgin的表单前缀加了一个“PT”，此时的PT是一个icon。并不是字符串。传入数据库的时候，需要拼接字符串加上“PT”（这个是字符串）。关闭模态窗口表单重新校验了，而且校验的是最新值，如“PT1234” 。项目统一失焦校验，导致原创 2022-05-13 01:12:39 · 2009 阅读 · 0 评论 -
关于Blob的使用
最近的Task涉及文件的上传和下载，查了查NGZERRO，发现相关组件是基于Blob的封装。写个笔记记录一下。要点：1. Blob 是一个容器2.Blob需要声明Type类型3.Blob拿到数据，通过Promise方式回调的到。4.Blob文件如何下载？将Blob转为一个Url，然后设置url的download属性，click点击下载。4.异步使用FileReaderFileReader(文件上传)的基本使用_yw00yw的博客-优快云博客_filerea..原创 2022-05-07 17:01:45 · 2057 阅读 · 1 评论 -
Angular笔记：在Angular中监听某个值的变化
使用getter在Angular中可以用getter来监听某个值的变化，类似于Vue中的watchimport { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { _inpu...原创 2022-04-16 21:51:28 · 5777 阅读 · 0 评论 -
一次打印多张的邪门歪道
上个礼拜接到这样一个需求，要求点一次打印，打印出三张。思路：1. print.js2. 打印机的开发者工具3. JS一把梭哈之前做研究生毕业时候搞过print.js和print.vue，确实可以实现多张打印，但是我不想引入包，简单功能用JS一把梭哈就行了。先把要打印的页面获取innerHTML，直接累加多次： for(var i = 1; i < ${printNumber}; i++){ document.body.原创 2022-01-25 15:38:20 · 998 阅读 · 0 评论 -
SASS中，CSS影响最小原则如何实现？
在scss文件中，设置好，以xxx开头的class，或者含有xxx开头的class。都会按照指定的css执行。class*=“ xxx-”这个比较难理解，意思是含有 （空格）xxx- 的元素。原因是有时候元素会对应多个class选择器<div class="foo1 foo2 foo3">...原创 2021-10-28 01:20:33 · 121 阅读 · 0 评论 -
Vue3父组件的属性，如何绑定到子组件？
原因：父组件写的点击事件，点击按钮，打印hi。但是实际上子组件中是一个<div><button></button></div>的形式。这样点击div也会出发点击事件。实际上这个点击事件是作用在子组件的div上的，那么我们想法是作用在子组件的button上。1.继承属性设置为false此时事件不会被绑定在任何一个元素上面。2.在你想绑定的元素上，绑定 $attrs这是什么意思？默认这个元素将继承父组件中写的所有的属性。...原创 2021-10-26 18:29:23 · 973 阅读 · 0 评论 -
Sass的坑：无法用除法，以及建议添加到开发环境依赖项中
最近在用Vue3做一个练手项目，用的Sass首先Sass最新版本用除法报错，建议我math.div()。无卵用，然后谷歌把默认版Sass删了，降级，亲测1.32.12可以用第二个坑：要把Sass放到开发环境依赖项中，所以打开配置JSON文件。移动到DevDependencies中。解决...原创 2021-10-25 23:32:27 · 1554 阅读 · 0 评论 -
VUE中 对.sync修饰符的理解
// 数组var number = [1,2,3,4,5,6]console.log(...number) //1 2 3 4 5 6//对象var man = {name:'chuichui',height:176}console.log({...man}) / {name:'chuichui',height:176}原创 2021-10-22 20:23:29 · 215 阅读 · 0 评论 -
Webpack一些知识点
const path = require('path');module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js', },};entry：指定你的项目的入口。默认为src下的index.htmloutput: 指定转译之后的文件夹，以及转.原创 2021-10-13 22:35:47 · 173 阅读 · 0 评论 -
Vue中el的理解
Vue中的el，称之为挂载点。原理来自于：MVC架构中，使用一个标签当做容器包住一些标签，使得标签被重新渲染，同时保留一些必要的属性。<body id="body"> {{ message }} <h2 id="app" class="app"> {{ message }} <span> {{ message }} </span> </h2> <!-- 开发环境版本，包含了有帮助的命令行警告 -->原创 2021-10-12 22:42:09 · 11361 阅读 · 0 评论