自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(36)
  • 收藏
  • 关注

原创 route和router

this.$route : 路由信息对象,只读对象,表示当前的路由信息,包含了当前url解析得到的信息,包含当前的路径、参数、query对象等。this.$route为当前route跳转对象,里面可以获取到name、path、query、params等。this.$router : 是路由操作对象,只写对象,是VueRouter的实例,包含了一些路由的跳转方法,钩子函数等.。ps:this.router中的currentRoute就是组件路由中的this.$route。

2023-10-23 17:10:43 104

原创 网页实现文字转语音朗读功能

使用Speech Synthesis API实现语音合成并进行播报的代码

2022-10-24 11:17:20 2765 1

原创 摸鱼神器!VS Code 变身小霸王游戏机!

今天,要给大家介绍一款摸鱼神器,把 VS Code 变身小霸王游戏机!1、下载安装直接访问下列链接:https://marketplace.visualstudio.com/items?itemName=gamedilong.anes或者在VS Code插件市场搜索“小霸王”,然后安装即可。2、开始摸鱼在安装好“小霸王”插件后,在左侧活动栏可以看到一个小霸王游戏机的图标,点击就能显示出小霸王的游戏列表。在 Remote 列表中,就可以把游戏下载到本地了!在 Local 列表中

2020-11-08 16:46:14 4454

原创 异步返回的tree展开节点不生效,解决办法原来如此这么简单

用了ant-design-vue的tree,单个控件设置defaultExpandAll为true即可展开所有节点。在小demo里测试一点问题也没有。<template> <a-tree :defaultExpandAll="true" :tree-data="treeData" :replace-fields="{ children: 'children', title: 'title', key: 'id',

2020-10-24 22:53:56 5736 5

原创 ant-design-vue的select二级联动,联动文本不更新的解决办法

前言有了需要改动祖传代码项目需求:把之前的select改成二级联动。项目使用了ant-design-vue,数据为[{"id":1,"name":"前端开发"}]问题描述<a-form :form="form" @submit="handleCreateMenuSubmit"> <a-select style="width:50%" placeholder="请选择技术领域" @change="handleNoteCategoryChange">

2020-10-20 10:51:02 3570 3

转载 在HarmonyOS工程中添加Module

Module是HarmonyOS应用的基本功能单元,包含了源代码、资源文件、第三方库及应用清单文件,每一个Module都可以独立进行编译和运行。一个HarmonyOS应用通常会包含一个或多个Module,因此,可以在工程中,创建多个Module,每个Module分为Ability和Library(HarmonyOS Library和Java Library)两种类型。如上篇HarmonyOS工程介绍,在一个APP中,对于同一类型设备有且只有一个Entry Module,其余Module的类型均为Feat

2020-09-18 17:00:59 3733 1

转载 创建一个新的HarmonyOS工程

当开始开发一个HarmonyOS应用时,首先需要根据工程创建向导,创建一个新的工程,工具会自动生成对应的代码和资源模板。如果创建的工程包含JS语言,请确保已经下载了JS SDK包,具体可参考下载HarmonyOS SDK。说明:在运行DevEco Studio工程时,建议每一个运行窗口有2GB以上的可用内存空间。创建和配置新工程通过如下两种方式,打开工程创建向导界面。 如果当前未打开任何工程,可以在DevEco Studio的欢迎页,选择Create HarmonyOS Project开始

2020-09-18 17:00:05 3123

原创 HarmonyOS工程介绍

HarmonyOS APP工程结构在进行HarmonyOS应用开发前,您应该掌握HarmonyOS应用的逻辑结构。HarmonyOS应用发布形态为APP Pack(Application Package,简称APP),它是由一个或多个HAP(HarmonyOS Ability Package)包以及描述APP Pack属性的pack.info文件组成。一个HAP在工程目录中对应一个Module,它是由代码、资源、第三方库及应用清单文件组成,可以分为Entry和Feature两种类型。Entr

2020-09-18 16:59:25 3038 1

转载 vuex简述

