- 博客(62)
- 收藏
- 关注
RSS订阅原创 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
1560
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
2177
原创 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
312
原创 国际化插件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
366
原创 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
6595
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
202
原创 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
583
原创 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
5873
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
12467
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
705
原创 创建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
244
原创 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
165
原创 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
229
原创 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
5943
3
原创 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
254
原创 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
271
原创 网站上传到服务器（上线）
当你做好一个网站，肯定是希望上线到网上让大家都能看见，而不是在本地一个人自己观看。所以我们要把网站上线。而要上线，我们就要准备一些东西，首先我们要有一个购买一个服务器（具体配置看个人，你开心就好），还可以需要一个域名（也可以直接用服务器给的公网ip访问），在阿里云、百度云、腾迅云等都可购买服务器和域名。买好服务器，我们就可以得到一个公网ip。开始上传首先，我们需要一个连接到服务器的工具，SS...
2019-12-30 16:47:07
735
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
256
转载 React学习内容大纲
webpackwebpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle其它相似打包工具还有rollup.js 、 parcel、FIS等按照webpack的指南...
2019-05-17 09:55:55
658
原创 Flux
传统MVC的缺陷传统MVC没有解决 M 和 V 之间的交互关系为了弥补这个缺陷，人们相处了 Flux Redux Mobx 这样三种架构思维 ， 那么React只是这三种架构的一个组成部分，那么这个组成部分充当的是 View( 视图 )Flux Redux Mobx 和 MVC 是一个级别的，相比之下， vuex级别要小的多 ，但是他们解决的都是多组件状态共享问题...
2019-05-17 09:44:33
148
原创 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
128
原创 React-router(路由）
我们使用的是4.+版本，使用的是react-router-domreact-router是3.x的版本路由的模式有两种老浏览器提供的 hash模式， 我们称之为： HashRouterH5提供的的 hsitory 模式，我们称之为 BrowserRouter注意： H5模式的路由需要后端支持使用路由书写路由展示区域， 使用 Route重定向第一种...
2019-05-17 09:36:10
138
转载 redux
组成部分store 数据的管理者view react的组件来充当actionsCreators 动作的创建者， 用来发送一个 action ❥(^_-)reducer 动作的触发者， 用来修改数据的 ，reducer是一个纯函数，它里面有一个返回值， 返回值是什么， 那么newState就是什么redux的基础使用流程得有一个工具 red...
2019-05-17 09:31:35
129
转载 HOC ( Higher Order Component) 高阶组件
什么是高阶组件？高阶组件就是一个函数， 这个函数接收一个参数， 这个参数是一个组件格式 const Hoc = ( Comp ) => { return class 类名称 extends React.Component { render () { return <Comp></Comp> } } } ...
2019-05-15 08:03:45
225
原创 react-router(路由)
我们使用的是4.+版本，使用的是react-router-domreact-router是3.x的版本路由的模式有两种老浏览器提供的 hash模式， 我们称之为： HashRouterH5提供的的 hsitory 模式，我们称之为 BrowserRouter注意： H5模式的路由需要后端支持使用路由书写路由展示区域， 使用 Route重定向第一种...
2019-05-14 22:52:47
122
原创 HOC ( Higher Order Component) 高阶组件
什么是高阶组件？高阶组件就是一个函数， 这个函数接收一个参数， 这个参数是一个组件格式 const Hoc = ( Comp ) => { return class 类名称 extends React.Component { render () { return <Comp></Comp> } } } ...
2019-05-14 22:05:26
201
原创 react的组件通信
父子通信父组件将一个数据传递给子组件，但是这个数据只有父组件有权利更改，子组件不可以代码： import React,{ Component,Fragment } from 'react' class Father extends Component { constructor () { super() this.state ...
2019-05-14 20:48:41
94
原创 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
225
转载 React组件的生命周期
React中组件有生命周期，也就是说也有很多钩子函数供我们使用，组件的生命周期，我们会分为四个阶段，初始化阶段、运行中、销毁、错误处理（16.3之后）初始化在组件初始化阶段会执行constructor2. static getDerivedStateFromProps()3. componentWillMount() / UNSAFE_compo...
2019-05-13 19:35:36
232
转载 React -- 事件
React – 事件绑定事件采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, React里的事件是驼峰onClick，React的事件并不是原生事件，而是合成事件。写法一共四种，我们推荐有两种箭头函数 class App extends React.component{ change = () => {...
2019-05-13 15:22:43
155
转载 react的组件数据挂载方式（props/state）
组件数据挂载方式react中将数据细分为两个类型props 属性 举例： 一出生就具备特性state 状态 举例： 可以改变的特性、属性props外部传入父组件通过 属性的形式 将 数据可以绑定在子组件身上 ， 子组件通过 this.props 获得外部传入的props只能通过外部修改 （ ...
2019-05-11 14:45:06
433
转载 react.js的介绍
关于ReactReact部分的内容包含了所有授课的思路React的起源和发展React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。React与传统MVC的关系轻量级的视图层库！A JavaScript libra...
2019-05-09 11:11:46
475
转载 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
307
转载 路由的拓展（路由 激活/缓存/动画/数据预载/懒加载）
路由激活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
245
转载 路由进阶部分 -- 导航守卫（ 路由守卫 ）
路由进阶部分 – 导航守卫（ 路由守卫 ） - 守卫路由 - 进 - 举例： 携带数据进入 - 出 - 举例： 事情完成才能出来导航守卫一共有三种形式A: 全局导航守卫全局前置守卫 router.beforeEach(fn)fn中有三个参数（to,from,next）全局的解析守卫在 2.5.0+ 你可以用 router.beforeResolv...
2019-04-29 10:42:17
4716
1
转载 动态路由 & 路由传参 & 路由接参
动态路由 & 路由传参 & 路由接参vue cli3 配置反向代理在根目录下面新建一个 vue.config.js // vue.config.js中可以默认直接使用 http-proxy-middleware module.exports = { devServer: { proxy: { '/douban': { //...
2019-04-28 22:28:07
1268
转载 Router
基础vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。...
2019-04-28 20:26:42
162
转载 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
165
转载 webpack的基本使用
前端的工程化工具- grunt- 资源打包- 单元测试- gulp- 流式操作工具- 资源打包- browserify(webpack前身)- webpack 【 主流 】- 资源打包工具， 比如 js文件打包压缩 ， img 打包压缩 。。。- 可以自动解决模块化依赖问题- es6模块化一. webpack基础认识1. 官网地址- 官网: https://w...
2019-04-25 21:39:08
146
转载 动态组件，异步组件
动态组件动态组件就是 component组件 ， 组件身上可以绑定一个is属性， 用来表示某一个组件is属性我们html中有一些标签是规定它的直接子元素的 ， 比如 ul li ol li selector option table这类型标签不能直接用常规的组件使用方式， 必须在对应直接子元素上绑定 is属性 <div id="app"> <...
2019-04-24 22:31:27
138
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人