Candy_mi的博客

代码示例：//css// @charset "utf-8";#certify { position: relative; width: 471px; height: 441px; margin-left: 35px; // width: 1200px; // margin: 0 auto}#certify .swiper-container { padding-top: 40px}#certify .swiper-slide ..

1、引入不同的组件库 按需加载时需要用vue.use() 1. 以前的写法import VeeValidate from 'vee-validate'; // 表单验证import { Button, Lazyload, Popup,Toast } from 'vant';Vue.use(VeeValidate);Vue.use(Button);Vue.use(Lazyload); //图片懒加载Vue.use(Popup);Vue.use(Toast); 2. 优化 ...

需求由于可能你在不同的平台上都有自己的仓库，并且账号都不同，这个时候你配置全局的用户名密码就不行，只能针对不同的平台配置不同的key值如果你几个平台用的账号都是一样的 那你可以只生成一个key文件复制到不同的平台也是可以的1、生成不同的ssh_key在对应的文件下面生成不同的key文件，生成的过程中会提示让你定义一个密码，之后拉取代码的时候会用到C:/Users/candy/.ssh 目录是存放ssh_key的文件夹 candy是电脑设置的一个用户名 根据自己电脑的名称更改就行...

1、安装 npm install babel-plugin-import --save2、配置方法一：直接更改package.json里的babel//package.json "babel": { "presets": ["react-app"], "plugins": [ ["import", { "libraryName": "antd-m...

