自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

small streamed bun

small streamed bun

  • 博客(62)
  • 收藏
  • 关注

原创 uni-app APP video层级

问题:uni-app写app,video组件层级很高,其他标签调z-idnex,也覆盖不了;解决:使用v-html指令解决<template> <view class="page"> <view class="container"> <view class="video"> <view class="httml" v-html="html"> </view> </view> </

2021-12-24 17:50:58 1467 3

原创 uni-app 使用html2canvas.js + uqrcode.js将页面内容(包含生成的二维码)合成图片

1. 下载html2canvas<-- npm -->npm i html2canvas --save<-- yarn -->yarn add html2canvas2. 下载image-tools<-- npm -->npm i image-tools --save<-- yarn -->yarn add image-tools3. 在插件市场下载html2canvas组件也可以使用下面代码<template> &

2021-12-24 16:57:23 2050

原创 axios封装,使用拦截器统一使用接口

1. 在src目录下创建一个utils文件夹(文件名可自取)在这个文件夹下创建request.js文件 import axios from 'axios'; import { Loading } from 'element-ui'; //使用element-ui的加载组件(看个人喜欢,也可以用别的,或者不用)2. 创建axios实例 const service = axios.create({ baseURL: '/api',//域名url timeout: 5000 }

2021-09-28 15:34:32 265

原创 国际化插件vue-i18n的简单使用

