- 博客(30)
- 收藏
- 关注
RSS订阅原创 【笔记】ES6 数组的扩展
ES6对数组也进行了一些扩展，不过很多东西我觉得平时不太常用，就粗略的了解一下。扩展运算符...// 简单示例console.log(...[1, 2, 3]) // 1 2 3function sum(a, b) { return a + b}sum(...[1, 2]) // 3扩展运算符的应用// 复制数组const arr1 = [1, 2]const arr2 = [...arr1]// 合并数组const arr3 = [...arr1, ...arr.
2022-02-23 17:40:59
228
原创 【笔记】ES6 函数的扩展
ES6对函数的使用进行了一些扩展，这篇文章就简单介绍一下这部分的内容。函数参数设置默认值ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。// ES6之前的做法function func(name) { name = name || '李焕英' console.log(`你好，${name}`)}func() // 你好，李焕英func('张小斐') // 你好，张小斐// ES6中，可以在声明函数的时候直接设置参数的默认值function hello(name.
2022-02-23 11:05:44
351
原创 【笔记】ES6 箭头函数
在ES6中允许使用=>来定义函数。这篇文章主要介绍以下箭头函数的写法和一些需要注意的问题。// 普通写法const normal = (a, b) => { return a + b}normal(1, 2) // 3// 上述写法等同于function normal2(a, b) { return a + b}normal2(1, 2) // 3箭头函数还有简写的方式，但是要满足一定的条件。只有一个参数，可以去掉小括号函数体中只有一句表达式，可以省略大.
2022-02-22 15:47:31
123
原创 【笔记】ES6 数值的扩展
ES6对数值对象进行了一些扩展，这篇文章我们就来学习一下。二进制和八进制的表示方式// 十六进制表示const num16 = 0xA0B0C0// 在ES6中，用0b或0B表示二进制const num2 = 0b111// 在ES6中，用0o或0O表示八进制const num8 = 0o777Number.EPSILON由于js在浮点数运算时并不精确，引入Number.EPSILON就是为了浮点数的运算。实际上，Number.EPSILON是 JavaScript 能够表示的.
2022-02-21 15:19:59
252
原创 【笔记】ES6 字符串新增方法
ES6中新增了很多字符串相关的方法，如下String.fromCodePoint()String.raw()实例方法：codePointAt()实例方法：normalize()实例方法：includes(), startsWith(), endsWith()实例方法：repeat()实例方法：padStart()，padEnd()实例方法：trimStart()，trimEnd()实例方法：matchAll()实例方法：replaceAll()实例方法：at()这篇文章指针对其中.
2022-02-21 11:06:45
490
原创 【笔记】ES6 模板字符串
ES6中的字符串可以用反引号括起来用作模板字符串。const str = `Hello World`console.log(str) // Hello World通过上面的例子，我们能感觉到，这个用反引号括起来跟单引号括起来貌似没有什么区别，那我们为什么要用模板字符串呢？那是因为我们还没有讲到模板字符串的特性。模板字符串内可以插入变量值和表达式// 插入变量const moon = '月亮'const str1 = `代表${moon}消灭你`console.log(str1) /.
2022-02-18 17:56:31
365
原创 【笔记】ES6 解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。数组const people = ['尼古拉斯赵四', '莱昂纳多刘能']let [sige, llllllneng] = peopleconsole.log(sige) // 尼古拉斯赵四console.log(llllllneng) // 莱昂纳多刘能对象const DYS = { leader: '郭德纲', skills: ['相声', '京剧'], show: () => {.
2022-02-18 17:23:16
275
原创 【笔记】ES6 let与const
如果您已经用过let和const了，没错，你已经在使用ES6了。let和const是ES6新增加的关键字，用于变量的声明。我们知道，以前的js声明变量用的是var，那这个let和const跟它有什么区别呢，接下来我们就来探讨一下。let声明的变量只在let命令所在的作用域内有效{ let a = 1 var b = 2 console.log(a) // 不报错，输出1 console.log(b) // 不报错，输出2}console.log(a) // 报错，变量a未.
2022-02-16 14:16:36
244
原创 【笔记】初识ES6
大家在前端面试中经常会听到的一个词ES6，那么这个ES6是什么呢，它又有什么特性呢，这篇文章我们就浅显的学习一下。当然开篇我们就要推荐ES6的经典学习宝典，由阮一峰创作的——《ECMAScript 6 入门教程》。本文中很多知识点笔者都是通过这本书学习到的。什么是ES6ES6 的第一个版本在 2015 年 6 月发布，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。我们可以理解为ES6是为了弥补上一代JavaScript的不足应运而生的，在其中增加了许多新的概念及用.
2022-02-16 11:06:43
252
原创 【笔记】vue3.2 给循环的元素加ref
其实这个题目在vue的文档中已经了讲过了。想看官方文档的请点击：官方解决方案本文主要内容是结合element-plus中的el-table，给el-table-column中的元素设置ref，上例子。<script setup>import { ref, nextTick, onMounted } from 'vue'const columnRefs = []const setColumnRefs = (el) => { if (el) { columnRef.
2022-01-13 19:12:36
3204
原创 【笔记】vue3.2 如何在＜script setup＞注册一个局部自定义指令
在vue3.x中，注册局部自定义的指令是在setup方法外面，directives下面便可自定义指令，那在vue3.2中的<script setup>标签该如何自定义指令呢？其实，在vue3.2中，自定义指令变得更加的简单，直接上例子。<script setup>// 注册一个局部的自定义指令，需要以小写v开头const vFocus = { mounted(el) { // 获取input，并调用其focus()方法 el.querySelector.
2021-12-31 17:19:09
3168
2
原创 【笔记】vue3.2 父组件如何调用子组件中的方法
父组件调用子组件中的方法，这是个看似不常见，但是大家都会遇到的问题。在vue2.x中可以用this.$refs、在vue3.x中也可以给子组件一个ref，然后直接.value来操作它，但是到了vue3.2中，似乎是不行了，那是因为你忽略了一个新的语法糖defineExpose。在vue3.2中，由于使用了<script setup>，在这个标签中的变量或是方法需要你主动去暴露，不然在组件外部是无法直接获取到的。废话不多说，直接上例子。<!-- 子组件 child.vue -->.
2021-12-26 11:28:58
6411
6
原创 【笔记】vue3.2 生命周期钩子的使用
在vue3.2的文档中，似乎没有对生命周期钩子使用的特别介绍，其实，我们本着没有特别介绍就跟以前一样的态度，在vue3.x中怎么用，在vue3.2中一样是那么用。那就上例子？<script setup>import { onMounted, onUnmounted } from 'vue'onMounted(() => { // do something})onUnmounted(() => { // do something})</script.
2021-12-26 11:14:44
1282
原创 【笔记】vue3.2 组件中引入其他组件
在vue3.2中，组件中定义的变量和方法不再需要return了，而是可以直接在模板中使用。<script setup>import { ref } from 'vue'const text = ref('点击')const handleClick = () => { console.log('click')}</script><template> <button @click="handleClick">{{ text }.
2021-12-26 11:09:53
11426
原创 【笔记】vue3.2 组件自定义事件
在vue3.x中，组件自定义时间是通过上下文context来调取得，而这个context也是在setup(props, context)中，那vue3.2在把setup写到<script>标签后，该如何使用呢？在vue3.2中，提供了defineEmits语法糖，可以用来定义事件的名字，废话不多说，上例子。<!-- 子组件 child.vue --><script setup>const emit = defineEmits(['custom-event']).
2021-12-26 10:57:57
1634
原创 【笔记】vue3.2 props在组件中的应用
在vue3.x中，props是在setup外定义，以setup(props)的形式应用的，那么在vue3.2中该如何使用props呢？在vue3.2中，提供了一个defineProps语法糖用于定义props，先上例子。<script setup>import { onMounted } from 'vue'const props = defineProps({ customStr: { type: String, default: '' }, custo.
2021-12-26 10:45:12
3301
2
原创 【笔记】初识vue3.2
相信大家都看过尤大发的<script setup> + TS + Volar = 真香，那么<script setup>是什么呢，那就不得不说vue3.2版本提供的新特性了。说实话，当知道vue有新特性的时候，我的内心是崩溃的，我想学无止境不应该只是用在工作吧，带着无奈但是又想探索的心情，我开始了vue3.2的学习之旅。真香。看过vue3.2的文档，最直观的感觉就是<script>标签上可以加上setup了，看过vue3.x文档的朋友们应该知道，vue3.x.
2021-12-26 10:07:10
753
原创 【笔记】uniapp中，用vue3.x如何接收uni路由中的参数
在官方文档中只展示了vue2.x接收uni路由中参数的方式，但是对vue3.x没有过多的介绍，本篇展示了vue3.x如何接收uni路由中的参数假设有路由/pages/user/index?userId=123，在vue2.x中是这样接收userId的export default { data() { return { userId: '' } }, onLoad(option) { this.userId = option.userId }}.
2021-11-27 09:16:38
4653
9
原创 【甘特图】vue3.x + DHTMLX
vue3.x项目需要显示甘特图，经学习研究，目前应用比较多的甘特图技术是dhtmlx，这篇文章将简单的介绍其在vue3.x中的应用。1.下载安装npm install dhtmlx-gantt或yarn add dhtmlx-gantt2.编写Gantt组件<template> <div ref="ganttRef"></div></template>import { onMounted, ref } from 'vue'imp.
2021-09-13 13:54:36
4989
1
原创 【踩坑】vue应用部署在nginx后，刷新404的解决方法
在vue应用部署到nginx时，遇到刷新找不到页面或者直接输入路径找不到页面vue-router官方给出的解决方法如下location / { try_files $uri $uri/ /index.html;}
2021-09-02 08:36:06
485
原创 【笔记】vue3.x 组件props接收路由参数
在开发过程中，希望用组件的props接收路由的参数。直接写在路径中传递假设路径：/user/u123456route中的设置如下，路径中的参数用:修饰，props设置为trueconst routes = [ { path: '/user/:id', component: () => import('@/views/user/index.vue'), props: true }]在组件的props中声明路径中的变量即可export default.
2021-08-31 09:54:40
1634
原创 【笔记】vue3.x 组件引用自身
在开发过程中，遇到了组件引用自身的情况，在此记录一下需要注意的问题。如何引用需要给组件设置name，然后在模板中直接引用即可。<template> <example-component></example-component></template>export default { name: 'ExampleComponent'}可能遇到的问题控制台警告[Vue warn]: Extraneous non-emits ev.
2021-08-30 16:17:38
3071
原创 【笔记】vue3.x 清空reactive对象
有一个reactive对象，在清空这个对象时，直接给其赋{}不起作用。为了解决这个问题，采取了一点粗糙的方法，代码如下：<template> <el-button @click="clear">清空</el-button></template>setup() { const form = reactive({ name: 'Name', age: 18 }) const clear = () => { .
2021-08-19 13:43:24
11099
原创 【踩坑】vue项目在env文件中设置的变量无效
vue项目，在开发过程中需要设置环境变量，但是在env文件中设置了变量值，但是无效经查阅资料发现，vue项目的env变量需要加上“VUE_APP_”前缀。// 错误的设置方式BASE_API_PREFIX = '/api'// 正确的设置方式VUE_APP_BASE_API_PREFIX = '/api'...
2021-08-17 11:03:20
4328
1
原创 【笔记】vue3.x 根据窗口大小设置滚动条的高度
在开发过程，遇到了滚动条块的高度需要根据窗口变化而变化的需求，下面我们用elment plus中的el-scrollbar来实现这个需求还是直接上代码。<template> <el-scrollbar :style="{ height: `${scollHeight}px` }"></el-scrollbar></template>setup() { const getScollHeight = () => { // 根据自.
2021-08-13 15:54:52
1273
原创 【踩坑】vue3.x 使用mitt().off()取消不掉订阅
在使用mitt的时候，off()后发现并未取消订阅，在阅读源码后发现，off()方法需要传入两个参数，一个是时间名，而另一个是订阅时的回调函数。我们直接上正确使用的代码。setup() { const bus = inject('bus') const callback = () => { // 逻辑代码 } onMounted(() => { bus.on('mitt-name', callback) }) onUnmounted(() =>.
2021-08-13 15:45:57
3005
原创 【笔记】vue3.x watch监听props中的数据
在使用watch监听props中的数据时，发现捕获不到值的变化我们直接上正确使用的代码。props: { target: { type: String, default: '' }},setup(props) { watch( () => props.target, (newVal, oldVal) => { // 逻辑代码 } )}...
2021-08-13 15:30:29
6086
6
原创 【笔记】vue3.x ref()语法糖赋值
由于没有仔细阅读vue3.0的官方文档，在给ref()变量赋值的时候遇到了问题众所周知，vue3.0增加了ref()、reactive()语法糖。ref() 基础类型、数组reactive() 对象两者除了包裹的内容不同，在使用方法上也有一定的区别。<template> <div>{{ refData }}</div> <div>{{ reactiveData.data }}</div></template>.
2021-08-13 15:19:42
9270
3
原创 【踩坑】element-plus el-tag 动态编辑标签 使用v-if后，ref获取不到input组件
组件通过v-if控制显示和隐藏，使用ref无法获取该组件如果改用v-show来代替v-if的话，可能会出现一些bug。比如，控制组件的flg没有变化的话，第二次访问组件时，组件不会隐藏。所以，用v-show来代替v-if并不是一个很好的解决方案。除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。上面是V.
2021-08-09 14:07:09
2264
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人