比方str的数据传唤成zz这个样子定义一个计算属性computed: { resList() { return function(realstr) { if (realstr) { let res = realstr.substring(0, realstr.length - 1); let arr1 ...

es5构造函数写法第一种写法function PerSon(name, age) { this.name = name; this.age = age; this.showName=function(){ return `名字为:${this.name}` } this.showAg...

在ES6之前，社区规定了一套模块规范Commonjs 主要服务器nodejs require('http') AMD requirejs CMD seajs模块化 (ps注意:需要放到服务器环境)如何定义模块export 东西 ----------------------export const name='唐微'如何使用...

图片示例主要代码1、把图片视频转成本地的地址在页面显示 getObjectURL(file) { var url = null; // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已 if (window.createObjectURL != undefined) { // basic ...

拿两个案例看下区别案例一var count = 12; let show = { count: 1, fun: function () { console.log(this) //show console.log(this.count); //1 setTimeo...

Touch 事件首先 touch 包含三类事件，它们分别是：touchstart、touchmove、touchend 。望文生义这种本能相信你应该会有，但在这里我还是有必需对这三个词进行一翻不必要的解释。touchstart：手指触摸到一个 DOM 元素时触发。touchmove：手指在一个 DOM 元素上滑动时触发。touchend：手指从一个 DOM 元素上移开时触...

1、只允许输入正整数vue写法<p> <span>只允许输入正整数</span> <input type="text" placeholder="输入正整数" @keyup="number=number.replace(/^(0+)|[^\d]+/g,''...

HTML部分<template> <div class="Multistage_check"> 多级复选 <input class="checkbox" type="checkbox" v-model="allCheack" @change="selAll(list)" /> <span>选择全部</span...

如下图周数算法是从这个月第一个周一开始算第一周开始<template> <div class="calendar1"> <p>第一个日历</p> <div> <p> <span>总共{{week_counts}}周</span> ...

1、根据年月获取该月的天数 /* 1、根据年月获取该月的天数 getdays(2019, 11) year 年份----2019 month 月份----06 or 6 */ function getdays(year, month) { return new Date(year, month, 0).getDate(...

Promise作用:解决异步回调的问题<script> { let a = 11; let promise = new Promise(function (resolve, reject) { //resolve 成功调用 reject失败调用 if (a == 10) { ...

1、Array.of把一组值转成数组 // Array.of 把一组值转成数组 let arr = Array.of('111', '222', '333'); console.log(arr)2、arr.find找到的是第一个符合条件的数组成员如果没有找到返回undefined { let arr = [23, 90, 101, 80,...

伪数组：个人观点是只要有length属性的对象实例 <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul>伪数组转真数...

原始值和引用值在 ECMAScript 中，变量可以存在两种类型的值，即原始值和引用值。原始值存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。引用值存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。原始值 ------不会互相影响 var a = 3; var b = a;...

1、先获取扫一扫信息进行授权 // 扫一扫获取授权 author_WX() { let url=window.location.href.split("#")[0]; //正确 //调取后台接口 获取wx.config的配置信息 getWeix({ url: url, }).the...

想要数据大于3的时候断出循环let arr = [1, 2, 3, 4, 5];不能跳出循环的方法 // 1.forEach():代替普通的for循环 执行结果全部可以打印 { arr.forEach(function (val, index, arr) { if (val > 3) { ...

定义minxin//minxin.jsvar myMixin = { data: function () { return { message: 'hello', foo: 'abc' } }, created: function () { console.log('混入对象的钩子被调用') }, methods...

效果图如下页面代码如下由于原点以及图片的位置都是动态的渲染进去的,这部分代码也不细说了主要是要计算好每个图片以及原点的偏移位置,找到规律<template> <div class="Sudoku" v-wechat-title="$route.meta.title"> <div class="container-out"> ...

效果图如下中奖提示代码如下<template> <div class="dial" v-wechat-title="$route.meta.title"> <div class="times">抽奖次数{{LuckyClick}}</div> <!-- 转盘包裹 --> <...

<keep-alive> 可以对不同的组件进行缓存 keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一 个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素<keep-alive>生命周期 activated：页面第一次进入的时候，钩子触发的顺序是created->mo...

1.通过7个特定的api方法来实现push pop shift unshift splice sort reverse如果我们想要实现上面说的效果就 这样写：vm.list.splice(2,1,5) //意思是把list这个数组的坐标为二的值开始，删除1个，然后添加一个52.通过改变对象地址的方法来实现说白了就是 vm.list=[1,5,3,4]...

cookie---------保存游览器的一些数据,并且每次向服务器发送请求的时候都会带到后台,用户可以非常轻松的更改cookie,非常不安全,有限制(4k)session--------保存数据用的,保存在服务器端,相对比较安全,无限的；session不可能独立存在,它是基于cookie实现的,cookie中会有一个session的id,服务器利用sessionid找到session文件...

笔记首先定义接口接口名称:/user请求参数:act=reg&username=aaa&pass=123456 act的值区分是注册还是登录 username是用户名 pass是密码返回值 {'ok':false,'msg':'原因'}需求是这样的先说注册1.输入用户名跟密码提交注册时后台判断该用户...

第一步先在util文件夹下面新建一个如下的目录1、url.js里面保存的是正式服测试服的域名,也可以添加其他的一些项目中会使用的域名信息2、ajax.js里是用promise封装的网络请求3、api.js里是用来统一管理页面中的接口主要代码如下url.js// let mainUrl = 'https://xxx' //正式服let mainUrl =...

定义一个空的事件catchtap="share"<button class='share' open-type="share" catchtap="share">js share:function(){ console.log('禁止冒泡') },

小程序中经常会使用到图标,由于小程序限制大小,图标使用太多比较占内存,考虑到使用字体图标会比较省内存字体图标选用的是阿里巴巴矢量图标库使用步骤如下1.选择想要的图标加入购物车2.点击购物车图标会弹出一个侧边栏，点击里面的添加至项目3.选择Font class按钮, 右击下面的链接会有一个转到xxx.css的文件,复制里面的内容4.小程序中使用...

const http = require('http');const fs = require('fs');const querystring = require('querystring')const URL = require('url')var server = http.createServer(function (req, res) { //GET v...

部分的笔记在上一章里直接上代码 <!-- post请求的 --> <form action="http://localhost:8888/login" method="POST"> 用户名: <input type="text" name="name" id=""> 密码: <...

笔记----如何接收前台的数据请求----前台向后台发送请求主要就是以下几种方式 form ajax jsonp----后台不管前台怎么发送数据对后台来说都是一样的----前台与后台通信都是通过http来通信的 前台<---http--->后台----请求方式主要有两种方式 POST GET 区别 GET是跟随url一起发送...

fs模块的基本用法,如下代码const fs=require('fs'); //引入文件磁盘系统模块/*readFile(文件名，回调函数) 读取文件write(文件名，内容,回调函数) 写入文件*/fs.readFile('aaa.txt',function(err,data){ if(err){ console.log('读取失败') ...

具体代码如下var http = require('http'); //引入http模块//req --- request：游览器请求的信息 //res --- response：响应给前台的数据 var server=http.createServer(function (req, res) { res.write('有人访问了'); res.e...

整理一下自己看的智能社的node课程记录下来的笔记,有时间在来整理先说一下其他的几种后台语言1.php2.java3.python为什么要学node呢?node有何优势nodejs的优势1.性能2.跟前台的js配合起来更加方便3.前端学习者的学习成本更低,js能用的node都能用,相比较下node可以更好的跟前端配合node的使用-----运行...

以前的写法//给函数的第二个参数默认为宝贝,当传值得时候用所传的值function show(a, b) { b = b || '宝贝'; console.log(a, b)}show('欢迎', '小仙女'); //欢迎 小仙女show('欢迎') //欢迎 宝贝结构函数的写法//直接在参数上赋值 function sh...

箭头函数的注意点 this在ES6中的指向的问题,this指向定义这个函数所在的对象，不在是运行时所在的对象了 箭头函数里面没有argumens了,用扩展运算符 箭头函数不能当构造函数 例子一以前的函数写法function show(){ return 1;}show();箭头函数的写法let show = () =>...

前提准备下载axios 下载mint-uiaxios.js代码如下import axios from "axios"; //引入axios// 引入提示组件以及加载中的组件import { Toast,Indicator} from "mint-ui";//配置全局的路由axios.defaults.baseURL = process.env.API_URL...

VueCli2.0版本1.找到config文件目录下的dev.env.js以及prod.env.js文件dev.env.js是配置本地环境的 prod.env.js是配置正式环境的分别在这两个文件下的API_URL中写下对应的正式服测试服域名下面的是正式服的域名2.请求是的时候通过 process.env.API_URL拿到需要的域名如果你的请求是通过a...

基本的用法mySwiper1 = new Swiper('#swiper-container1', { loop: true, // 循环模式选项 autoplay: { disableOnInteraction: false, //防止手动切换后 自动轮播失效 delay: 15000 }, observer: true, //修改...

npm install -g @vue/cli-init

一、把父组件里的值传给子组件1.父组件通过v-bind:绑定传输的值2.子组件用props接收1.父组件里的代码如下<template> <div class="parent_component"> <p>父组件里的时间{{starttime}}</p> <childcomponent class="ch...

选择一个时间段开始日期是自己传入 选择截止日期组件代码如下<template> <div class="calendar"> <!-- 选择日历的弹出层 --> <div class="model_mask" v-show="showtimemask" @click="showmask1()"> <...

1.vue-router: 页面路由，用于做单页面应用(SPA)2. axios: 一个很好的ajax封装集3.vuex: 数据状态管理。4. vue-lazyload ：一个简单易用的 Vue 图片延迟加载插件；5.v-distpicker : 省市区三级联动6.mint-ui :移动端的UI库7.vue-scroller : 平滑滚动，拉动刷新和无限加载...

1、通过data-toggle初始化属性 <!-- 按data-toggle="distpicker"属性初始化 --> <div data-toggle="distpicker"> <select></select> <select></select> <select></...

一、第一个例子如果你定义的字符串里想要有双引号等一些字符 使用转义符号可以<script> // 转义符号 反斜杠\ var str = "afdkfjldkf;" var str1 = "afdk\"fjldkf;" //如果想在字符串里面使用双引号 var str2 = "abcdef\\sdkjfls" // 结果如下 ...

方法:正则表达式的方法：　　1：test()方法：在字符串中查找符合正则的内容，若查找得到返回true，否则false;　　　　格式：正则.test(字符串)；　　　　emailPattern.test("123_456@qq_mail.com")　　　　//...

先说一下Math的一些方法Math 对象方法Math.ceil(); //向上取整。Math.floor(); //向下取整。Math.round(); //四舍五入。Math.random(); //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 //比如0.8647578968666494以下一些实例Math.ceil(Math.random() ...

let arr1 = [1, 2, 3, 4, 1] //方法1:Array.filter() + indexOf var a = arr1.filter((item, index) => { return arr1.indexOf(item) === index }) console.log(a); //方法2:利用inc...

1.方法一两组数据比对 如果第二组数据里的某项的值得已经在第一组数据里存在 就把第一组里的该属性的项变成第二组里的值var arr1 = [{ id: 1, istrue: false, }, { id: 2, istrue: false, ...

一、删除不符合条件的数据数据如下 (把status等于1的数据删除) var list = [{ "amount": 10, "createTime": 1533010042926, "id": 14, "status": 0 }, { "amoun...

第一种方法----遍历数组Object.assign 拷贝对象 只适用于拷贝一层数组Object.assign(target, source)<script> { //没有影响 这样拷贝一个对象数组 对象里的值只支持一层 let arr = [{ id: 1, val...

图示返回的选中列表是一个数组html部分<!-- 自定义多选 --> <div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel(index,item)">{{item.val}}&...

图示封装的组件的代码如下<template> <div class="calendar"> <!-- 选择日历的弹出层 --> <div class="model_mask" v-show="showtimemask" @click="showmask1()"> </div> <...

开发微信小程序的过程中，选择一款好用的组件库，可以达到事半功倍的效果。自从微信小程序面世以来，不断有一些开源组件库出来，下面6款就是排名比较靠前，用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你，可以关注和了解一下哦！WeUI WXSSWeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验。GitHub地址：https://github...

在上一篇文章中，我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建，并创建了第一个mpvue小程序代码骨架并将其运行起来。在本文中，我们来研究熟悉一下mpvue项目的主要目录和文件结构。在Visual Studio Code里面打开项目文件夹，我们可以看到类似如下的文件结构：firstapp├── package.json├── project.config.json ...

【最近更新】mpvue入门系列教程：如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程（六）使用mpvue开发小程序教程（五）使用mpvue开发小程序教程（四）使用mpvue开发小程序教程（三）使用mpvue开发小程序教程（二）使用mpvue开发小程序教程（一）接触微信小程序有一段时间的开发者或开发团队，我相信多多少少都会为自己搭建封装一些便于开发的框架/脚手架...

前段时间，美团开源了mpvue这个项目，使得我们又多了一种用来开发小程序的框架选项。由于mpvue框架是完全基于Vue框架的（重写了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由于受限于小程序环境本身的原因而不能使用），这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序。如果之前还未曾用过Vue这个框架的话，建议你可以快速浏览一...

html代码 <form action="" name='fm'> <div> 文本框demo:<br> <input class="firstname" type="text" name="firstname" value="hellow"> </div&g...

(function () { const ulContainer = document.getElementById("list-data"); //const ulContainer = _this.$refs.list; // 防御性编程 if (!ulContainer) return; const total = 10000; // 插入数据的...

//用闭包形式来写，前面加;是防止跟其他js压缩时报错;(function(global){ //开启严格模式 "use strict"; //构造函数定义一个类 传参数 function Scroll(el,options) { //some code }; //原型链上提供方法 Scroll.p...

$root，$parent都能够实现访问父组件的属性的方法，两者的区别在于，如果存在多级子组件，通过$parent访问得到的是它最近一级的父组件，通过root访问得到的是根组件。$parent$parent在子组件中调用父组件的方法跟data里设置的数据父组件data() { return { parent: 1, }; }, meth...

通过返回一个vue实例把事件绑定在vue实例上1.第一种写法1.先在main.js里生成一个vue实例//组件A中，触发事件 this.$root.myEvent.$emit("trans", value); //myEvent是main.js里设置的空的vue实例名//组件B中，监听事件that.$root.myEvent.$on("trans", ...

小数点计算求值不准解决办法下面有几个例子解决方法parseFloat((a + b).toFixed(10))1.数组初始化需求: 后台返回一组数据，对这组数据标识选择或者不选中状态的时候let selectedList=new Array(8).fill(false);console.log(selectedList); //[false, fal...

由于网上的插件没有符合项目的需求决定自己实现图示如下:默认选择今天的日期时间段1.默认状态(默认选择当前日期的时间段(蓝底背景色代表选中时间段),2.当前日期之前的时间不可以选择(禁用了点击事件))3.当日历上的操作的年份月份小于当前时间的年份月份时禁止点击上一月的按钮选中状态1.可以跨年分跨月份选择2.点击取消按钮时回复到默认的选择时间代码如下...

<script> //setDate() 来设置当前月的某一天。 (1 ~ 31) var d = new Date() d.setDate(15) console.log(d) //Mon Jul 15 2019 14:38:14 GMT+0800 (中国标准时间)</script><script> // 返回...

// getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 //1.获取当前日期是周几 console.log(new Date().getDay()) //2.获取当月第一天是周几 传入的月份比现实月份小一个月 console.log(new Date(2019,6,1).getDay()) co...

// getDate()用法-----------getDate() 方法可返回月份的某一天 (1 ~ 31)。 // 1.获取当前日期是几号 console.log(new Date().getDate()) //2.获取某个日期是几号 console.log(new Date("July 21, 1983 01:15:00").get...

获取当当前时间年月日时分秒var myDate=new Date()console.log(myDate) //Wed Jul 10 2019 13:51:15 GMT+0800 (中国标准时间)console.log('年份:'+new Date().getFullYear()) //年console.log('月份:'+new Date().getMont...

选择一个时间段的思路如图部分代码如下<template> <div class="biji"> <div class="span" v-for="(item,index) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28...

computed计算属性计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：get用法<div class="computed_watch"> <P>我的姓名:{{message}}</P> <P>我的姓名:{{reversedMessage}}</P></div>...

1.如图（省市区加上全部联动）第一步:找到了一个普通的省市区先进行遍历更改2.把更改后的json文件放入vue项目中引入到你想要的页面3.剩余代码如下<template> <div class="percentloop"> <!-- 地区选择 --> <section class="secti...

如图代码如下<template> <div class="percentloop"> <li class="percent-list" v-for="(item, index) in percentData" :key="index"> <div class="wrap"> <div...

定义Mixins模块/* 固定定位下居中 */@mixin pfb { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateZ(0);}使用.navtap{ @include pfb; }定义带参数的Mixins模块/* 宽高 */@mi...

原来的数据类型转变后的数据类型代码如下<script> var shuju = [{ "createTime": 1537512367759, "id": 124, "ins": "", "integral": -10, "integralType": 2, ...

先看一下错误的案例直接用变量复制一个值，新的值成为了原来的值引用，两者的修改就会互相影响<script> var arr12 = [1, 2, 3, 4, 5]; var b = arr12; b.push(6); console.log(b); //[1, 2, 3, 4, 5,6] console.log(arr12) /...

1.根据id和并json<script> let arr = [{ id: 1, name: '张三' }, { id: 1, name: '李四' }, { id: 3, ...

循环数组的多种方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...

案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...

1.模板字符串使用案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...

1.基础用法<script> // 原来 var arr = [1, 2, 3]; console.log(arr[0], arr[1], arr[2]) //使用解构赋值1 let [a, b, c] = [1, 2, 3]; console.log(a, b, c) //使用解构赋值2 { ...

微信内H5调起支付https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6现金红包https://pay.weixin.qq.com/wiki/doc/api/tools/cash_coupon.php?chapter=13_4&index=3微信JS-SDK说明文档ht...

第一步安装vue-i18nnpm install vue-i18n --save第二步：新建一个语言包文件lang 里面分别是中文包跟英文包第三步 配置main.jsimport VueI18n from 'vue-i18n'/* 平台国际语言静态字典 */import LangEn from './common/lang/LangE...

图示如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...

Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项...

笔记代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...

笔记代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...

代码相关:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...

(1)有边框的三角形我们来写下带边框的三角形。如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。这里就涉及到...

图示代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...

import React, {Component} from 'react';import logo from './logo.svg';import './App.css';import {Person,Twoway} from './Person/Person'class App extends Component{ state={ showpink:false...

app.jsimport React, {Component} from 'react';import logo from './logo.svg';import './App.css';import {Person,Twoway} from './Person/Person'class App extends Component{ state={ persons:...

import React, {Component} from 'react';import logo from './logo.svg';import './App.css';import {Person,Twoway} from './Person/Person'class App extends Component{ state={ persons:[{name...

方法一import React, {Component} from 'react';import logo from './logo.svg';import './App.css';class App extends Component{ state={ showmodel:false } //方法 change=()=>{ //动态的更改...

Person.jsimport React from 'react';const Twoway=(props)=>{ return( <div> <p>数据双向绑定</p> <input type='text' onChange={props.get} placeholde...

Person.jsimport React from 'react';const Person=(props)=>{ return( <div> <p> 我是{props.name},今年{props.age}岁 </p> ...

Person.js import React from 'react'; const Person=(props)=>{ return( <div> <p> 我是{props.name},今年{props.age}岁 </p> ...