- 博客(37)
- 收藏
- 关注
RSS订阅原创 【无标题】
vue3上手教程Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本！那么还没有了解vue3的小伙伴们要抓紧时间补补课了哈，今天这篇文章就来描述一下作者在学习vue3时候记录的一些重要知识点，大家一起来学习一下吧。1.setup首先来说一下这个setup函数，在vue3中setup是所有Composition API的容器，我们用到的数据，方法，计算属性等都要放入其中，返回值是一个对象或者一个渲染函数，为对象时，返回的值可以直接在模板中使用，同时，这个setup也是一个钩子函数，这个在我们
2022-02-08 16:18:23
394
原创 2021-09-17
表单点击触发显示的聚焦问题在开发过程中我们会遇到表单和表格嵌套的问题，当表格的某一项我们在点击以后才会显示出表单的状态进行编辑，这种情况我们会遇到一个问题就是点击以后没有触发input的focus事件，那么怎么才能实现点击以后自动聚焦呢，看下面代码 <el-table-column prop="beizhu" label="详细描述" align="center"> <template slot-scope="scope">
2021-09-17 14:13:32
66
原创 2021-08-24
element ui el-select样式修改在开发中可能会遇到对el-select的样式风格做统一修改，为了保持统一色调 .el-select { width: 100px; height: 28px; margin-left: 11px; & ::placeholder { color: #047cff; } ::v-deep .el-input--suffix { height: 100%; >
2021-08-24 08:54:39
83
原创 2021-08-05
vue项目中echarts插件的引入方式当我们在项目中用到echarts时，我们要怎么引入和使用呢，首先要下载依赖，然后我们在项目中引用。npm install echarts --save在单个组件中引入在单个组件中使用的时候import echarts from "echarts";export default { name: "addEcharts", data() { return { }; }, created() {}, methods: {
2021-08-05 10:32:35
52
原创 2021-08-05
main.js中文件的引入问题在main.js中用new Vue创建实例的时候有两种写法，一种是我们在对象里面添加了el属性，将实例挂载到dom上new Vue({ el: "#app", store, router, render: h => h(App)});另一种是没有el属性，我们需要通过$mount方法手动挂载，new Vue({ router, store, echarts, render: h => h(App)}).$mount('#
2021-08-05 10:11:58
63
原创 2021-08-03
Vue中filters的用法在项目开发中对一些数据进行相同的处理我们可能会用到filters，今天给大家分享一下filters在项目中的用法定义在单个的组件中在单独的组件中运用我们这样声明， filters: { upStr: function (val) { if (!val) return '' return val.toUpperCase(); }, },然后渲染时这样调用，用管道符号进行分割 {{ "abcd" | upStr }}定义全局
2021-08-03 08:58:07
58
原创 2021-08-02
js中try，catch的用法我们平时在处理异常时某些场景可以用到try，catch，下面简单和大家分享一下try，catch的用法try 测试代码块的错误。catch 语句处理错误。throw 创建并跑出错误。<script>"use strict"; try { // let arr = [1, 2, 3] arr.forEach(element => { }); console.log(arr[0] > 3); thro
2021-08-02 18:02:22
65
原创 2021-08-02
节流与防抖在项目优化时候，我们有些场景会用到节流和防抖，今天就和大家分享一下如何实现节流与防抖防抖防抖：事件频繁触发，只有最后一次生效，下面在js文件中，我们写了节流和防抖的函数 //防抖 function debounce(fn, delay) { let timer = null; return function () { clearTimeout(timer); timer = setTimeout(function () {
2021-08-02 16:44:02
74
原创 vue中插槽的分类和用法
今天和大家分享一下vue中插槽的分类和用法默认插槽Vue 实现了一套内容分发的 API， slot 元素作为承载分发内容的出口。它允许你像这样合成组件：<navigation-link url="/profile"> Your Profile</navigation-link>然后你在 navigation-link 的模板中可能会写为：<a v-bind:href="url" class="nav-link"> <slot>
2021-07-28 10:03:53
273
原创 2021-06-06
element-ui多选表格默认选中和禁选如何设置在我们开发中用到element-ui的多选表格的时候，有时候根据业务的需求需要默认某些选项自动勾选，或者设置为禁用状态，下面和大家分享一下如何实现。下面写了一个demo，引用了一组表格，在页面加载时候模拟接口获取表格绑定数据，下面见代码<template> <div class="about"> <div class="box">我是element-table组件</div> <el-
2021-06-06 19:54:06
83
原创 2021-06-05
async和await为了解决函数回调问题，es7中引入了async和await来处理异步。async和await的用法async函数返回的是一个promise对象，async和await是配合使用的，await后面跟的表达式也需是一个promise对象，当async函数调用后执行到await语句时，会等待到await后面的异步操作执行完之后再执行后面的同步代码，我们来看一个例子 getDataArr() { return axios.get("123445").then((res)
2021-06-05 10:26:48
62
原创 2021-06-01
vue中的watch和$watch的用法和区别今天给大家分享一下vue中的watch和(watch),在项目开发时候遇到了一个问题就是在编辑页面初次加载时候需要监听一个数组的变化，但是又不想用watch来一直占用性能，于是便用到了watch),在项目开发时候遇到了一个问题就是在编辑页面初次加载时候需要监听一个数组的变化，但是又不想用watch来一直占用性能，于是便用到了watch),在项目开发时候遇到了一个问题就是在编辑页面初次加载时候需要监听一个数组的变化，但是又不想用watch来一直占用性能，于是便用
2021-06-01 22:38:53
206
原创 2021-05-29
sass语法介绍1.变量声明sass中的变量声明是用$符来开头的,比如我们的项目名称和定义的主体颜色,我们就可以定义为变量$primary:#f15922;$namespace:'pcms';//调用 .#{ $namespace } { .color { color: $primary }}#{}为sass语言的插值应用,类似于vue中的{{}}2.嵌套语法css不支持层级,而sass中却可以实现层级嵌套,SASS用缩进来简写嵌套结构,比如 选择
2021-05-29 18:11:06
56
原创 2021-05-23
js中用&&来代替if判断js中我们可以使用短路运算符来代替判断语句，使代码显得更优雅一些比如：当a<b时a=3,否则a=5. let a = 1 b = 2 a = (b > a) && 3 || 5 // if (b > a) { // a = 3 // } else { // a = 5 // } console.log(a);看另一个例子 let arr=
2021-05-23 18:24:20
61
原创 2021-05-23
mock的使用方法在前端日常开发过程中，我们会遇到后端接口尚未提供的时候，此时要想前端开发能够正常进行就可以用mock来模拟后端接口返回的数据，大家一起来学习一下mock的用法吧1. 依赖安装执行命令npm install mockjs 来安装依赖2. 编辑mock.js文件然后建一个mock的文件夹里面存放index文件，在index文件里我们引入mock//引入mockimport Mock from 'mockjs'//伪造数据const data = { 'id': '12
2021-05-23 16:53:17
69
原创 2021-05-23
js中reduce的用法今天给大家分享一下js中数组的reduce方法，用法为arr.reduce(callback(),init)，我们就用代码来和大家演示一下Array.reduce(function(prev,curr,index,array){return prev},init)// prev代表之前的元素，根据是否有init来确定初始值//init代表prev的初始值，存在的话初始值为init，不存在的话，初始值为数组的第一个元素//curr为当前元素，若有初始值，curr初始为数组
2021-05-23 14:37:10
66
原创 2021-05-16
Vue 的父组件和子组件生命周期钩子函数执行顺序在vue项目开发中，如果我们清晰的了解了vue父子组件中声命周期钩子函数的执行顺序，那开发过程就会少踩很多坑点。加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted子组件更新过程父 beforeUpdate ->
2021-05-16 17:28:32
59
原创 2021-05-16
关于vuex中的actions的参数问题在vuex的使用过程中遇到了actions的传参问题，今天来给大家分享一下，actions中定义的方法有一个默认参数，就是与store实例具有相同方法的属性context，该属性包过以下几个方面context:{ state, 等同于store.$state，若在模块中则为局部状态 rootState, 等同于store.$state,只存在模块中 commit, 等同于store.$commit
2021-05-16 15:42:42
45
原创 2021-04-11
路由懒加载后报错[vue-router] Failed to resolve async component default:Error:Loading chunk 10 failed.此错误大概是渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误，刷新页面后就不会报错，可以这样来解决问题/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */router.onError((error) => { const pattern = /Loading chunk (\
2021-04-11 20:49:52
70
原创 2021-04-11
vue-混入的用法日常开发中，我们可能会用到一些公共的方法，公共的数据源，但是在每个用到的组件中去书写太过于麻烦，那么我们如果用vue给我们提供的混入方法将会非常的高效。首先来看一下全局混入全局混入配合插件实现全局混入，在utils文件夹下面建立index.js文件，在该文件中，我们可以定义一些公共方法和data数据，包过vue中的钩子函数也可以在此声明例如下面的代码const myPlugin = {}myPlugin.install = function (vue) { vue.mixin
2021-04-11 20:43:24
48
原创 2021-04-11
vue项目中引入封装的公共组件在我们的开发过程中，我们会封装一些公共的组件，如果高频使用的组件我们并不想每次都用import的方式引入，那我们就可以用vue的插件来完成，我们先建了一个components的文件夹，将定义的vue文件放入其中，同时定义一个index.js文件，在index.js中，我们这么配置//先用require.context的方法遍历目录下的所有vue文件const modulesFiles =require.context('./',true,/\.vue$/)const
2021-04-11 18:48:40
63
原创 2021-03-07
利用set数组去重set用于存储任何类型的唯一值，无论是基本类型还是对象引用。只能保存值没有键名严格类型检测如字符串数字不等于数值型数字值是唯一的遍历顺序是添加的顺序，方便保存回调函数常用的set数组去重方法 let arr = [1, 2, 3, 4, 4, 3, 2, 1] arr = [...new Set(arr)] console.log(arr);将set类型转化为数组可以用扩展运算符，也可以用数组的静态方法Array.from()...
2021-03-07 19:24:18
58
原创 2021-03-07
JS中this的指向问题在全局环境下this就是windows对象的引用，比如说我们在全局环境下定义一个函数，看如下代码function better() { console.log(this); } better()调用函数打印出来的就是window对象，构造函数主要用来生成对象，里面的this默认就是指当前对象，当一个函数为一个对象的属性时，此时函数中的this指向也是指向这个对象 function Dage(params) { this.na
2021-03-07 19:06:43
60
原创 2021-02-28
数组的静态方法Array.from对数组进行处理我们经常用到map，foreach等方法，其实array.from用起来也是很方便的，下面介绍一下array.from 的用法， let arr = [{ name: '老于', age: 12 }, { name: '张三', age: 18 }, { name: '李四', age: 22 }, { name: '王五', age: 12 }, { name: '老朱', age: 25 }] // let obj={name:'张三',
2021-02-28 16:32:25
52
原创 2021-02-21
eventbus的使用在vue项目中，如果项目不是很大，在兄弟组件通讯时候可以不用vuex，这个时候eventbus是个不错的选择，需要在组件之外定义一个js文件来作为组件间通讯的桥梁，js内容如下，创建一个vue实例import Vue from 'vue'export default new Vue然后在需要通讯的组件中引入js文件import eventbus from "../eventbus.js";举个例子就是在一个组件中通过自定义事件传递信息，然后在另一个组件中监听事件获取数据
2021-02-21 20:19:01
87
1
原创 2021-02-21
vuex的使用在vue中进行兄弟组件之间的通讯的时候我们会用到eventbus和vuex这两种方式，当然并不是这两种方式仅仅局限于兄弟组件通讯，当项目较大时候，我们通常会用到vuex1.创建vuex实例vuex项目初始化后，src目录会多一个store/index.js，里面会进行vuex的初始化，vuex的组成如下：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store(
2021-02-21 20:05:31
99
2
原创 vue中watch的用法
vue中watch的用法在平时工作中经常会遇到需要对某些数据进行监听，根据数据的变化来执行某些操作，这个时候我们可以用到vue中的监听器watch,下面我们一起来看一下watch的具体用法new Vue({ el: '#root', data: { name: 'zhangsan' }, watch: { name(newName, oldName) { // ... } } })newName和oldName分别对应name的新值和旧值，在
2021-01-27 21:13:40
378
原创 vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别在使用vue进行路由传参的时候我们将常会用到params和query两种形式，两者是有区别的啊，大家在使用的过程中千万要注意哦params传参在路由中假设我们这么定义{ path:"/login", name:"login", component:login }在进行页面跳转传参的时候我们采用这样的形式是拿不到参数的this.$router.push({ path:"/login", p
2021-01-09 11:14:02
421
原创 对象键值的获取方法obj.keys和obj.values
对象键值的获取方法obj.keys和obj.values工作中我们经常会专门去取对象的键和值去push进一个新数组中，用这两种方法就会变得很方便了Object.keys这个方法用来取对象的属性，会返回一个新数组 let arr = [{ name: '老于', age: 12 }, { name: '张三', age: 18 }, { name: '李四', age: 22 }, { name: '王五', age: 12 }, { name: '老朱', age: 25 }] let
2021-01-08 18:21:24
1281
原创 数组的some,every,map,foreaach方法的区别
数组的some,every,map,foreaach方法的区别工作中我们经常会通过遍历对数组进行一些处理，但是有些特定的情况出现后我们可能会想要打断遍历，这个时候我们就需要注意了，不是所有的方法都能打断遍历的map方法map方法可以对数组进行遍历，但是在满足某些判断条件后，想要终止遍历是实现不了的，大家看代码 let arr = [{ name: '老于', age: 18 }, { name: '张三', age: 18 }, { name: '李四', age: 22 }, { name:
2021-01-08 17:51:35
413
原创 element-ui中empty-text的用法
element-ui中empty-text的用法在使用element-ui组件的过程中，当表格的绑定数据为空时常需要显示暂无数据等字样，这时候就用到了empty-text用法有两种第一种直接写在el-table上 <el-table :data="tableData" border empty-text='暂无数据' style="width: 100%"> <el-table-column prop="date"
2021-01-05 18:32:10
11215
原创 js中map和foreach的用法
js中map和foreach的用法在日常开发工作中，经常需要对数组进行一些遍历处理，这个时候大家会想到map和foreach方法，下面简单介绍一下两者的用法和区别foreach的用法forEach用来遍历数组，可以改变原数组，不会产生新数组。 let arr = [{ name: '老于', age: 18 }, { name: '张三', age: 15 }, { name: '李四', age: 22 }, { name: '王五', age: 25 }, { name: '老朱', ag
2021-01-05 17:44:33
476
原创 JS中find和filter的区别
这里写自定义目录标题JS中find和filter的区别find的用法filter的用法JS中find和filter的区别js中的find和filter方法大家在工作中会经常遇到，那么他们有什么区别呢，下面就和大家一起分享一下。find的用法通俗的讲find是找到数组中符合条件的第一项，看下面代码 let arr = [{ name: '老于', age: 18 }, { name: '张三', age: 15 }, { name: '李四', age: 22 }, { name: '王五',
2021-01-05 16:24:06
3986
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人