- 博客(41)
- 收藏
- 关注
RSS订阅
原创 Vuex的使用（案例解析）
Vue 就是一个构造函数，生成的实例是一个巨大的对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。所以渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面：new Vue({ el: '#app' ...})那么 export default {} 又是来干嘛的？这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，那么就要用 ES6 的 import/export 语法 ，在文件 A 中定义输出接口
2020-07-15 12:57:47
1622
1
原创 JS-DOM BOM（未完）
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性案例：点击图片切换为背景图案例：表格隔行变色案例：表单全选、取消全选1.利用DOM提供的方法获取元素2.利用节点层级关系获取元素这两种方法都可以获取元素节点，但是节点操作更简单。
2023-09-07 16:44:44
184
原创 Vue3学习（仅为了记录，参考意义不大）
setup语法糖：总结：开启深度监听同样的写法beforeUnmount和unmounted对应beforeDestoryed和destoryeddefineProps原理还是props，只不过在setup里面可以去接收使用父组件里面写v-model，子组件里defineModelpinia官网：https://
2023-09-07 16:41:40
551
原创 HTML5+CSS3（新增特性）
一.HTML5新特性1.HTML5新增的语义化标签2.HTML5新增的多媒体标签2.1 video标签2.1.1 语法2.1.2 常见属性2.2 audio标签2.2.1 语法2.2.2 常见属性2.3 多媒体标签总结3.HTML5新增的input类型4.HTML5新增的表单属性二.CSS3新特性1.CSS新增选择器...
2021-07-08 17:54:00
225
原创 初始化git仓库以及把项目代码托管到github或者码云详细步骤
一.初始化git远程仓库1.进入官网https://gitee.com/。自己在码云中注册一个账户并且登录（这个步骤就不详细说了）2.二.将本地项目托管到github或者码云中1.将鼠标放到页面右上角的加号，点击新建仓库2.自己起一个名字，名字不得与曾经创建的仓库重复，以显示绿色对勾为标准，最下面开源or私有自选，3.下面对勾全部不勾选，点击创建。显示如下界面，若不是这个界面就删掉仓库，重新按照上面的步骤操作。4.复制第一行命令（图中为橘黄色底色的命令），在全局配置这个命令。按下
2021-06-23 16:13:56
619
原创 CSS的word-wrap、word-break、word-spacing、white-space、letter-spacing
使得文本换行有很多方式，1.< br/>标签元素，能够强制使得所在位置文本换行2.< p>元素，< div>设定宽度，都可以对文本内容实现自适应换行3.对于长单词或者链接，默认不会断开换行，方式2就不能够在其这些文本内部进行换行了，这时就需要word-wrap : break-word ;或者word-break:break-all;实现强制断行。两种方法的区别说明：1，word-break:break-all 例如div宽400px，它的内容就会到400px自
2021-05-06 11:15:51
896
原创 js将数组对象中某个值相同的对象合并成一个新对象
let arr = [ { clfl: '不动产登记申请书', sfbz: null, caseAttachId: '6583bcb8-8ed3-482e-9e8c-b36e16665d5a' }, { clfl: '不动产登记申请书', sfbz: null, caseAttachId: '07cf2603-8c09-4491-99ec-6f428e941e97' }, { clfl: '申请人身份证明材料', sfbz:
2021-04-30 09:31:56
2548
原创 vant折叠面板默认展开问题
最近做项目有个需求：让所有的vant组件库中的折叠面板van-collapse-item全部打开，collapse折叠面板是嵌入在van-tab中的。之前通过查资料，发现只要这两个值一样就能将面板默认置为打开。注意：van-collapse中绑定的activeName不是一个数组就会报错这里因为上面绑定都是动态的，所以我们不能给activeName写死某个值，那么循环把所有title放到activeName数组里。通过给activeName的赋值处理，就能让activeName的值和guid
2021-04-25 13:55:28
6706
原创 解决Cannot download “https://github.com/sass/node-sass/releases/download/....“
执行npm install命令过程中，node-sass无法下载，那么可以使用淘宝镜像下载，具体命令如下：npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/然后在npm run start运行即可
2021-04-22 17:33:39
315
原创 CSS全部知识合集（基础部分）
一.CSS简介1.css-网页美容师2.css总结3.css语法规范4.css代码风格4.1 样式格式书写4.2 样式大小写4.3 空格规范二.CSS基础选择器1.CSS选择器的作用2.选择器的分类2.1 标签选择器2.2 类选择器2.2.1 类选择器的多类名2.3 id选择器2.4 通配符选择器3.基础选择器的总结三.CSS字体属性1.字体系列2.字体大小3.字体粗细...
2021-04-06 18:46:45
551
原创 forEach和map返回新数组问题
以前查 forEach 和 map 的区别时, 总能看到这样一句话:forEach() 方法不会返回执行结果, 而是 undefined. 也就是说, forEach() 会修改原来的数组. 而 map() 方法会得到一个新的数组并返回.我的理解就是使用 forEach 遍历一个数组, 修改 item 的值, 就会改变原数组, 但最近发现并不一定会改变, 所以就做了一些测试测试一：可以看到这样是可以修改原数组的值的那试试 map 吧咦? arr 这个原数组的值为什么也改变了呢?在网上搜
2021-02-24 11:54:37
3719
原创 vue进阶篇(5)----vuex详解总结
一.Vuex的概念和作用之前我们学到过组件原型，所有的组件都继承自vue的原型，所以在原型上加一些东西，所有组件都能用，Vue.prototype.XXX就可以实现多个组件拿到原型上的数据，但是它有个弊端，它不像data被加入到vue的响应式系统中，我们自己定义的数据并不在响应式系统中，所以当其中一个组件修改了原型上的数据值时，其他组件的这个数据并不会跟着一起改，所以虽然这个方法能实现，但是不完善，由此我们就需要使用vuex。二.单界面到多界面状态管理切换1.单页面状态2.多页面状态管理2.
2021-02-19 18:08:40
280
原创 el-form的model、prop属性和表单校验等详解
Vue 的 el-form 提供了表单校验功能， :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。组件封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。el-form 的 model 属性el-form 的 model 属性是用来指定表单使用的数据的，虽然 el-form 指定了 model 对象，但是，理论上，vue 并没有限制 el-input 绑定的数
2021-01-08 15:10:12
40435
9
原创 vue---:rules 自定义校验方法以及同一表单多种校验规则
<el-form ref="cqhyForm" :model="propertyData" label-width="130px" :rules="cqhyFormRules"><!--这里为表单内容--></el-form> <script>export default { data() { return { rules1: { qlrmc: [{ required: true, message: '请输入',
2021-01-08 14:59:07
12726
原创 vue进阶篇(3)----Router总结（含生命周期钩子内容）
一.箭头函数1.三种定义函数的方式比如改第一种方式中aaa那个函数，用箭头函数写就是如下图，因为aaa函数没有参数，所以括号里没东西，而且也没有返回值。2.参数和返回值的问题函数有多行代码时就照常写。当函数中只有一行代码时不仅可以省略return，而且可以把这一行代码的返回值给返回出去。那么如果说没有返回值的时候呢？还是会执行函数中的代码，而这个函数的结果也可以看到。（图中console.log的返回值是undefined，所以打印函数的值就是undefined）3.箭头函数中
2021-01-04 14:21:39
2422
原创 vue进阶篇(2)----vue cli总结
一.vue cli简介和安装为了即用脚手架3也能用脚手架2：终端的设置详解：拓展：chrome之所以运行很快是因为有v8引擎，默认情况下，js代码是先生成字节码（同java），再按字节码跑在浏览器上解析。而v8引擎跳过了字节码这一步，直接把js编译成二进制代码，而二进制代码是我们的机器真正运行的代码，所以v8引擎效率更高。但现在火狐等浏览器都用的v8引擎（v8引擎是开源的），所以差距不大了。而node为我们在浏览器上执行js代码做了一层底层的支撑，本来js代码只能跑在浏览器上，那我们
2020-12-24 18:07:15
203
原创 vue进阶篇(1)----webpack总结
一、模块化开发1.原始弊端：变量命名冲突，js文件引入顺序也会影响代码逻辑，多人开发时很容易出现问题。解决方式：闭包防止了命名冲突问题，但是代码复用性极大降低，无法使用另一个文件的变量或者函数了。完美解决方式：模块化，模块化核心：导出和导入重点了解：commonJs、ES6的modules...
2020-12-23 10:05:41
169
原创 Vue路由的使用和route-link router-view样式和动画的设置
什么是路由后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；<!DOCTYPE html><html lang="en"><
2020-12-11 17:26:25
2471
原创 vue.prototype.$xxx的使用
每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。import utils from '@/pages/util/utils'Vue.prototype.$util=utils 简而言之，就是说，你在当前项目中，可能会用到很多的工具方法，公共方法，但是你不想去污染全局的一个作用域或者每个组建中重复写同样的方法，那么就可以通过vue.prototype去定义成他的实例对象.比如：export default { dataURLto
2020-11-20 15:43:41
5851
原创 vue基础知识总结
一、vue为什么要区分动态绑定class和style：:class是为了在当前页面(当前组件)中给某一个元素进行样式的动态切换:style大部分在公共组件中书写，是方便进行子组件复用时候每个不同页面同一元素的样式改变。...
2020-11-20 15:31:34
948
1
原创 VUE父子组件传值（含实例）
vue父子组件1.父传给子（在子组件中改数据）父组件：1.在子组件上绑定数据arrData2.在data()中给出定义（注意数据类型）3.对需要传给子组件的数据进行相应操作子组件：1.在props中给出定义2.watch监听数据变化3.在watch定义的方法里对数据进行操作（与子组件自己的数据进行交互）2.子传给父（不可以在传给父组件之后修改数据）根据情况讨论，这里是因为子组件被父组件在一个界面多次调用，为了区分开组件，设置了一个spantitle作为唯一key，然后把spanti
2020-09-10 15:54:05
5629
原创 VUE作用域插槽详解（＜slot＞、v-slot、slot-scope）
什么是插槽？插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制如下代码：在子组件中放一个占位符在父组件中给这个占位符填充内容：展示的效果:现在来看看，如果子组件中没有放插槽，同样的父组件中在子组件中填充内容，会是啥样的：子组件代码无插槽：2. 父组件照常填充内容：3. 展示的效果：总结：如果
2020-08-28 14:13:51
32242
14
原创 vue 侦听器watch 之 深度监听 deep 以及 immediate
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: <input type="text" v-model="person.firstname"></p> </div></template><script> export default { data(){
2020-08-17 10:49:50
2882
原创 let { [key]: id = 0, ...rest } = obj-极限解构
最近遇到了一个问题，来自于下面的一段代码：let { [key]: id, ...rest } = obj假如我们有以下数组const users = [ { name: 'Michael', group: 1 }, { name: 'Lukas', group: 1 }, { name: 'Travis', group: 2 },]我们把它按照 group 字段进行分组映射如下：{ '1': [ { name: 'Michael' },
2020-08-11 14:27:10
421
原创 axios常见传参方式及基本使用
1:get请求一般发送请求是这么写axios.get('/user?id=12345&name=user').then(function (res) { console.log(res);}).catch(function (err) { console.log(err);});但是为了方便全局统一调用封装的axiosaxios.get('/user', { //params参数必写 , 如果没有参数传{}也可以 params: { id:
2020-08-10 11:19:30
26903
2
原创 VUE关于操作数组的方法
1，锁定数组的长度(只读模式)[ Array.join() ]var a = [1,2,3] //定义一个数组Object.defineProperty(a,"length",{writable:false}) //将a数组的长度属性设为只读a.length = 0 //将a的长度改为0console.log(a.length); //打印a数组的长度，还是32、将数组合并成字符串（返回字符串）[ Array.join() ]var a = [1,2,3];var b = a.joi
2020-08-10 09:49:53
872
原创 Eslint讲解及报错解决
ESLint 教程文档：http://eslint.cn/docs/user-guide/configuringESLint的2种配置:1.Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个文件。2.Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件为整个目录和它的子目录指定配置信息。可以用 .eslintrc.* 文件或者在 package.json 文件里的 eslintConfig 字段
2020-08-05 14:10:39
1648
原创 Object.assign()的使用和注意
基本用法Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。注意，如
2020-08-04 17:39:43
4505
原创 Vue子组件调用父组件
Vue子组件调用父组件的方法Vue中子组件调用父组件的方法，这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> // 记得写组件名称 <child></child> </div></template><script> import child from '~/components/dam/chil
2020-08-03 18:04:05
166
原创 required string parameter ‘XXX‘is not present 的几种情况
required string parameter 'XXX’is not present 的几种情况情况一：原因是由于头文件类型不对，可以在MediaType中选择合适的类型，例如GET和POST情况二：jquery提交delete时，不支持@RequestParam，只支持@PathVariable形式情况三：若api在调用的时候，如果存在重类型，但不重名；例如：/id与/name，两者在类型上是一样的情况四：这里提示Required String parameter ‘XXX’ is not
2020-07-17 18:22:17
16808
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人