vuex通过辅助函数将store的属性与方法,绑定到component中。componet监听用户行为,commit / dispatch 一个行为给 mutation / action。action 内部也是通过commit去执行 mutation,mutation相当于一个操作 state的列表。import Vue from 'vue';import Vuex from 'vuex';const store = new Vuex.Store({ //...})new.

2020-09-17 17:43:30 99

转载 vuex的基本规则

Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:应用层级的状态应该集中到单个 store 对象中。提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。异步逻辑都应该封装到 action 里面。state [type: Object]const store = new Vuex.Store({ state: { count: 1 } mutations: ...})modulesconst module

2020-09-17 17:42:43 328

转载 JavaScript数组进阶操作--some、reduce、forEach、every、filter、map

some()遍历数组,判断元素是否符合判断条件,若有一个符合就返回 true,若都不符合则返回 false,匿名函数的返回值就是判断条件不改变原数组 返回值:布尔值 true || false 参数:function (匿名函数),item:每一项元素参数解释每次遍历都会执行一次匿名函数,如果有一个匿名函数的返回值为 true,即有一个符合条件,那么 some()会返回 true 都为 false,才会返回 falsevar lesson = [ { name: "Vu.

2020-09-17 17:24:14 203

转载 webpack配置很麻烦?webpack配置看这里就够了!

webpack简述webpack简单来说就是一个模块打包器,也是目前最流行的前端构建工具之一,他将整个项目根据依赖关系通过各种loader与plugin的处理后进行打包;可以实现对代码的各种处理,比如less、sass、stylus的解析,ecmascript版本的转换、代码的压缩分割等。loaderloader可以说是webpack最核心的部分,前面所说的各种功能大部分就是又他完成的;loader简单来说就是一个导出为函数的JavaScript模块,webpack会配置文件申明的倒序调用loa

2020-09-17 17:15:37 324

转载 harmonyos的java UI框架简述

概述应用的Ability在屏幕上将显示一个用户界面,该界面用来显示所有可被用户查看和交互的内容。应用中所有的用户界面元素都是由Component和ComponentContainer对象构成。Component是绘制在屏幕上的一个对象,用户能与之交互。ComponentContainer是一个用于容纳其他Component和ComponentContainer对象的容器。Java UI框架提供了一部分Component和ComponentContainer的具体子类,即创建用户界面(UI)的各类组件

2020-09-17 17:12:37 3237

原创 快速入门HarmonyOS的Java UI框架

本文档适用于HarmonyOS应用开发的初学者。编写两个简单的页面,实现在第一个页面点击按钮跳转到第二个页面。注意:运行Hello World在创建工程时,设备类型和模板分别以Wearable和Empty Feature Ability(Java)为例,本文档也基于相同的设备类型和模板进行说明。编写第一个页面在Java UI框架中,提供了两种编写布局的方式:在XML中声明UI布局和在代码中创建布局。这两种方式创建出的布局没有本质差别,为了熟悉两种方式,我们将通过XML的方式编写第一个页面,通过代

2020-09-17 17:08:49 9963 1

转载 你不知道的鸿蒙——HarmonyOS

2020年9月10日,华为开发者大会发布了鸿蒙(HarmonyOS)2.0。HarmonyOS是全场景操作系统。也就是说,从理论上,HarmonyOS可以在任何平台上运行(包括但不限于PC、手机、平板电脑、车载电脑、手表、iot设备等)。那么这是怎么做到的呢?大家知道,不管是什么样的设备,通常由下面3个因素决定到底能运行什么的系统:(1)CPU架构(x86、ARM、RISC-V等)(2)CPU的处理能力(3)内存目前大多数硬件设备,CPU架构大多是x86和ARM的。这一点与OS内核有关。

2020-09-17 16:39:21 3377

转载 harmonyos的Js UI框架开发一个JS FA应用

开发一个JS FA应用此应用相对于Hello World应用模板具备更复杂的页面布局、页面样式和页面逻辑。该页面可以通过将焦点移动到不同颜色的圆形来选择不同的食物图片,也可以进行添加到购物车操作,应用效果图如下。图1JS FA应用效果图构建页面布局开发者在index.hml文件中构建页面布局。在进行代码开发之前,首先要对页面布局进行分析,将页面分解为不同的部分,用容器组件来承载。根据JS FA应用效果图,此页面一共分成三个部分:标题区、展示区和购物车区。根据此分区,可以确定根节点的..

2020-09-17 16:37:10 2746 3

转载 harmonyos的js UI框架FA概述

JS FA概述JS UI框架支持纯JavaScript、JavaScript和Java混合语言开发。JS FA指基于JavaScript或JavaScript和Java混合开发的FA,下面主要介绍:JS FA在HarmonyOS上运行时需要的基类AceAbility、加载JS FA主体的方法、JS FA开发目录。AceAbilityAceAbility类是JS FA在HarmonyOS上运行环境的基类,继承自Ability。开发者的应用运行入口类应该从该类派生,代码示例如下:public

2020-09-17 16:36:21 3684

转载 harmonyos的js UI框架简述

概述JS UI框架是一种跨设备的高性能UI开发框架,支持声明式编程和跨设备多态UI。阅读本开发指南前,开发者需要掌握以下基础知识:HTML5 CSS JavaScript基础能力声明式编程JS UI框架采用类HTML和CSS声明式编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的声明式编程,可以让开发者避免编写UI状态切换的代码,视图配置信息更加直观。跨设备开发框架架构上支持UI跨设备显示能力,运

2020-09-17 16:35:21 4160

转载 简说Vue3.0和Vue2.0的区别

默认进行懒观察(lazy observation)。 在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。 更精准的变更通知。 比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。 3.0 新加入了 TypeSc

2020-09-16 17:24:05 1219

转载 vue跨域解决的几种方案

一、开发环境解决跨域方法平时使用vue开发的时候,大多会使用vue-cli搭建项目,在vue-cli搭建的项目中有一个配置文件vue.config.js,可以在该文件中进行相应的配置解决开发环境的跨域问题。第一步设置公共urlapi/index.jsimport axios from 'axios'import router from '@/router/index.js'import store from '@/store/index.js'// 创建一个axios实例var ins

2020-09-16 17:01:24 2596

转载 vue给页面加缓存

提到缓存,第一反应就是keep-alive,奈何keepalive的坑实在是踩不过来。下面介绍一下本人使用的方法。需要加缓存的页面(一般为列表页)beforeRouteLeave (to, from, next) { // ... if (to.name === '详情页名字') { //去往详情页时需要缓存 let obj = JSON.parse(JSON.stringify(this.$data)) obj['$name'] = this.

2020-09-16 16:57:47 1218

转载 vue的 sessionStorage 数据缓存

存储缓存: sessionStorage.setItem(“iszan”, this.zanon);获取缓存: sessionStorage.getItem(“iszan”)删除缓存: sessionStorage.removeItem(“iszan”);页面加载:created() { if (sessionStorage.getItem("iszan")) { this.zanon = sessionStorage.getItem("iszan"); /

2020-09-16 16:51:54 962

转载 vue自定义全局公共函数

单独零散的函数在main.js里进行全局注册Vue.prototype.ajax = function (){}在所有组件里可调用this.ajax()多个函数定义在一个对象里// xx.js文件var tools = {}tools.addNum = function (x, y) { return x * y} // 还可以在这个文件里面添加多个函数tools.install = function (Vue, options) { Vue.prototype.$t

2020-09-16 16:47:48 491

转载 在vue单页应用中使用jquery

记录一个今天用到的vue-cli建立的应用中引入jquery的方式。首选通过npm安装jquery npm install jquery --save在build/webpack.base.conf文件当中引入jquerymodule.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js',

2020-09-16 16:41:55 357 1

转载 抹去 CSDN 中图片水印的方法

在 CSDN 中,上传图片时,会默认添加博客地址的水印。众所周知,在图片中添加水印,是为了保护个人版权,但有时候,在图片中添加水印,会使得图片模糊不堪,甚至会导致图片中某些关键信息被掩盖,还有水印的内容页不是我们想要的。这时,抹去图片中的水印,就显得尤为重要啦!接下来,咱们就一起测试一下,看看如何才能在 Markdown 编辑器上传的图片中,抹去图片的水印。插入的图片是这样的:![在这里插入图片描述](https://img-blog.csdnimg.cn/20200915131929

2020-09-16 16:38:05 257

原创 工作效率提升N倍,VSCode最常用快捷键要记牢

最常用快捷键快捷键太多,没必要完全记下来,只需记住一些常用的快捷键即可,一些不常用的快捷键在使用的时候加强记忆就好。列举出我自己常用的快捷键,不多,但够用!应付日常开发工作绰绰有余。Ctrl + Shift + P这个必须要放在第一位,这个命令是所有「命令之母」。这么说一点也不过分,它会打开 VSCode 命令窗口,在这个窗口下输入上述的插件名称就能知道这个插件支持哪些特性了,顺带还会说明特性快捷键。下面举个例子,先输入Ctrl + Shift + P打开命令查找输入框,然后输入book...

2020-09-16 15:42:43 142

原创 抖音那家公司发半个月工资奖金,员工:公司是我家

根据可靠消息显示,字节跳动公司(抖音母公司)发送邮件给员工,将给员工发放高额奖金。奖金金额为2020年8月固定薪酬的50%。只要是2020年7月1日至8月31日期间,工作日出勤天数大于等于26天的全职员工都可获得这笔奖金。字节跳动称,为了感谢全体员工,面对全球新冠疫情以及宏观环境变化的挑战,感谢全体员工所付出的努力,公司决定以此激励员工。因此有不少字节跳动员工在微博、朋友圈发声,称已经收到公司发放的奖金,还有的员工打趣称,“公司是我家”,“扶我起来,我去上班了”,“我还能再战50年”。

2020-09-16 10:12:01 1336

原创 HTTP状态码只知道404?梳理一下常见的HTTP状态码及其含义

最常见的HTTP状态码404,表示服务器找不到请求的资源。接下来一起看看常见的状态码的含义吧!100系列——通知表示临时响应并需要请求者继续执行操作的状态代码。100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。 101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。200系列——成功一切正常。实体主体中的文档(若存在的话)是某资源的表示。200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供

2020-09-16 09:23:32 1141

原创 vue里ref和$refs的区别

ref作用于组件<div id="app"> <navbar></navbar> <pagefooter></pagefooter></div>Vue.component('navbar',{ template:'#navbar', data:function () { return { navs:[] } }});Vue.c

2020-09-15 15:58:55 1971

转载 canvas和svg

Canvas画布则是绘制然后遗忘。一旦绘制完成,你就不能访问和处理像素。Canvas则用于绘制和遗忘类似动漫和游戏的场画。它就快多了,因为没有必要记住后面的东西。我们不需要将事件处理程序与图形对象关联,因为我们不需要引用它们。分辨率依赖。SVG绘制并记忆。换句话说就是,通过使用SVG绘制的任意形状都可以被记住和操作,并且浏览器可以再次渲染它。SVG可以很好地用于创建如CAD软件的图形,绘制之后允许用户操作。这是一个缓慢的过程,因为它需要记住坐标以便于后续操作。我们可以有与图形对象相关

2020-09-15 15:35:15 100

原创 HTML 5中的新表单元素类型

Color. Date Datetime-local Email Time Url Range Telephone Number Search 让我们一步一步来了解这些元素。如果你想显示拾色器对话框。<input type="color" name="color">如果你想显示日历对话框。<input type="date" name="date">如果你想用..

2020-09-15 15:21:35 120

转载 浅析鸿蒙 JavaScript GUI 技术栈

众所周知,刚刚开源的「鸿蒙 2.0」以 JavaScript 作为 IoT 应用开发的框架语言。这标志着继SpaceX上天之后,JavaScript 再一次蹭到了新闻联播级的热点。这么好的机会,只拿来阴阳怪气实在太可惜了。作为科普,这篇文章不会拿着放大镜找出代码中的槽点来吹毛求疵,而是希望通俗地讲清楚它所支持的 GUI 到底是怎么一回事。只要对计算机基础有个大概的了解,应该就不会对本文有阅读上的障碍。我们已经知道在「鸿蒙 2.0」上,开发者只需编写形如 Vue 组件式的 JavaScript 业务逻辑,

2020-09-15 14:51:44 1642

原创 vue大型项目一定要维持一个井然有序的Vuex Store

Vuex是Vue.js中的状态管理模式,它充当应用程序中所有组件的集中存储。Vuex帮助开发人员使用一套原则以一种更有组织的方式组织他们的项目。在了解这些原理之前,需要先了解Vuex store的4个主要组件:States: 用于保存您的应用程序的数据 Getters:用于访问store外部的这些状态对象。 Mutations:用于修改状态对象。 Actions:用于提交突变。遵循的原则如下:你需要将应用程序级状态集中存储在store中。 状态应该总是通过提交mutations而发生突

2020-09-15 14:19:54 480

原创 jsx是什么?

jsx是什么?那天在家族群里看到这个问题,让我感到惊奇的是有人回答了这个问题,如下图…我竟无言以对。作为长期混在编程圈的码农来说,jsx的意思好像不太一样。JSX是一种JavaScript的语法扩展,全称JavaScript XML,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面,能让我们可以在JS中写html标记语言。虽然vue也有jsx

2020-09-15 11:02:35 3603

原创 一图了解vue的生命周期

字不重要,看图。一图了解vue的生命周期1.beforeCreate :官方说明:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。解释:这是第一个生命周期函数;此时,组件的data和methods以及页面DOM结构,都还没有初始化;所以此阶段,什么都做不了。Init injections & reactivity :这个阶段中,正在初始化data和methods中的数据以及方法。2.created :官方说明:实例已经创建完

2020-09-15 10:41:15 78

原创 ckeditor5在线可视化HTML编辑器源代码模式为何就抛弃了

最近因为项目有用到编辑器的需求,经过考量过后选择了ckeditor5。ckeditor5功能强大,UI也比简介美观。Rich text editor of tomorrow, available today.ckeditor5名副其实,将代码块插入编辑器的功能备受好评!其他的功能,风格都算的上市应有尽有,满足基本所有的主流编辑器使用需求!在线自定义构建ckeditor5,一键生成代码的功能也大大降低了开发门槛。“美中不足”的是ckeditor5没有源代码编辑模式!有些非ck.

2020-09-14 15:46:55 3506 3

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除