- 博客(131)
- 收藏
- 关注
RSS订阅原创 微信小程序的定位功能的实现
定位功能的实现定位功能的思路： 1.使用小程序，获取经纬度 2.使用腾讯地图sdk逆地址解析坐标 3.将解析来的地址，渲染到页面解决方法：使用腾讯地图sdk逆地址解析坐标找到官网：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview申请密钥开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webser
2020-12-06 14:53:52
17945
1
原创 微信小程序
一、什么是小程序？ ”触手可及“、”即用即走“，无需下载安装，不用关心安装过多应用；整个小程序所有分包大小不超过 8M单个分包/主包大小不能超过 2M二、 小程序优点平台封闭，上手简单跨平台运行使用方便三、找官网的顺序：浏览器搜索微信公众号官网，点击扫码登录进入微信开放文档3-1初始化项目：新建项目扫码登录开发工具切后台sensor 用来调试地理位置调式重力感应的api目录结构app.json全局的公共配置:是当前小程序的全局配置，包括了小程序的
2020-12-06 14:37:47
267
原创 vuex
1、为什么要用 vuex ？组件通信的类型父子通信跨级通信兄弟通信路由视图级别通信2、通信解决方案props/$emit（父子通信）$refs/ref（父子通信）children/children/children/parent（父子通信）attrs/attrs/attrs/listeners（父子通信、跨级通信）provide/inject（父子通信、跨级通信）eventBus（父子通信、跨级通信、兄弟通信）vuex（父子通信、跨级通信、兄弟通信、路由视图级别通信）lo
2020-12-06 14:28:36
198
原创 vue 路由懒加载
vue-router路由懒加载当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了import Vue from 'vue'import Router from 'vue-router'import NProgress from 'nprogress'import 'nprogress/nprogress.css'// import Home from './views/
2020-10-18 18:44:11
124
原创 vue 路由元信息
vue-router路由元信息定义路由的时候可以配置 meta 字段通过 meta 定义要验证的路由const router = new Router({ routes: [ { path: '/user', component: User, children: [ { path: '', name: 'user', component: Profile,
2020-10-16 16:11:06
689
原创 vue 重定向与别名
vue-router重定向有的时候，我们会根据某种需求对用户请求的页面进行重新定位案例现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道组件// BookChoose.vue<template> <div> <router-link :to="{name: 'book-boy'}">男生</router-link&g
2020-10-16 16:09:40
176
原创 vue 嵌套路由
vue-router嵌套路由一些比较复杂的应用会有多层嵌套的路由和组件组成添加路由与子路由...import User from './views/User.vue'import Profile from './views/User/Profile'import Cart from './views/User/Cart.vue'......{ path: '/user', component: User, children: [ { path: '', na
2020-10-16 16:06:30
396
原创 vue 路由守卫
vue-router路由守卫当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫组件内守卫路由独享守卫全局守卫组件内守卫定义在组件内的与路由有关的生命周期函数（守卫）beforeRouteEnterbeforeRouteUpdatebeforeRouteLeavebeforeRouteEnter当路由解析完成，并中指定的组件渲染之前（组件 beforeCreate 之前），不能这里通过 this 访问
2020-10-16 16:04:45
127
原创 vue动态路由
vue-router动态路由有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url/item/1/item/2/item/3...我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理...{ path: '/item/:itemId', name: 'item', component: Item}...其中 :itemId 表示匹配的 ur
2020-10-16 15:59:55
151
原创 vue cli 脚手架 重新安装步骤
脚手架重新安装步骤删除 node控制面板—》程序（卸载）-----》nodejs（右键单击，卸载）重新安装 node（具体看网址）https://www.cnblogs.com/liuqiyun/p/8133904.html重启电脑执行命令（具体看图片）node -v2.npm cache clean --forcenpm installnpm install -g @vue/cli5.vue --version项目创建https://
2020-10-16 15:57:12
5066
2
原创 vue 使用动画钩子函数（半场动画）
使用动画钩子函数（半场动画）https://blog.csdn.net/weixin_30423977/article/details/95577829v-on:before-enter=“beforeEnter”入场动画之前执行beforeEnter方法v-on:enter=“enter”入场过程中执行的方法 v-on:after-enter=“afterEnter”入场后执行的方法v-on:enter-cancelled=“enterCancelled”入场动画取消的时候执行方法（进入取消
2020-10-16 15:39:28
545
原创 vue脚手架中运用animate.css(4.* 版本)
vue脚手架中运用animate.css(4.* 版本)yarn add animate.css（添加）/ yarn remove animate.css(删除）https://blog.csdn.net/yunchong_zhao/article/details/107207600Vue-cli安装 npm i animate.css@3.7.2 yarn add animate.css@3.7.2npm install animate.css导入//引入an
2020-10-16 15:34:08
463
原创 vue 使用第三方css动画库
使用第三方css动画库https://cn.vuejs.org/v2/guide/transitions.html注意：vue 和 animate.css 版本兼容性问题导致动画不起作用Vue 官网引用的是 animate.css 3.5 版本不能引用 animate.css 最新版本 例如：(4.0)https://www.cnblogs.com/cntian/p/13292041.html自定义过渡类名：duration ：过渡持续时间（以毫秒计）导入动画类库：<lin
2020-10-16 15:27:50
1140
原创 vue 动画
动画https://cn.vuejs.org/v2/guide/transitions.htmlhttps://cloud.tencent.com/developer/article/1468992https://segmentfault.com/q/1010000007738500使用的过渡类名v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之
2020-10-16 15:19:15
146
1
原创 vue动态组件
.组件的切换效果<div id="box"> <input type="button" @click="a='aaa'" value="aaa"/> <input type="button" @click="a='bbb'" value="bbb"/> <component :is="a"></component> </div>new Vue({ el:'#box', data:{ a:"aaa"
2020-10-11 19:36:26
223
原创 vue 插槽
插槽v-sort （3种）https://segmentfault.com/a/1190000012996217?utm_source=tag-newest slot以前2.6.0以后v-slot,vue3以前的slot被废弃1.普通插槽 <aaa> <h1>1111111</h1> </aaa> <template id="one"> <div> <
2020-10-11 19:34:20
214
原创 组件触发事件 以及data 属性
.native 子组件上添加事件（父组件），触发事件，没有.native无法触发无法在组件直接使用事件，需要加修饰符来实现 根元素上监听原生事件（把vue组件转化成一个普通的HTML标签，并且对普通的HTML标签是没有任何作用的）为什么组件里的data是函数？在组件中，因为可能在多处调用同一组件，为了不让多处的组件共享同一data对象，只能返回函数。data为对象的话会报错，为了理解这种机制，我们假设data为一个对象，那么这同一个对象有可能被很多实例共享，一个实例改变其它也会跟着变，这明显是
2020-10-11 19:29:39
411
原创 vue 组件传参
组件传参路由组件传参我们通常把路由直接映射（绑定）的组件称为 路由组件，也只有路由组件才能直接调用路由有关对象：$router、$route当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点*1.父组件向子组件传递参数（还可以传递函数） ====》props*父组件通过自定义属性的方式传给子组件(:parentmsg=”msg”)，子组件用props接受(props:[“parentmsg”]) <ahead
2020-10-11 19:27:03
215
原创 vue 组件
组件（创建的时候可以用驼峰，使用的时候用- myCom ）组件除了没有el 和 data 变成函数之外,其他的跟new vue一样，还多了一个template,template就相当于new vue的视图全局组件 Vue.component("myCom",{ data(){ return{ msghead:"首页" } }, methods:{ }, template:`<h1>{{this
2020-10-11 19:20:58
119
原创 vue 自定义指令
自定义指令http://www.cnblogs.com/ilovexiaoming/p/6840383.htmlhttps://www.jianshu.com/p/c2bef47439abhttps://www.imooc.com/article/42891https://blog.csdn.net/Myinlg/article/details/810929748.1、自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项
2020-10-11 19:01:40
290
原创 vue 自定义过滤器
自定义过滤器/自定义指令/自定义键盘信息/解除事件绑定1.0版 vue过滤器https://www.cnblogs.com/crazycode2/p/6736189.htmlcapitalize 首字母大写uppercase 全部大写lowercase 全部小写currency 输出金钱以及小数点pluralize 输出复数的形式debounce 延期执行函数limitBy 在 v-for 中使用，限制数量filterBy 在 v-for 中使用，选择数据orderBy 在 v-f
2020-10-11 18:53:35
307
原创 vue 实例的简单属性与方法
vue实例的简单属性和方法https://www.cnblogs.com/wspblog/p/9876723.html属性1.this.$data/vm.$data====>data vm.a=100; vm`.$`data.a=100; 直接使用数据 实例的数据对象this.$el/= =vm.$el= =>el 指定要绑定的元素vm.$options.aa/this.$options.aa 访问自定义属性获取所有ref属性的标签（获取D
2020-10-11 18:48:40
547
原创 Vue computed和watch，methods
computed和watch，methodshttps://segmentfault.com/a/1190000012948175https://www.cnblogs.com/fengxiongZz/p/8074731.htmlhttps://blog.csdn.net/lhban108/article/details/82465547watch、computed和methods之间的对比computed(多个值变化，影响到一个结果) 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计
2020-10-06 08:01:46
216
原创 vue 生命周期函数（钩子函数）
生命周期函数（钩子函数）https://segmentfault.com/a/1190000008010666https://segmentfault.com/a/1190000011381906https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA（图） beforeCreate:组件实例刚被创建，无属性 created
2020-10-05 08:15:09
283
原创 Vue 表单
表单 text,password,textarea----->v-model---》value radio,checkbox,select----->v-model checked/v-bind:value表单修饰符： .lazy:失去焦点（change事件同步）或者回车的时候才会同步数据 .number:变成数值 .trim:去掉前后空格，不会去掉中间空https://www.cnblogs.com/xiaobaiv/p/9153020.
2020-10-05 08:14:04
306
原创 Vue 生命周期函数（钩子函数）
生命周期函数（钩子函数）https://segmentfault.com/a/1190000008010666https://segmentfault.com/a/1190000011381906https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA（图） beforeCreate:组件实例刚被创建，无属性 created
2020-10-05 08:12:40
136
原创 Vue 指令（二）
指令（二）指令2.4.v-html 将含有标签的字符串转化成为标签为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的，通过 v-html 可以让内容作为 html 进行解析2.5.v-text 等同于{{}} {{}}闪烁一下，再出数据 ,无法用于属性，前后可以添加内容，会被覆盖<p v-text="title"></p>弊端：v-text 会填充整个 innerHTMLv-html与v-text的区别：相同点：1. 都覆盖掉所在元素的
2020-10-05 08:11:50
263
原创 Vue 指令（一）
指令（一）指令2.1. v-model 双向数据绑定 ref(https://www.cnblogs.com/goloving/p/9404099.html) <input type="text" ref="name" @keyup="show"/> console.log(this.$refs.name.value);//作用2：获取DOM元素 this.msg=this.$refs.name.value;&l
2020-10-05 08:11:18
174
原创 Vue 的特色
vue的特色（ https://cn.vuejs.org/v2/guide/）mvvm（前端） m:model（数据） v:view（视图）vm:viewmodel 数据和视图的桥梁m---->mv----->vm<----mv<-----v双向数据绑定angular mvc（后端） m:model（数据） v:view（视图） c:controller(控制器)v--->c--->mm—>v优点：轻量级高效率上手快
2020-10-05 08:09:25
123
原创 Cookie 第二章 写入cookie
第二章 写入cookie每个cookie都是一个名/值对；可以把字符串赋值：document.cookie=“UserId=123”;在cookie 的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。所以要使用escape/encodeURIComponent来包裹要赋的值，使用十六进制来表示。然后读取的时候，再用unescape/decodeURIComponent来解码，得到原来的值。如果要赋多个值，只能一个一个单独赋值。（资料里说可以用;（分号）来隔开，我测试不成功）（
2020-10-05 08:08:58
1183
原创 Cookie 第五章 localStorage
第五章 localStoragesessionStorage关闭单个窗口，数据就会消失，localStorag可以长期保存数据，有特定的storage事件。https://blog.csdn.net/ruangong1203/article/details/528411351.html<!DOCTYPE html><html><head lang="en"> <title>A</title></head>&
2020-10-05 08:08:37
133
1
原创 Cookie 第四章 sessionStorage
第四章 sessionStorage如果没给cookie设置生命周期，关闭浏览器数据就会消失，sessionStorage关闭单个窗口，数据就会消失。写入数据复杂读取删除数据
2020-10-05 08:08:10
138
原创 Cookie 第三章 读取cookie
第三章 读取cookie简单读取时，用split分隔成数组返回，再做操作。console.log(document.cookie);Cookie的封装方法写入、读取、删除<script> //封装一个cookie的写入方法,包含了一个存储时间 function setCookie(name,value,daynow){ var day=daynow||30; var nowTime=new Date().getTime()+day*24*60*60*10
2020-10-05 08:07:41
336
2
原创 Cookie 第一章 基本概念
第一章 基本概念chrome://settings/content/cookies chrome浏览器的cookie网址
2020-10-04 10:20:07
151
原创 Cookie 本地存储
Cookie 本地存储（客户端存储数据）以前用cookie,兼容性比较好，现在我们用H5 sessionStorage和localStorage，但是H5有兼容性问题
2020-10-04 10:19:46
133
原创 Canvas 第四章 创建路径
第四章 创建路径<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); // canvas.beginPath();// canvas.rect(10,10,150,150);// canva
2020-10-04 10:16:37
116
原创 Canvas 第十一章 图形的组合方式
第十一章 图形的组合方式globalCompositeOperation=“type”;type的值：（11个） source-over：默认值，表示新图覆盖在旧图之上 source-atop：只绘制旧图和重叠的部分，其他透明source-in：只绘制新图的重叠部分，其他透明source-out：只绘制新图，重叠部分和旧图透明destination-over：表示旧图覆盖在新图之上destination-atop：只绘制旧图重叠的部分及新图未重叠部分，其他透明destin
2020-10-04 10:16:18
235
原创 Canvas 第十章 绘制曲线
第十章 绘制曲线<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); // canvas.beginPath();// canvas.moveTo(85,73);// canvas.quadrat
2020-10-04 10:15:49
741
原创 Canvas 第九章 画布方法
第九章 画布方法<canvas height="500" width="500" id="canvas"></canvas> <script> var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); canvas.save();//在还没有移动（200,200）画布之前， 我先保存一下画布(0，0) canvas.beginPath
2020-10-04 10:15:16
197
原创 Canvas 第八章 图像处理
第八章 图像处理绘制图像var elem=document.getElementById("canvas"); var canvas=elem.getContext("2d"); img=new Image(); img.src="img/test.jpg"; img.onload=function(n){ for(var i=0;i<3;i++){ canvas.drawImage(img,i*50,i*50,50,50); }
2020-10-04 10:14:53
85
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人