魔幻星辰-优快云博客

原创 vue3之computed计算属性

在vue2.x版本中, 计算属性的写法是在组件中是一对象属性。而在vue3中以回调函数的方式来使用, 且要写在setup当中，在使用前需要先导入。1.先引入computedimport {ref, defineComponent, computed, Ref} from "vue";2.在setup里面定义const seriesList: ISeriesList= computed(() => { const seriesList = brandStore.getSeries;

2021-06-15 23:41:37 1069 1

原创 vue3之watch监听

vue3的监听跟vue2有点不一样.引入watch后直接在setup里面使用, 调用方式是以回调函数的方式呈现.1.先引入watchimport { ref, defineComponent, watch } from "vue";2.在setup里面引用/*监听props*/watch(props,(newProps, oldProps) => { showModal.value = newProps.isOpened; editData.value = newPr

2021-02-24 00:04:29 18825 3

原创 vue3之生命周期函数

在Vue3 Composition API中附带了一个 setup() 方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等。Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离。vue3的生命周期函数跟vue2.x版本有了很大的不同,在vue3中移除了beforeCreate 和 created,增加了setup函数.除了这2个之外还有9个生命周期函数onBeforeMountonMountedon

2021-01-31 22:40:07 1522

原创 vue3之组件结构(defineComponent,setup函数)

在vue3中,对组件整体结构做一些调整,先看一个组件案例:import {ref, reactive, defineComponent, Ref, onMounted} from "vue";import {settingsStore} from "/@/store/module/settings";import {IRoleList} from "/@/interface/role/list.interface";import {IHttpResult} from "/@/interface/co

2021-01-29 21:26:15 38919 11

原创 vue3.0+vite+typescript项目架构搭建之VUEX配置

vue项目自然少不了VUEX了,这里使用vuex-module-decorators进行模块化分割.npm install vuex-module-decorators 或者yarn add vuex-module-decorators安装成功后就可以使用了,先看一个完整案例1.创建主配置文件index.ts/** * @description vuex 配置 * @author : lsx * @version : v1.0 * @date : 2020/10/22 14:33 */

2021-01-29 00:53:20 1445

原创 vue3.0+vite+typescript项目架构搭建之路由配置

vue3.0+vite+typescript项目架构搭建之路由配置项目路由目录结构为了路由文件更好的管理，以模块进行路由文件划分。1.创建路由主文件index.ts 路由分2种模式，根据需要进行选择：createWebHashHistory hash模式createWebHistory History模式/** * @description 路由配置文件 * @author : lsx * @version : v1.0 * @date : 2020/10...

2021-01-26 13:21:24 2832

原创 vue3.0+vite+typescript项目架构搭建

vue3.0 + vite + typescript + Ant Design Vue + router4beta + vuex4beta 架构搭建项目准备工作 1、安装脚手架工具，用的 Vue CLI v4.5 作为 @vue/cli@next。全局重新安装最新版本的 @vue/cli：yarn global add @vue/cli@next# ORnpm install -g @vue/cli@next 2、Vite Vite是一个 ...

2021-01-26 11:52:34 2604 2

转载 100款+CSS实现的定价表代码可免费下载使用

做为一个前端，遇到好的案例要收集，可以参考学习丰富自己知识库。以下为这100款定价表的源码下载地址与截图，请大家跟自己需要学习与使用。01：源码地址：https://codepen.io/littlesnippets/pen/wGqZvV02、源码地址：https://codepen.io/littlesnippets/pen/NrdYBE03、源码地址：https://codepen.io/littlesnippets/pen/eJaBLx04、源码地址：htt

2020-10-30 12:33:47 1169

原创实用JS小工具之URL参数获取

封装一些常用的工具可以给开发带来极大的便利；收集封装属于自己的工具库，是为偷懒的必要条件。获取单个的URL参数function GetUrlData(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); re

2020-09-14 10:08:02 221

原创基于JQuery封装自定义美化的 select组件

浏览器自带的select组件样式太丑，有时候想要一款自己满意的组件，不满意样式还可以自行修改；组件封装不是得多完美，适用才是最好的；select组件配套的CSS/* UI组件样式 *//* select */.stui_select {width: 100%;position: absolute;top: 0;left: 0;z-index: 10;}.stui_select h3 {line-height: 32px;}.stui_select dl{border: 1px solid #e

2020-09-08 10:41:27 467

原创二次封装Ajax

基于JQuery二次封装Ajax为什么要再次封装Ajax呢?Promise版本普通版本使用方法为什么要再次封装Ajax呢?封装是为了达到统一处理接口返回的状态，不需要每次调用都去写，比如：统一处理登录、权限等问题。这些问题的处理是每个接口都需要的，封闭起来便于管理修改。Promise版本let StPAjax = { promise : null, request : function(options,dataJson){ let opts = $.extend({

2020-09-05 02:15:39 389

原创 react项目级应用框架搭建

react项目级应用框架搭建项目目录结构记录自己的每个学习足迹1. 第一步创建项目2. 引入 antd 组件库3. 接下来是加入redux状态管理4. 路由的配置5. http请求6. proxy代理7.引入路经问题8. 最终的的package.json文件项目目录结构记录自己的每个学习足迹做项目,学习技术,学习框架都少不了项目框架的搭建;这里记录下自己搭建框架的过程。框架技术点react...

2020-05-03 15:10:17 732

原创 vue 封装视频播放组件,支持m3u8

现小视频横行时代,原video本身不支持m3u8格式,需要做兼容,使video支持meu8格式的视频播放,现容入并封装成vue组件。<template> <div class="video_box"> <video ref="video" preload="none" :poster="mypost...

2020-01-13 17:01:09 2102

原创 vue 封装图片预览组件

因项目需要,自己封装了个vue图片预览组件<template> <div class="imgs_previews animated" @mousewheel.prevent="wheellEvent($event)" v-if="isOpen" :class="isShow ? 'fadeIn' : 'fadeOut'"> <div c...

2020-01-13 16:49:23 1118

原创 Angular8 动态设定页面标题title

一般情况下在页面修改标题需要在每个页面组件里引入:import { Title } from '@angular/platform-browser';constructor( private titleService: Title) { }this.titleService.setTitle("title"); 但是，在每个页面都写一次是不是很繁琐呢，也不利于管...

2020-01-13 16:07:20 2087 3

stars的博客