- 博客(52)
- 收藏
- 关注
RSS订阅原创 typescript泛型
定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定）；此时泛型便能够发挥作用；举个例子：}上例中，test函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的；由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的：首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型；
2022-10-19 14:43:35
262
原创 typescript 接口（Interface）
fn({name:'孙悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});接口主要负责定义一个类的结构，接口可以去限制一个对象的接口：对象只有包含接口中定义的所有属性和方法时才能匹配接口；接口的作用类似于抽象类，不同点在于：接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法；console.log('大家好，我是'+this.name);同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性；
2022-10-18 17:07:29
199
原创 typescript 面向对象
class 类名 {属性名: 类型;constructor(参数: 类型){this.属性名 = 参数;}方法名(){}}示例：}console.log(`大家好，我是${this.name}`);}}使用类：const p = new Person('孙悟空', 18);抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例bark(){console.log('动物在叫~');}}run(){
2022-10-18 15:04:58
82
原创 TypeScript打包
TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS；以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中；对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换；除了webpack，开发中还经常需要结合babel来对代码进行转换；@babel-loader：babel在webpack中的加载器。虽然TS在编译时也支持代码转换，但是只支持简单的代码转换；@babel/core：babel的核心工具。
2022-10-18 15:04:08
512
原创 typescript编译选项
默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中。指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录。编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置。设置后编译后的js文件将会生成到dist目录。
2022-10-18 15:03:35
155
原创 mPaas小程序（支付宝、钉钉...）页面中（axml中）使用函数（使用.sjs文件）
SJS 是 JavaScript 语言的子集，与 JavaScript 是不同的语言，故二者语法并不一致，请勿将其等同于 JavaScript。SJS（safe/subset javascript）是小程序一套自定义脚本语言，可以在 AXML 中使用其构建页面结构。mpaas小程序在js文件中定义的函数在页面中调用会发生报错，要使用sjs文件来定义函数。比如要定义一个格式化金额的函数。
2022-09-16 09:46:15
789
原创 mPaas小程序（支付宝、钉钉...）自定义组件，组件传参
创建一个文件夹像是components之类的名字随便起，然后在该文件夹里创建组件文件夹可以在这个文件夹上右键选择新建小程序组件，也可以一个文件一个文件自己建，需要注意的是自定义组件和页面一样也是又acss，js，axml，json组成的而且js文件和json文件时有区别的js是由Comonent组成的json需要添一句"component": true，当然如果直接选择新建小程序组件就没这些事jsdata: {},props: {},});json{}
2022-09-16 09:37:08
1362
原创 TypeError: Cannot read properties of null (reading ‘insertBefore‘) vue项目报错
本地无论怎么样都不会报错，但是部署到服务器之后，切换到某个路由之后再切换路由之后就疯狂报错，百思不得其解，网上搜了一下说是主要又三个原因造成，粘贴一段我搜索到的，我觉得说的也很有道理，但是并不能解决我的问题。之后我把每一块代码注掉部署注掉部署之后发现是我的table有问题，跟他说的第三个原因好像是同一个，原来是我在template中调用了方法格式化数据，但是这个数据可能不存在，在这里进行兼容处理一下就解决了。解决方案：给 el-dialog 组件增加 destroy-on-close 属性。
2022-09-15 18:07:51
11628
3
原创 vue3 父子组件双向绑定
之前是用emit=['update:xxx']这种方式实现的，今天忘记细节了无意中发现v-model竟然有用，具体为什么我还不太清楚。这样就可以实现双向传值了。
2022-08-12 10:55:45
2751
3
原创 typescript 基本类型
TypeScript中的基本类型：类型声明类型声明是TS非常重要的一个特点；通过类型声明可以指定TS中变量（参数、形参）的类型；指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值；语法：let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{ ...} 自动类型判断类型：numberlet
2022-07-04 19:50:16
81
原创 mPaas小程序（支付宝、钉钉...） 筛选器/格式化数据
mpaas小程序在js文件里无法实现渲染函数的要求1 js文件2 axml文件3 控制台直接报错 寻思是不是双大括号里只能渲染data里的，之后把函数放到data里结果页面直接崩掉。后来从支付宝小程序的文档里找到了可以使用sjs文件定义，来达到格式化数据的目的3 在需要使用的axml文件里引入import-sjs标签name属性指定的是该文件的模块名，所有该文件的函数都从该文件调用即可...
2022-06-30 14:09:17
685
原创 mPaSS小程序 路由跳转
一 跳转1 my.switchTab用于tabBar页面直接跳转跳转tabBar页面，并会将其他非tabBar页面关闭2 my.reLaunch跳转到指定页面，之后关闭所有其他页面3 my.redirectTo用于中间功能页跳转，后退（my.navigateBack）不会后退到该页面跳转到指定页面，并关闭该页面4 my.navigateTo常用于非tabBar页面正常跳转跳转到非tabBar的指定页面,注意小程序的页面栈最多有10层5 my.navigateB
2022-05-23 16:53:31
3624
原创 mPaaS小程序创建
（其实其他想钉钉小程序支付宝小程序等等也是同样的方法）一 下载支付宝开发者工具下载地址二 创建新建项目 选择mPass小程序 新建模板 编辑项目名称和存储路径三 创建小程序包1 首先需要到mPaas管理平台注册账号移动开发平台2 创建应用给应用起个名字比如demo，然后也可以添加logo当然不添加也可以 进入小程序发布界面 下载配置文件（下载配置文件的时候需要输一个密码，记住了待会登录的时候用） 新建小程序 上传版本 登录，账号是你的平台用户名，密码就.
2022-05-18 11:51:04
717
原创 vue3 router，store，query，params获取
获取router以跳转路由传递参数等等，相当于vue2中的this.$router import { useRouter } from 'vue-router'const router = useRouter() 获取store，修改store，触发action等等，相当于vue2中的this.$store import { useStore } from 'vux'const store = useStore()// 使用gettersconsole.log(store.
2022-04-26 11:06:39
3959
2
原创 vue3 reactive的坑
最近使用vue3的过程中发现reactive有一些问题清空reactive定义的数组时必须将length设为0，直接赋值一个空数组是没有作用的，同理对象直接赋值一个空对象也没有作用，只能遍历对象一项一项删，这里说的没有作用是不能响应式的更新页面，如果打印一下是能看到确实被删除了，但是页面没有变化 清空数组 // 错误示例<template> <div>{{ arr }}</div> <button @click="click">点击<
2022-04-02 10:57:40
4170
原创 Vue3 setup script
setup script是vue3的一个语法糖通常我们使用composition API的时候需要使用setup 钩子，然后还要把页面上要使用的变量return返回出去,例如：<template> <div>{{name}}{{age}}{{persion}}</div> <button @click="sayHello">说话</button> <div>computed: {{ persion.fullNam.
2022-03-30 17:19:32
1539
原创 Vue3 vue.config.js配置
vue.config.js是一个可选的文件，如果有的话再项目启动的时候会自动加载这个文件把所有的配置项导出去module.exports = { ... }如果想要用ts注解的话 @vue/cli-service 里有 defineConfig函数 专门注解配置项1 publicPath项目部署的地址publicPath: process.env.NODE_ENV === 'production' ? '生产环境地址' : '开发环境地址',2 outp
2022-03-28 19:18:55
12430
1
原创 Webpack 学习
1 webpack 5个核心概念Entry 入口，指示webpack以那个文件作为入口文件，分析构建内部依赖图。 Output 输出，指示webpack打包后的资源bondles输出到那里去，以及如何命名。 Loader， 让webpack能够去处理那些非js文件（webpack只能理解js） Plugins 插件：可以用于执行范围更广的任务。插件的范围包括：从打包优化和压缩，一直到重新定义环境中的变量等 Mode 模式：指示webpack使用相应模式的配置。development：本地测试环
2022-03-28 10:22:44
722
原创 Vue3 学习
1 创建vue3项目(首先要确保@vue/cli版本在4.5.0以上)vue --version ## 检查版本vue install -g @vue/cli ## 全局安装vue脚手架vue create vue_test (项目名) ## 创建项目2 相较于vue2的变化 不再引入Vue构造函数，而是引入一个叫做createApp的工厂函数 template中不再需要根标签 3 SetUpsetup的执行时机：在beforeCreate之前...
2022-03-25 09:35:19
1700
原创 属性 props
1 基本用法属性一般时外部传入的，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 propsconst Con = (props) => { return ( <Con>{ props.title }</Con> //函数式组件通过props获取属性 )}class Com extends Component { render () { return ( <div> {
2022-02-16 20:59:18
447
原创 React - JSX原理
1 要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构比如下列代码<div class='app' id='appRoot'> <h1 class='title'>欢迎进入React的世界</h1> <p> React.js 是一个帮助你构建页面 UI 的库 </p></div>上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示(c
2022-02-16 10:39:57
279
原创 React - 1 项目结构（以及创建项目）
1 'react' 和 'react-dom''react'和'react-dom'是每个react文件必须要有的包'react' 是react的顶级API，包含众多方法，其中Component尤为重要作用为编译jsx,还包括Fragment(空标签),createRef(定义类组件的ref),useRef(定义函数组件的ref)等方法'react-dom'的唯一作用是渲染并构建dom树...
2022-02-14 22:18:45
840
原创 React - 2 组件
1 'react' 和 'react-dom''react'和'react-dom'是每个react文件必须要有包'react' 是react的顶级API，包含众多方法，其中Component尤为重要作用为编译jsx,还包括Fragment,createRef,useRef等方法'react-dom'的唯一作用是渲染并构建dom树...
2022-02-14 21:03:38
150
原创 React - 3 样式
1 'react' 和 'react-dom''react'和'react-dom'是每个react文件必须要有包'react' 是react的顶级API，包含众多方法，其中Component作用为编译jsx'react-dom'的唯一作用是渲染并构建dom树2 react的样式1 行内样式class App extends Component{ render () { return <div style={ { width: '200px', //
2022-02-12 21:39:59
453
原创 VueDemo-24项目打包上线部署和25本地搭建服务器，模拟项目上线
24.项目打包上线部署1.项目打包yarn build打包出来的dist文件就是我们需要上传的项目文件目录监测一下dist/index.html<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content
2022-02-09 14:28:26
554
原创 VueDemo-23 搜索相关
23 搜索相关23.1 首页的头部<template> <div class="box"> <header class="header"> <div class="mynav"> <router-link to="/kind" tag="div" class="left"> <van-icon name="wap-nav" size="18"/> &l......
2022-02-09 14:27:17
167
原创 VueDemo-21 确认订单
21.确认订单21.1 添加确认订单的页面// src/views/order/index.vue<template> <div class="box"> <header class="header"> <van-nav-bar title="确认订单" left-arrow /> </header> <div class="content"......
2022-02-09 14:24:46
988
原创 VueDemo-17-20 其他内容
17.导航守卫导航守卫 | Vue Router 全局的导航守卫 场景： 大多数的路由都需要执行的业务时，可以使用全局导航守卫比如说。后台管理系统，app首先必须先登录后使用import Vue from 'vue'import VueRouter from 'vue-router'import store from '../store'import Home from '../views/home/index.vue'import Kind from '../views
2022-02-09 14:21:46
352
原创 VueDemo-14-16状态管理器
14.状态管理器Vuex 是什么？ | VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态传值 父组件给子组件传值 子组件给父组件传值 非父子组件（兄弟组件）传值 子组件直接使用父组件的数据和方法 父组件直接使用子组件的数据和方法 跨组件传值 状态管理器 多个视图依赖于同一状态。 来自不
2022-02-09 14:18:37
36901
原创 VueDemo-12.加入购物车
12.加入购物车思路： 1.点击加入购物车，需要判断用户的登录状态（先前端校验，再接口后端校验） 2.调用加入购物车的接口，完成 1.如果购物车中有这个产品，更新购物车，数量加1即可 2.如果购物车中没有这个产品，插入一条记录即可 前端可以通过 loginState 校验登录 后端通过前端传递的 token 校验登录状态 // src/api/cart.jsimport request from '../utils/req
2022-02-09 14:14:40
1758
原创 VueDemo-11.登录功能
11.登录功能)11.1 构建登录页面<template> <div class="box"> <header class="header"> <van-nav-bar title="嗨购登录" left-arrow @click-left="$router.back()" ></van-nav-bar> </header>......
2022-02-09 14:12:08
5378
原创 VueDemo-10.注册用户
10.注册用户10.1 构建注册页面src/views/register/step1.vue<template> <div class="form"> <van-field v-model="tel" type="tel" placeholder="请输入手机号" /> <div class="my-button"> <van-butt......
2022-02-09 14:08:04
3410
原创 VueDemo-9.点击列表进入详情
9.点击列表进入详情9.1 构建详情页面Src/views/detail/index.vue<template> <div class="box"> <header class="header">detail header</header> <div class="content">detail content</div> </div></template>9.2 ......
2022-02-08 16:03:52
1642
原创 VueDemo-8.首页效果展示
8.首页效果展示8.1 上拉加载数据实际上就是移动的端的分页的展示 Vant - Mobile UI Components built on VueList 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。隐藏条件，每加
2022-02-08 16:02:32
1228
原创 VueDemo-7.首页展示
7.首页展示7.1 展示nav导航<template> <div class="box"> <header class="header">home header</header> <div class="content"> <div class="myswiper"> <van-swipe class="my-swipe" :autoplay="3000" indicato......
2022-02-08 16:01:00
482
原创 VueDemo-6.介绍vue 移动端的组件库
6.介绍vue 移动端的组件库 mint-ui 被淘汰 vant Vant - Mobile UI Components built on Vue 6.1 安装vantui库cnpm i vant -S / yarn add vant -S6.2 配置UI库自动按需引入组件 (推荐)babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。cnpm i babel-plugin-i..
2022-02-08 15:57:17
482
原创 VueDemo-5.构建项目
5.构建项目5.1 构建项目的基本结构安装重置样式表yarn add normalize.css -S// src/main.js 引入重置样式表import Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import router from './router'import store from './store'// 引入重置样式表 yarn add norm.
2022-02-08 15:54:07
190
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人