- 博客(133)
- 收藏
- 关注
RSS订阅原创 uniapp
项目目录及文件介绍一个uni-app项目，默认包含如下目录及文件：┌─cloudfunctions 云函数目录（阿里云为aliyun，腾讯云为tcb，uniCloud详见https://uniapp.dcloud.io/uniCloud ）│─components 符合vue组件规范的uni-app组件目录│ └─wqq-banner │ └─wqq-banne.vue 可复用的a组件，若目录名和.vue文件名一致，不需要import也可以直接在页面中直接使用`<wqq-bann
2021-04-08 17:00:27
596
原创 TypeScript
TypeScript特点类型注解let var1: string; // 类型注解var1 = "哈哈"; // 正确var1 = 4; // 错误// 编译器类型推断可省略这个语法let var2 = true;注：常见原始类型: string,number,boolean,undefined,null,symbol类型基础// 类型数组let arr: string[];arr = ['Tom']; // 或Array<string>// 任意类型any
2021-03-25 14:17:38
212
原创 VUE中数据模拟和访问
数据模拟使用开发服务器配置vue.config.js中的before选项，可以编写接口，提供模拟数据。devServer:{ before(app) { app.get('/api/shiwu', (req, res) => { setTimeout(() = >{ res.json([{ name: '油条', price: 22}, { name: '玉米', price:33}]) },1000) }) }}调用：使用axi
2021-03-19 17:28:39
242
原创 vue中CSS
使用预处理器如果创建项目时没有选择需要的预处理器（Sass/Less/Stylus），则需手动安装相应loader```# Sassnpm install -D sass-loader node-sass# Lessnpm install -D less-loader less# Stylusnpm install -D stylus-loader stylus```例：```<style scoped lang="scss"> $color: #42b983;
2021-03-19 16:55:50
713
原创 VUE中处理资源路径
处理资源路径相对路径：当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将被webpack处理。<img alt="Vue logo" src="./assets/logo.png">绝对路径:如果 URL 是一个绝对路径，它会去当前服务器的静态路径(public)下去找，public文件webpack不会做任何处理，用来放静态资源<img alt="Vue logo" src="/assets
2021-03-19 16:12:25
1718
原创 组件通信详解
组件通信的常用方式组件通信常用方式propseventbusvuex自定义事件List item边界情况$parent$children$root$refsprovide/inject非prop特性$attrs$listeners父组件向子组件传值之props子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法，方法如下：组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据<script>
2020-11-13 15:56:54
626
原创 Vue中数据响应式的解决方案（相关API）
Vue.set由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。造成在data上的数据无法响应式变化，无法响应式变化有以下3钟情况：动态地为对象增加或移除属性 <template> <div> <input v-model.number="age"> <button @click="test">更新</button><br> {{ courses.name }} -- {{courses.se
2020-10-30 16:20:41
1001
原创 CSS模拟表格斜线
CSS模拟表格斜线原理利用div+css模拟表格的对角线，容器相邻边的border宽度大于1时，且相邻边框颜色不一样，会形成一个斜线，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style type="text/css"> .div { border-left: #023060 20px
2020-10-29 17:30:58
1708
1
原创 js实现表格导出功能
js实现表格导出功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
2020-10-29 17:29:55
469
原创 深入理解vue中的修饰符
表单修饰符.lazy在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >.number如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：<input v-mo
2020-10-27 16:32:32
813
2
转载 JS之防抖和节流
引入模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>没有防抖</title> <style type="text/css"></style></head><body> <div>
2020-10-23 17:07:56
256
原创 BFC的作用和方法（两栏自适应案例）
BFC的作用：使 BFC 内部浮动元素不会到处乱跑；即子元素浮动不会使父元素塌陷，让子元素一定在父元素的包裹之下和浮动元素产生边界。让元素产生BFC的方法display: flow-root;overflow: hidden;案例使 BFC 内部的浮动元素不会到处乱跑案例：<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <style>
2020-10-22 12:04:43
241
转载 前端代码异常监控—window.onerror
我是开发微信图文页一名普通的码农。近期加班加点上线非常重要的的广告功能：底部的广告区域有关注公众号的按钮，用户点击之后就会给广告主带来粉丝，给文章所有者带来广告收入。某天，码农心血来潮，想了解一下每篇文章的图片都来自什么域名，于是加了一段统计脚本…如此简单的for循环能难得了我，测试啥，直接上线！投诉来了下午15:00上完线，下班后突然收到一堆同事电话：我们这边发现广告的关注点不动了，用户好多投诉进来了，看到你15:00上了线，快看看有什么问题！在家VPN简单看了看代码，知道真相后简直无法直视：
2020-09-29 17:12:31
5911
原创 ＜picture＞ 标签——自适应显示不同图片
功能picture元素通过包含一个或多个元素和一个元素再结合media（媒体查询）来使用，根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素：案例菜鸟案例<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body>
2020-09-23 16:20:30
1035
原创 CSS @规则
CSS @规则@charset用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。@import@import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。@media可以针对不同的屏幕尺寸设置不同的样式@media (min-width: 1200){ //>=1200的设备 } @media (max-wid
2020-09-16 11:04:42
692
1
原创 HTML和CSS
标签的分类文档元信息：通常是出现在 head 标签中的元素，包含了描述文档自身的一些信息；语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；链接：提供到文档内和文档外的链接；替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；表单：用于填写和提交信息的一类标签；表格：表头、表尾、单元格等表格的结构。...
2020-08-06 12:02:46
184
原创 vue—插槽
概念插槽是一种传递复杂内容的方式，就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。插槽的使用在子组件中放一个占位符 <slot></slot><template> <div> <h1>今天天气状况：</h1> <slot></slot> &l
2020-08-05 22:37:51
204
原创 VUEX的使用
概念vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据；即Vuex是一个全局的共享数据存储区域,就相当于是一个数据的仓库。使用步骤安装包cnpm i vuex -S导入包import Vuex from 'vuex'，前提是要导入VUE包import Vue from 'vue'将vuex注册到vue中Vue.use(Vuex)new Vuex.Store() 实例，得到一个数据仓储对
2020-08-03 23:59:13
834
原创 Promise、async/await详解
Promise的概念介绍Promise 是一个 构造函数，我们就可以 new Promise() 得到一个 Promise 的实例，这个实例，是一个具体的异步操作。异步操作的结果，只能有两种状态：异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数
2020-07-29 10:56:14
1743
转载 让图文不可复制、转载注明出处
让图文不可复制-webkit-user-select: none; -ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;user-select简介这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性user-select:值auto——默认值，用户可以选中元素中的内容none——用户不能选择元素中的任何内容text——用户可以选择元素中的文本
2020-07-24 08:58:06
257
原创 JS 判断移动设备来源
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>wang </title> </head> <body> <div id="div1"> 您好 </div></body><script>// 判断移动端设备function deviceType
2020-07-23 15:51:10
214
原创 webpack基础
1.webpack配置组成2.Entry作用：指定打包的入口，即指定源代码（1）单入口：入口文件只有一个，entry是一个字符串module.exports={ entry:'./src/main.js'}（2）多入口：入口文件有多个，entry是一个字符串module.exports={ entry:{ app:'./src/app.js', adminApp:'....
2020-04-27 22:55:27
133
原创 mint-ui 日期选择器，得到年历、年月历
思路：mint-ui 只提供年月日日历选择，如果我们只想要选择年、或者选择月份，我们可以通过获取年元素、月元素、日元素，在日历元素生成时将其隐藏或删除，因为该日历组成是打开的时候才生成，所以操作元素的动作要在日历打开时进行。步骤mint-ui 是基于vue的基础上构造的，已经可以通过$refs获取元素（1）创建日历容器和日历按钮点击按钮调用open()<mt-datetime-p...
2020-03-02 20:45:19
1570
原创 JS获取日历每个月有多少天
new Date(year, month, 0).getDate()使用 new Date() 创建时间对象时，如果 date 传入 0，就能直接通过 getDate() 获取到最后一天的日期
2020-02-24 23:51:18
805
原创 项目管理文件
.gitignore 项目忽略文件node_modules.idea —— webstrom的相关配置，用该软件会自动生成，别人不一定会用该软件.vscode —— vscode 的相关配置.git —— 初始化文件夹，存着版本README.md描述项目内容LICENSE 开源协议运行git init...
2020-02-18 12:24:00
400
原创 mysql--在node中操作mysql数据库
使用Node操作MySQL数据指南安装npm install --save mysqlhello worldvar mysql = require('mysql');// 1. 创建连接var connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'ro...
2019-10-09 22:54:12
170
原创 mongoose--在node中操作mongodb数据库
mongoosemongoose官网官方指南官方API文档1.起步安装：npm i moogoosehello world:var mongoose = require('mongoose');// 连接 MongoDB 数据库mongoose.connect('mongodb://localhost/test', { useMongoClient: true });...
2019-10-09 22:48:02
101
原创 MongoDB
关系型数据库和非关系型数据库关系型数据库表就是关系，或者说表与表之间存在关系所有的关系型数据库都需要通过sql语言来操作所有的关系型数据库在操作之前都需要设计表结构数据支持约束–唯一的、主键、默认值、非空非关系型数据库该数据库非常灵活非关系型数据就是key-value键值对MongoDB是长的最像关系型数据库的非关系型数据库数据库=》数据库数据表=》集...
2019-09-30 17:01:51
62
原创 获取异步操作的结果：回调函数
如果需要获取一个函数中异步操作的结果，则必须通过回调函数来获取function fn(callback) { setTimeout(function () { var data = 'hello' callback(data) }, 1000)}// 如果需要获取一个函数中异步操作的结果，则必须通过回调函数来获取fn(function (data) { con...
2019-09-29 16:09:24
477
原创 Express-Node.js的web开发框架
安装npm install --save expresshello worldvar express = require('express')var app = express()app.use(express.static('./public/'))app.get('/', function (req, res) { res.send('hello world')})...
2019-09-29 11:18:15
117
原创 nodemon-修改代码自动重启工具
nodemon第三方命令行工具，帮助我们解决频繁修改代码重启服务器问题。nodemon是一个基于Node.js开发的第三方命令行工具，我们使用需要独立安装。安装# 在任意命令执行都可以npm install --global nodemon使用编写代码app.jsvar express = require("express")var app = express()app....
2019-09-29 10:35:28
445
原创 npm常用命令、 npm init初始化项目、nrm的安装使用
npm init 创建 package.json步骤：在 桌面新建node作为项目目录，在该目录下打开cmd。使用 npm init 指令创建项目描述文件 package.json。命令行里会以交互的形式让你填一些项目的介绍信息，依次介绍如下：（不知道怎么填的直接回车、回车…）name 项目名称version 项目的版本号description 项目的描述信息entry po...
2019-09-27 16:00:25
7607
2
原创 nodejs笔记
在node中使用模板引擎（art-template）art-template 不仅可以在浏览器使用，也可以在 node 中使用art-templateAPI ：http://aui.github.io/art-template/zh-cn/docs/index.html安装：npm install art-template该命令在哪执行就会把包下载到哪里。默认会下载到 node_modu...
2019-09-26 11:49:44
96
原创 模板引擎在浏览器和服务器的渲染方法，及他们的区别（art-template）
服务端渲染和客户端渲染的区别客户端渲染不利于 SEO 搜索引擎优化服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的而是两者结合来做的例如京东的商品列表就采用的是服务端渲染，目的了为了 SEO 搜索引擎优化而它的商品评论列表为了用户体验，而且也不需要 SEO 优化，所以采用是客户端渲染...
2019-09-26 11:42:59
1076
原创 JS难点
模板字符串`` 是 EcmaScript 6 中新增的一种字符串包裹方式，叫做：模板字符串，它支持换行和非常方便拼接变量var foo = `大家好hello 床前明月光world哈哈哈`console.log(foo)无分号的代码风格// 当你采用了无分号的代码风格的时候，只需要注意以下情况就不会有上面的问题了：// ...
2019-09-24 17:29:16
250
原创 canves案例
绘制网格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #c...
2019-09-24 16:39:15
247
原创 angular 插件ngAnimate
ngAnimate作用：添加动画步骤：引入 js angular-animate.min.js注：引入的插件版本不要比angular.js的版本高在 module 中引入一下插件 var app = angular.module(“myApp”, [‘ngAnimate’]);...
2019-08-27 17:12:03
699
原创 angular 插件ngSanitize ngRoute
ngSanitize作用：让浏览器简析 html 标签步骤：引入 js angular-sanitize.min.js在 module 中引入一下插件 var app = angular.module(“myApp”, [‘ngSanitize’]);使用 绑定数据<!DOCTYPE html><html> <head> ...
2019-08-26 17:34:55
1104
原创 angular笔记
angular方法1. bind绑定对象，作为函数的上下文 <script> var self={name:'张三'}; var f=angular.bind(self,function(age){ $scope.info=this.name+' is '+age; ...
2019-08-14 17:32:30
393
原创 不同屏幕大小引用不同的背景图
jQuery的data()方法$element.data()是一个函数 ，专门用于取元素上的自定义属性（data-abc）， 函数的参数是我们要取得属性名称（abc）。需求：大屏幕的时候使用大图，图片高度不变图片内容居中；小屏幕的时候使用小图，图片宽度100%自适应；<!DOCTYPE html><html lang="en"><head> &...
2019-07-27 19:56:18
451
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人