安装在vue项目中安装vue-i18n:npmnpm/cnpm install vue-i18nyarnyarn add vue-i18n使用在vue项目中使用vue-i18n:main.js......import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ locale: 'zh', messages: { 'zh': require('@/assets/lang/zh.js

2021-07-07 09:33:10 325

原创 vue+element-ui创建调查问卷

使用vue+element-ui制作创建调查问卷功能;代码如下:(只是一些简单功能)<template> <div class="container"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="标题"> <el-input v-model="form.name"></el-input>

2021-04-19 17:08:49 6212 2

原创 git第一次提交到远程仓库与分支的合并

git第一次提交到远程仓库1. git init(初始化)2. git add .3. git commit -m '描述'4. git remote add origin 仓库地址(连接到远程仓库)5. git push -u origin 分支名创建分支上传1. git checkout -b 分支名(创建并切换到该分支)2. git add .3. git commit -m '描述'4. git push -u origin 分支名分支合并切换到主分支,然后进行合并,合并

2021-03-26 15:59:26 173

原创 vue 查看全部和收起组件

1. 组件书写代码如下:HTML<template> <div class="content_warp"> <div class="container"> <div class="item" :style="{fontSize: fontSize + 'px', textIndent: (fontSize*2) +'px'}" v-if="flag"> <span>{{content}}</span

2021-03-12 17:51:32 513

原创 vue3.x使用ref获取dom元素

1. 在vue3.x中使用ref获取dom直接上代码:<template> <div class="container"> <input ref="myRef" value="123" type="text"> </div></template>import { onMounted, ref } from 'vue'export default { setup(){ let myR

2021-01-19 17:50:37 5784 5

原创 vue3.x使用vuex

在vue3.x项目中需使用vuex4.x版本;安装直接下载/CDNhttps://unpkg.com/vuexnpm /cnpm /yarnnpm install vuex@next --savecnpm install vuex@next --saveyarn add vuex@next --save项目中使用在根目录下创建store文件夹,在store文件夹下创建index.js文件,在index.js文件中书写代码,与vue2.0中使用的vuex相差不大,直接上代码:import

2021-01-12 15:33:34 12310 7

原创 vue3.x使用vue-router

在vue3.x项目中,需使用vue-router版本为4.x,否则使用时将会报错;安装直接下载/CDNhttps://unpkg.com/vue-router@4npm/cnpm/yarnnpm install vue-router@4cnpm install vue-router@4yarn add vue-router@4使用首先在根目录下创建一个router的文件夹,在router文件夹下创建一个index.js的文件,最后在index.js文件下进行路由配置,配置基本和vue2.

2021-01-12 15:28:20 632

原创 创建vue3.x项目

使用vite创建一、什么是vitevite是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。它主要具有的特点有以下:快速的冷启动即使的模块热更新真正的按需编译二、使用vite创建vue3.0项目创建项目npmnpm init vite-app <project-name>cd <project-name>npm installnpm run dev

2021-01-12 15:18:46 207

原创 vue中vuex的使用

vuex是什么?vue官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex的组成部分state (状态)action (动作,业务交互)mutation (修改state)getter (获取数据的)vuex的安装直接下载/CDNhttps://unpkg.com/vuexNPMnpm/cnpm install vuex --save# If using vue .

2020-10-16 11:23:06 142

原创 vue 模糊搜索

首先创建一个input框,用v-model双向数据绑定,方便获取input框的value值<template> <div class="home"> <input type="text" placeholder="请输入城市名称" v-model="inputValue" @input="searchValue()" /> //搜索到的内容区域 <div v-for="item in listValue" :key="item.id">

2020-05-08 17:33:17 189

原创 uni-app web端input(file)上传文件

创建上传文件标签<view ref="input" class="input"> 附件上传</view>// uni-app input不支持type=“file”类型所以需要js创建mounted() { // 创建附件上传 var _self = this; var input = document.createElement('input');/...

2020-05-08 10:02:38 5445 2

原创 vue 上传文件

1.创建上传文件标签<input type="file" id="file" @change="changeFile()" ref="intFile" />考虑到vue要获取节点进行操作,所以给标签添加一个ref,方便获取属性并给标签添加事件2.change事件changeFile(e){ var intFile = this.$refs.intFile; this.fi...

2020-05-08 09:56:34 211

原创 input 上传文件

创建上传文件标签html<input type="file" name="file" title="请选择" id="file" accept="文件类型" />文件类型:例:(image/png,image/jpg,image/gif,image/JPEG)图片2.上传jsvar getFile = document.getElementById('file').f...

2020-05-08 09:54:43 231

原创 网站上传到服务器(上线)

当你做好一个网站,肯定是希望上线到网上让大家都能看见,而不是在本地一个人自己观看。所以我们要把网站上线。而要上线,我们就要准备一些东西,首先我们要有一个购买一个服务器(具体配置看个人,你开心就好),还可以需要一个域名(也可以直接用服务器给的公网ip访问),在阿里云、百度云、腾迅云等都可购买服务器和域名。买好服务器,我们就可以得到一个公网ip。开始上传首先,我们需要一个连接到服务器的工具,SS...

2019-12-30 16:47:07 651 1

原创 无缝连接轮播滚动效果

在vue-cli中下载swipernpm install swiper/cnpm install swiper/yarn add swiper在组件中引入import Swiper from 'swiper'import 'swiper/dist/css/swiper.css'然后实例化mounted(){ new Swiper('.swiper-container', { ...

2019-10-16 16:28:15 215

转载 React学习内容大纲

webpackwebpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle其它相似打包工具还有rollup.js 、 parcel、FIS等按照webpack的指南...

2019-05-17 09:55:55 612

原创 Flux

传统MVC的缺陷传统MVC没有解决 M 和 V 之间的交互关系为了弥补这个缺陷,人们相处了 Flux Redux Mobx 这样三种架构思维 , 那么React只是这三种架构的一个组成部分,那么这个组成部分充当的是 View( 视图 )Flux Redux Mobx 和 MVC 是一个级别的,相比之下, vuex级别要小的多 ,但是他们解决的都是多组件状态共享问题...

2019-05-17 09:44:33 125

原创 React Hooks

React Hooks 是 React 16.7.0-alpha 版本推出的新特性, 有了React Hooks,在 react 函数组件中,也可以使用类组件(classes components)的 state 和 组件生命周期。useState Hooks import React,{ useState } from 'react' const Hooks = () => {...

2019-05-17 09:38:34 109

原创 React-router(路由)

我们使用的是4.+版本,使用的是react-router-domreact-router是3.x的版本路由的模式有两种老浏览器提供的 hash模式, 我们称之为: HashRouterH5提供的的 hsitory 模式,我们称之为 BrowserRouter注意: H5模式的路由需要后端支持使用路由书写路由展示区域, 使用 Route重定向第一种...

2019-05-17 09:36:10 115

转载 redux

组成部分store 数据的管理者view react的组件来充当actionsCreators 动作的创建者, 用来发送一个 action ❥(^_-)reducer 动作的触发者, 用来修改数据的 ,reducer是一个纯函数,它里面有一个返回值, 返回值是什么, 那么newState就是什么redux的基础使用流程得有一个工具 red...

2019-05-17 09:31:35 101

转载 HOC ( Higher Order Component) 高阶组件

什么是高阶组件?高阶组件就是一个函数, 这个函数接收一个参数, 这个参数是一个组件格式 const Hoc = ( Comp ) => { return class 类名称 extends React.Component { render () { return <Comp></Comp> } } } ...

2019-05-15 08:03:45 195

原创 react-router(路由)

我们使用的是4.+版本,使用的是react-router-domreact-router是3.x的版本路由的模式有两种老浏览器提供的 hash模式, 我们称之为: HashRouterH5提供的的 hsitory 模式,我们称之为 BrowserRouter注意: H5模式的路由需要后端支持使用路由书写路由展示区域, 使用 Route重定向第一种...

2019-05-14 22:52:47 99

原创 HOC ( Higher Order Component) 高阶组件

什么是高阶组件?高阶组件就是一个函数, 这个函数接收一个参数, 这个参数是一个组件格式 const Hoc = ( Comp ) => { return class 类名称 extends React.Component { render () { return <Comp></Comp> } } } ...

2019-05-14 22:05:26 172

原创 react的组件通信

父子通信父组件将一个数据传递给子组件,但是这个数据只有父组件有权利更改,子组件不可以代码: import React,{ Component,Fragment } from 'react' class Father extends Component { constructor () { super() this.state ...

2019-05-14 20:48:41 71

原创 swiper案例研究react生命周期

引入swiper$ yarn add swiper在对应的组件中引入引入css样式引入html结构实例化案例代码:import React, { Component,Fragment } from 'react';import Swiper from 'swiper'import 'swiper/dist/css/swiper.css'import...

2019-05-14 15:35:08 182

转载 React组件的生命周期

React中组件有生命周期,也就是说也有很多钩子函数供我们使用,组件的生命周期,我们会分为四个阶段,初始化阶段、运行中、销毁、错误处理(16.3之后)初始化在组件初始化阶段会执行constructor2. static getDerivedStateFromProps()3. componentWillMount() / UNSAFE_compo...

2019-05-13 19:35:36 177

转载 React -- 事件

React – 事件绑定事件采用on+事件名的方式来绑定一个事件,注意,这里和原生的事件是有区别的,原生的事件全是小写onclick, React里的事件是驼峰onClick,React的事件并不是原生事件,而是合成事件。写法一共四种,我们推荐有两种箭头函数 class App extends React.component{ change = () => {...

2019-05-13 15:22:43 128

转载 react的组件数据挂载方式(props/state)

组件数据挂载方式react中将数据细分为两个类型props 属性 举例: 一出生就具备特性state 状态 举例: 可以改变的特性、属性props外部传入父组件通过 属性的形式 将 数据可以绑定在子组件身上 , 子组件通过 this.props 获得外部传入的props只能通过外部修改 ( ...

2019-05-11 14:45:06 408

转载 react.js的介绍

关于ReactReact部分的内容包含了所有授课的思路React的起源和发展React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。React与传统MVC的关系轻量级的视图层库!A JavaScript libra...

2019-05-09 11:11:46 443

转载 react.js安装和创建

安装安装 : npm命令行工具安全审计:npm auditLint格式检查: eslint/stylelint格式化: prettier测试测试套装: jest / mocha / ava / kamar代码覆盖量: nyc / codecov / coveralls构建转换器: babel / TS / flow预处理器: sass / less / ...

2019-05-09 10:59:36 244

转载 路由的拓展(路由 激活/缓存/动画/数据预载/懒加载)

路由激活A: 自己书写一个类名或是使用第三方给的类名B:在router-link组件身上添加一个 (类名-class) 的属性<router-link to = "/home" active-class = "active"/>路由的缓存在router-link组件上添加一个属性 keep-alive <router-link to = "/...

2019-04-29 16:43:16 207

转载 路由进阶部分 -- 导航守卫( 路由守卫 )

路由进阶部分 – 导航守卫( 路由守卫 ) - 守卫路由 - 进 - 举例: 携带数据进入 - 出 - 举例: 事情完成才能出来导航守卫一共有三种形式A: 全局导航守卫全局前置守卫 router.beforeEach(fn)fn中有三个参数(to,from,next)全局的解析守卫在 2.5.0+ 你可以用 router.beforeResolv...

2019-04-29 10:42:17 4592 1

转载 动态路由 & 路由传参 & 路由接参

动态路由 & 路由传参 & 路由接参vue cli3 配置反向代理在根目录下面新建一个 vue.config.js // vue.config.js中可以默认直接使用 http-proxy-middleware module.exports = { devServer: { proxy: { '/douban': { //...

2019-04-28 22:28:07 1234

转载 Router

基础vue 路由的mode(模式)有几种, 分别是什么?在那些环境下运行?hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。...

2019-04-28 20:26:42 133

转载 vue-cli的安装

clicli 别名: 脚手架npm < cnpm < yarn (优先级)作用:快速构建vue项目, 底层配置使用的就是webpack版本cli2 cli3安装 npm install @vue/cli -g cli3的版本 npm install vue-cli -g cli2的版本 yarn add @vue/cli...

2019-04-28 08:30:57 138

转载 webpack的基本使用

前端的工程化工具- grunt- 资源打包- 单元测试- gulp- 流式操作工具- 资源打包- browserify(webpack前身)- webpack 【 主流 】- 资源打包工具, 比如 js文件打包压缩 , img 打包压缩 。。。- 可以自动解决模块化依赖问题- es6模块化一. webpack基础认识1. 官网地址- 官网: https://w...

2019-04-25 21:39:08 130

转载 动态组件,异步组件

动态组件动态组件就是 component组件 , 组件身上可以绑定一个is属性, 用来表示某一个组件is属性我们html中有一些标签是规定它的直接子元素的 , 比如 ul li ol li selector option table这类型标签不能直接用常规的组件使用方式, 必须在对应直接子元素上绑定 is属性 <div id="app"> &lt...

2019-04-24 22:31:27 116

空空如也

空空如也

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

TA关注的人

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