自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

斗师——Ace

菜鸟的成长记录!

原创 HTML5从入门到精通笔记

添加小程序,兑换各种视频教程/数据资源。第一章:HTML5新增语法,元素,属性,事件1.html5语法: 1.1 html是不区分大小写,也不区分大双引号。 1.2 对于具有boolean值得属性,如disabled和readonly等,当值写属性不写值,将属性值设置为属性名或设置为空字符串时,表示为true,如<input disabled /&...

2019-03-20 11:38:27 458

原创 javascript的ES6笔记整理

添加小程序,兑换各种视频教程/数据资源。1. 常量:不能被重新赋值。//ES5中声明一个常量,并挂载到window下:Object.defineProperty(window,'PI',{ value:3.1415926, writable:false, //只读不能修改})console.log(window.PI)//ES6中声明一个常量: cons...

2019-02-12 11:07:28 197

原创 CSS3知识点笔记————基础(五星)

添加小程序,兑换各种视频教程/数据资源。1.作用:美化和修饰HTML。又叫层叠样式表,样式表,级联样式表。2.优点: 2.1可以更好的将格式与结构分离。 2.2可以更好的控制页面的布局。 2.3可以制作体积更小,下载更快的网页。 2.4可以将多个网页同时更新,比以前更快更容易。3.使用CSS的三种方式: 3.1内联式:...

2018-10-15 09:12:05 194

原创 javascript基础知识完整笔记--------权威指南基础篇

(一)JS初次使用;1.搭建JS开发环境; (1)在控制后台输出:console.log()。 (2)在HTML页面输出: 1).html页面元素事件中输出,如onclick=""; 2) .通过<script>在这里输出JS代码</script>,并且script可存在html任意标签位置。...

2018-10-11 17:27:02 223

原创 vue-cli3+技术栈实战完整笔记(一)

添加小程序,兑换各种视频教程/数据资源。0. 基于vue ui创建vue cli3.0项目:参考:https://blog.csdn.net/qq_42231156/article/details/82343793。1.项目文件vueCli3.0下: pulic文件下:favicon.ico是网址上方标题的的小图标。 index.html:是入口文件。 s...

2018-10-06 11:42:52 1856 1

原创 Vue技术栈开发实战笔记(一)--------使用vue ui3+创建项目

添加小程序,兑换各种视频教程/数据资源。 1.使用vue ui创建、管理项目:可视化的项目管理工具。步骤: a.在已经下载node v8.9版本以上的情况下(百度怎么下载node已经怎么更新node),程序输入cmd->下载vue cli3.0以上(输入npm install -g @vue/cli)-通过vue ui可视化管理工具打开项目(输入vue ui...

2018-09-03 12:15:10 2363 5

原创 vue.js ——入门

添加小程序,兑换各种视频教程/数据资源。1. 官网:www.vuejs.org 。2. 下载配置方法:方法1:在官网www.vuejs.org下载vue.js文件,然后在html里面引入<script src="vue.js"></script> 方法2:直接远程在线引入vue.js文件。<script src="ht...

2018-05-25 11:17:18 372 5

原创 vue递归实现自定义tree组件

1. 在tree/index.vue中:<template> <div> <ul> <item :model='data'></item> </ul> </div></template><script>import Item from './item'export default { components:{ ..

2020-08-02 22:11:09 4

原创 简单仿写element-ui的表单组件以及校验

1. 创建组件目录结构:2. 在form.vue组件中:<template> <div> <slot></slot> </div></template><script>export default { provide(){ return { form:this //祖先后代传值:祖先传值 } }, props:{ model:{

2020-08-02 17:07:22 23

原创 uniapp微信小程序基于uniCloud数据库,一套完整的授权登陆,生成token

1. 创建uniapp的uniCloud数据库,绑定云数据库。参考https://uniapp.dcloud.io/uniCloud/concepts/space。绑定之后再uniCloud控制台查看管理。2. uniapp微信小程序中授权的登陆。 2.1 创建tool.js文件:export default{ getTokenValue(options) { //1.获取用户的token let { success, fail, complete...

2020-07-24 14:35:53 190

原创 uniapp微信小程序自定义分享按钮

1.在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈并填写相关微信 appkey。2. 代码里面调用:<button class="w100 h100 btn-collection inline-block" open-type="share">分享</button><script> export defafult{ onShareAppMessage(res) { return {

2020-07-22 14:18:02 118

原创 uniapp小程序自定义导航头

1. 在pages.json中:设置navigationStyle=custom{ "pages": [ { "path": "pages/home/index", "style": { "navigationBarTitleText": "首页", "navigationStyle":"custom", //去掉原生导航头 "backgroundColorTop":"#000000" //下拉回弹时背景色 } } ]}2. 在页面

2020-07-21 11:39:45 50

转载 vue自定义指令实现滚动div中的元素滚动到指定位置

参考:https://blog.csdn.net/ZTJ_123/article/details/103909346。1. src/directive/scroll.js:中写入自定义指令。import Vue from 'vue'//全局自定义指令 给目标元素动画滚动到指定偏移位置 如果绑定值为true 则滚动到顶部Vue.directive('scroll-top', { /** * * @param {object} el * @param {object}

2020-07-17 14:45:02 162

原创 vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配

1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配。2. 下载:npm install --savepostcss-px2remnpm install --save'postcss-plugin-px2rem3. 使用:在vue.config.js中module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/onli..

2020-07-17 13:58:01 91

原创 vue项目鼠标移入移出切换背景图片闪烁问题的解决

1. vue动态切换背景图:<el-tooltip class="item" effect="dark" :content="'切换凭证'" placement="top-end"> <div class="btn" @mouseenter="mouseenter" @mouseleave="mouseleave" :style="{'background':'url('+iconImg+') no-repeat','background-size':'100% 10.

2020-07-15 10:25:09 149

原创 vue实现简单封装分页组件

1. new-pagination.vue文件:<template> <div class="new-pagination flex a-center j-between flex-row"> <div class="left flex a-center j-start flex-row"> <div>共 {{total}} 条</div> <div class..

2020-07-12 18:03:14 59

原创 vue全局引入二次封装element-ui表格组件

1. 创建一个文件夹new-table:new-table/index.vue文件。<template> <div class="new_table"> <div class="table_main"> <el-table class="table" ref="table" :data="tableDataList"

2020-07-12 17:57:50 53

原创 vue全局过滤器以及datef 格式化时间插件

1. src/filters/time.js文件中: 下载格式化时间库datef:npm i --save datefimport datef from 'datef'export default function (Vue) { Vue.filter('fdatetime', function (val, format) { if (!val) return '' return datef(format || 'YYYY-MM-dd HH:mm:ss', parseInt(val...

2020-07-10 16:06:08 48

转载 uniapp小程序实现水印

<template> <view class="content"> <view class='water_top'> <canvas canvas-id='myCanvas' style='width:100%;height:100%'></canvas> </view> </view></template><script> export default { onLoa.

2020-07-07 16:45:19 119

转载 uniapp解析富文本图片溢出,超出的问题

1、在App.vue组件中(h5),直接在App.vue修改即可:uni-rich-text img { max-width: 100% !important;}2、关于小程序和APP里面图片溢出问题,可以通过正则的方式,给图片添加宽度100%,高度auto的样式 借鉴文章(附上原文:https://www.jb51.net/article/154976.htm)formatRichText(html) { let newContent = html.replace(/<i.

2020-07-03 01:17:31 182

原创 vue中的插槽slot以及插槽向外传值

1. vue 2.6.0版本之前的slot插槽: 用slot='' 替代表示对应的插槽。<!--1.插槽组件中: 匿名插槽和具名插槽--><div> <slot></slot> <slot name='content'></slot></div><!--2. 使用插槽组件:--><child> <div></div> <di

2020-06-30 23:41:52 229

原创 vue的路由管理包括路由取别名,页面懒加载,重定向,动态路由传参,嵌套路由,命名试图,404页面

1. router/index.js:实例化路由。import Vue from 'vue'import VueRouter from 'vue-router'import routes from './router'Vue.use(VueRouter)const router = new VueRouter({ routes})export default router2. router/router.js:路由配置管理。import Home from './vi

2020-06-27 17:22:20 48

原创 vue的动态组件component

1. 使用:如用于动态绑定表单组件。<component :is="item.type" v-model='item.value'> <component :is="item.type" v-model='item.value' v-if="(tag,i) in item.children" v-if='item.children' is="tag.type" v-model='item.value' :key="`${_uid}_${index}`"> <.

2020-06-25 12:40:22 115

原创 vue项目大量数据渲染页面优化---vue-virtual-scroll-list插件

0. git库:https://www.npmjs.com/package/vue-virtual-scroll-list1. 下拉列表数据很多时的优化渲染:引入vue-virtual-scroll-list插件。通过每次只渲染指定条数,比如6条,即使下拉列表中有上千条数据,也能很每次只渲染6条,从而减少渲染,优化页面。 1.1 下载:npm install --savevue-virtual-scroll-list。 1.2 使用:iview的下拉/多选框组件的中大量数据...

2020-06-25 12:14:05 432

原创 vue页面跳转,以及携带参数,获取参数

js操作路由(即编程式的导航)进行页面跳转: 1. 返回/前进一页:返回:this.$router.go(-1)、this.$router.back()。前进:this.$router.go(1) 2. 跳转到其他页: //params只能用name来引入路由,类似于post,在浏览器地址栏中不显示参数,//而query 要用path引入,似于我们ajax中get传参,在浏览器地址栏中显示参数this.$router.push("/parent")thi...

2020-06-25 11:09:09 306

原创 vue cli3+ 搭建的vue项目中的vue.config.js相关简单配置

1. vue cli官网:https://cli.vuejs.org/zh/2. vue.config.js:如果没有,就在根目录下创建一个vue.config.js文件。const path = require('path')const resolve = dir => path.join(__dirname,dir)module.exports={ baseUrl:process.env.NODE_ENV ==='procution'?'/static-prd':'/',

2020-06-25 11:01:37 102

原创 vue中使用mock

1. 开发者模式下下载mockjs:npm install mockjs -D。mock拦截axios请求,响应自定义数据。2. 在mock/index.js文件下:import Mock from 'mockjs'Mock.mock(/user\.json/, { 'list|1-10': [{ 'id|+1': 1, 'email': '@EMAIL' }]})export default Mock3. 在axios请求mock数据:axios..

2020-06-25 10:35:08 31

原创 vue cli3+搭建项目的相关配置-----之.editorconfig文件配置

1..editorconfig文件配置官网:https://editorconfig.org/。2..editorconfig配置说明:# 告诉EditorConfig插件,这是根文件,不用继续往上查找root = true# 匹配全部文件[*]# 设置字符集charset = utf-8# 缩进风格,可选"space"、"tab"indent_style = tab # 缩进的空格数indent_size = 4# 结尾换行符,可选"lf"、"cr"、"crlf..

2020-06-23 18:10:05 191

原创 nuxt中使用axios/@nuxtjs/axios 以及使用mock

1. 搭建nuxt项目:参考https://blog.csdn.net/qq_42231156/article/details/90174203。2. nuxt中使用全局axios:参考:https://blog.csdn.net/weixin_30794491/article/details/99910973。 2.1 如果pageage.json中的dependencies没有"@nuxtjs/axios"就下载安装:npm install --save @nuxtjs/axios ...

2020-06-19 10:04:12 193

原创 uniapp/微信小程序获取微信授权/地理位置授权/二次授权

<template> <view class="auto-login h100 flex a-center j-center"> <view class="content flex flex-column a-center j-center"> <view class="title">{{status==='userInfo'?'授权登陆':'授权地址位置'}}</view> <button open-type="getU.

2020-06-18 10:41:52 243

转载 VSCode详细使用教程

参考:https://blog.csdn.net/weixin_45601379/article/details/100550421。

2020-06-16 11:04:40 109

原创 nuxt.js使用swiper5+

1. 下载:npm install swiper --save2. 再nuxt.config.js引入swiper.css:module.exports = { css: [ "assets/css/reset.css", 'node_modules/swiper/css/swiper.css' ],}3. 组件中使用:<template> <div class="home"> <div class="swiper-.

2020-06-13 16:13:40 200

原创 render函数的渲染

1. 官网:https://cn.vuejs.org/v2/guide/render-function.html。2. render使用:render:h=>{ return h(a,b,c) //a为标签字符串或引入的组件名(如'div'/ mySwiper),b为对象,表示该标签的属性,可以不写该参数,c为字符串或者数组子元素(内容或者子标签)。}//1. 使用方法1render:h=>{ return h(mySwiper,{ 'cla

2020-06-10 08:48:01 75

原创 vue-cli3+技术栈实战完整笔记(二)

1. vue中使用mock模拟ajax(axios)响应。 1.1 mock官网:http://mockjs.com/。 1.2 mock下载:npm install mockjs。 1.3mock引入:在非生成环境中的main.js引入if(process.env.NODE_ENV !='production'){ //require('./mock')} 1.4mock使用:创建mock.js,在main.js中非生成下全局引入。impo...

2020-06-07 22:14:59 44

原创 vue通过h5拖拽实现假拖拽效果

1. h5的拖拽浏览器的支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。在 Safari 5.1.2 中不支持拖放。1. 设置标签可以拖拽属性:draggable="true"<div draggable="true" ></div>2. 拖拽顺序:3.在拖拽事件中遇到目标元素ondrop事件没有效果,需要在目标元素上写ondragover事件,阻止ondragover的默认行为..

2020-06-04 20:26:55 110

原创 vue实现可以滑动的轮播图

<template> <div class="my-swiper wh" ref="mySwiper"> <ul class="my-swiper-wrap" :style="{width:classobj,transform: translateXVal}" v-if="isShow" @mouseenter="enter" @mouseleave="leave" @mousedown="mousedown($event).

2020-06-03 15:56:34 319

转载 element-ui的表单重置方法resetFields()的坑,及简单解决

<el-form :model='form' ref='formDom'></el-form>add(){ this.form={} //先复制为{} this.$nextTick(()=>{ this.$refs.formDom.resetFields() //在调用resetFields方法 })}参考:https://blog.csdn.net/nidunlove/article/details/100975379...

2020-05-23 18:35:36 128

转载 关闭 Windows 平台 Google Chrome 浏览器的跨域警告- axios请求 前端跨域

1. 在电脑上任意位置新建一个目录,例如:C:\MyChromeDevUserData2. 在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData,–user-data-dir 的值就是刚才新建的目录地址。3. 重启浏览器即可:...

2020-05-20 12:42:49 140

原创 uniapp做微信小程序云开放

1. 在App.vue中:初始化小程序云数据库,全局挂载。<script> import Vue from 'vue'; export default { onLaunch: function() { let envId='xxx' //环境id wx.cloud.init({ env:envId }) Vue.prototype.db=wx.cloud.database({env:envId}) } }</scri

2020-05-16 16:07:12 186

转载 Vue.Draggable 实现vue拖动组件

参考:https://blog.csdn.net/zjiang1994/article/details/79809687。

2020-05-15 09:21:48 126

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