自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(50)
  • 收藏
  • 关注

原创 vue-resource 请求数据 基本使用方法

vue-resource 请求数据 基本使用方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...

2020-01-10 19:47:40 193 1

原创 maptalks地图控制器、限制拖动区域、marker标记、导出示例

// 地图控制器<template lang="pug"> .main #map.container .pane(@click="save") 导出</template><script>import "maptalks/dist/maptalks.css";import * as maptalks from "maptalks";export default { data() { return {

2021-09-23 16:11:46 823

原创 vue 引入 maptalks

vue 引入 maptalks基础//添加maptalks.js依赖npm install maptalks//vue引入maptalks<template lang="pug"> #map.container</template><script>import "maptalks/dist/maptalks.css";import * as maptalks from "maptalks";export default { data() {

2021-09-23 16:05:49 473

原创 clipboard 实现复制 粘贴功能

<el-form-item label="ticketKey"> <span id="code">{{ baseForm.ticketKey }}</span> <span class="copy-link" data-clipboard-target="#code">复制</span></el-form-item><script>const clipboard = null;import Clipbo

2021-02-20 14:51:51 171

原创 elementui 树形控件 默认选中的子树显示颜色

elementui 树形控件 默认选中的子树显示颜色html<el-treev-if="isShowTree":data="data"ref="tree":props="defaultProps":highlight-current="true":current-node-key="this.nodeId"node-key="nodeId":default-expanded-keys="[this.nodeId]":default-checked-keys="[this.node

2020-09-30 16:14:56 1006

原创 vue 搜索关键词高亮显示

vue 搜索关键词高亮显示html<p class="message-title" v-html="item.msgTitle"></p>js// 匹配关键字正则let replaceReg = new RegExp(value, "g");// 高亮替换v-html值let replaceString = '<span style="color:#5184ff">' + value + "</span>"; //可以在style中设置文字颜色

2020-09-30 16:10:49 387

原创 前端微信小程序面试题

初识小程序1.注册小程序2.微信开发者工具3.小程序与普通网页开发的区别4.小程序尺寸单位rpx5.样式导入(WeUI for)6.选择器7.小程序image高度自适应及裁剪问题8.微信小程序长按识别二维码9.给页面加背景色10.微信小程序获取用户信息11.代码审核和发布12.小程序微信认证13.小程序申请微信支付14.小程序的目录解构及四种文件类型15.小程序文件的作用域16.小程序常用组件 1.view 2.scroll-view 3.swiper

2020-06-29 13:44:49 726

原创 前端vue面试题

生命周期函数面试题1.什么是 vue 生命周期2.vue生命周期的作用是什么3.第一次页面加载会触发哪几个钩子4.简述每个周期具体适合哪些场景5.created和mounted的区别6.vue获取数据在哪个周期函数7.请详细说下你对vue生命周期的理解?vue路由面试题1.mvvm 框架是什么?2.vue-router 是什么?它有哪些组件3.active-class 是哪个组件的属性?4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值5.vue-router

2020-06-29 13:42:17 183 1

原创 前端 js面试题

1.简述同步和异步的区别2.怎么添加、移除、复制、创建、和查找节点3.实现一个函数clone 可以对Javascript中的五种主要数据类型(Number、string、Object、Array、Boolean)进行复制4.如何消除一个数组里面重复的元素5.写一个返回闭包的函数6.使用递归完成1到100的累加7.Javascript有哪几种数据类型8.如何判断数据类型9.console.log(1+‘2’)和console.log(1-‘2’)的打印结果10.Js的事件委托是什么,原理是什

2020-06-29 13:39:44 93

原创 前端 浏览器/html/css 面试题总结

浏览器/html/css 面试题1.什么是盒模型2.行内元素有哪些?块级元素有哪些?行内元素和块级元素有什么区别?3.简述src和href的区别4.什么是css Hack5.什么叫优雅降级和渐进增强6.px和em的区别7.HTML5 为什么只写8.Http的状态码有哪些9.一次完整的HTTP事务是怎么一个过程10.HTTP与HTTPS的区别11.浏览器是如何渲染页面的12.浏览器的内核有哪些?分别有什么代表的浏览器13.页面导入时,使用link和@import有什么区别14.如何

2020-06-29 13:35:13 145

原创 elementui中 获取选择器组件 lable中的值

changeLocationValue(val) { let obj = {} obj = this.roleList.find(item => { return item.id === val }) let getName = '' getName = obj.name console.log(getName) this.dataForm.roleName = getName }changeLocationValue为el-select 中的 @ch.

2020-06-18 15:56:11 1820

原创 获取elementui中 联级选择器中的lable的值

handleChange() { var cityName = this.$refs['refHandle'].getCheckedNodes()[0].pathLabels[ this.$refs['refHandle'].getCheckedNodes()[0].pathLabels.length - 1 ] this.dataForm.areaName = cityName console.log(cityName) },handleChange为 el-cascad.

2020-06-18 15:52:13 633 1

原创 elementui 联级选择器 选择任意节点 点击lable时选中并缩起来

mounted() { // 联级选择器点击lable也能选中 setInterval(function() { document.querySelectorAll('.el-cascader-node__label').forEach(el => { el.onclick = function() { if (this.previousElementSibling) this.previousElementSibling.cl.

2020-06-18 15:45:26 501

原创 JS 将扁平化数组转化为树形结构

后台返回数据如下: { AREA_NAME: "浙江省", level: 0, PID: 0, AREA_CODE: 330000 }, { AREA_NAME: "杭州市", level: 1, PID: 330000, AREA_CODE: 330100 }, { AREA_NAME: "宁波市", level: 1, PID: 330000, AREA_CODE: 330200 }, { AREA_NAME: "温州市",

2020-06-12 14:37:49 1641

原创 uniapp搭建微信小程序 ——创建项目

1、通过vue-cli创建vue create -p dcloudio/uni-preset-vue my-project2、选择模板3、运行uniappnpm run dev:mp-weixin4、微信小程序导入项目在项目中的dist——>dev——>mp-weixin5、在app.vue中的style内引入全局样式wxss@import './xxx.wxss'...

2020-05-18 16:45:45 881

原创 nodejs 连接 mysql

var mysql = require('mysql');// 创建连接var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : 'root', database : 'db_why'});// 连接数据库connection.connec...

2020-05-04 18:55:33 87

原创 MongoDB的连接及增删改查

一、导入mongoosevar mongoose = require('mongoose');二、连接数据库mongoose.connect('mongodb://localhost/test');三、设计集合结构var UserSchema = mongoose.Schema({ username: { type: String, requi...

2020-05-04 16:46:48 95

原创 安装MongoDB

1、前往https://www.mongodb.com/下载,选择Commounity Server下载对应版本 如果是win 64位选 64位版本。2、安装MongoDB3、安装完后在命令窗口中 mongod --version查看版本 如果报错,前往计算机----右击属性----高级----环境 变量-----双击path------将安装文件夹地址添加到环境变量。4、在命令...

2020-05-04 12:46:02 64

原创 vue项目初始化工作

vue项目初始化工作1、在assets文件夹中新建 css、js、 img文件夹2、在css、js文件夹中新建reset.css文件、 rem.js文件、server.js文件reset.css地址rem.js地址serve.js地址3、在main.js中导入:import setDevice from './assets/js/rem'import './assets/css/r...

2020-03-12 16:22:55 132

原创 server.js 配置

server.js 配置import Vue from 'vue'import axios from 'axios'var server = axios.create({ baseURL: '', timeout: 10000 // headers: { // 'Content-type': 'multipart/form-data' // }...

2020-03-12 16:04:15 1330

原创 rem.js设置

rem.jsfunction setDevice(deviceW){  var html = document.documentElement  var hWidth = html.getBoundingClientRect().width  html.style.fontSize = hWidth/deviceW*100 + 'px'}export default setDevice...

2020-03-12 16:00:59 99

原创 reset.css 设置

reset.css html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, d...

2020-03-12 15:58:51 73

原创 webpack搭建vue项目的过程

1、使用npm init 初始化出package.json文件2、安装webpack的环境npm install webpack --save-devnpm install webpack-cli --save-dev3、安装所需要的插件或者依赖安装清除和重新产生dist文件夹的插件npm install clean-webpack-plugin --save-dev安装生成html...

2020-03-03 13:30:53 105

原创 javascript——ES5中的特性总结

String.trim()删除字符串两端的空白字符 var str = " hello javascript " console.log(str.trim()) //返回 字符串"hello javascript"Array.isArray()方法检查对象是否为数组 var arr = ["asa","asas",232] console.log(Array.isArr...

2020-03-01 14:11:04 193

原创 js中数组排序的方法

sort()以字母顺序对数组进行排序 var arr = ["html","vue","js","css"] console.log(arr.sort()) //返回 数组 ["css", "html", "js", "vue"]sort()也可以给数字排序 但是 如果数字按照字符串来排序,假如有两个字符串元素"23","100"则 “23” 大于 “100”,因为 “2” 大于 ...

2020-02-20 16:20:55 226

原创 js中数组的方法

把数组转换为字符串1、toString()将数组转化为用逗号隔开的字符串 var arr = ["html","javascript","css"] console.log(arr.toString()) //返回 字符串 "html,javascript,css"2、join()同toString() 方法 不同的是可以规定用什么符号隔开 var arr = ["html"...

2020-02-20 15:22:56 66

原创 js中字符串的方法总结

字符串长度length 属性返回字符串的长度 var str = "I like javascript" console.log(str.length) //结果 17(包括空格)查找字符串中的字符串1、indexOf() 方法返回字符串中指定文本首次出现的索引(位置): var str = "I like javascript" console.log(str.i...

2020-02-19 18:35:27 197

原创 CSS 面试题——盒子水平垂直居中

CSS 面试题——盒子水平垂直居中方法一:通过定位(三种方法)1、已知盒子宽高 html,body{ margin: 0; padding: 0; height: 100%; position: relative; } .box{ width: 600px; height: 400...

2020-02-11 12:15:27 298

原创 vue-cli3中解决axios跨域问题(以360壁纸为例)

vue-cli3中解决axios跨域问题(以360壁纸为例)一、先在vue项目文件夹里的根目录中新建 vue.config.js文件(与package.json同一级)二、在 vue.config.js文件中写入以下代码module.exports = { devServer: { proxy: 'http://cdn.apc.360.cn' //这里写入你要获取数据的...

2020-01-29 19:35:23 218

原创 vuex module总结

vuex module总结// 创建store文件夹 然后在store文件夹下创建对应的js文件// 在该js文件中引入对应的依赖文件import Vue from 'vue'import Vuex from 'vuex'import moduleA from 'moduleA所在的文件的地址'import moduleB from 'moduleB所在的文件的地址'Vue.use...

2020-01-15 15:39:50 90

原创 vuexState 总结

vuexState 总结安装vuex命令 npm install vuex --save使用的过程在vue项目的src文件夹下创建一个store文件在store文件中创建一个js文件在js文件中写入// 引入vuex并且在vue中使用import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 创建...

2020-01-15 10:37:14 95

原创 vuexMutations 总结

vuexMutations 总结mutationsvuex 改变状态的唯一方法 mutations中的方法不能直接调用写法const store = new Vuex.Store({ state:{ user:{ name: '', tel: '', id: '', ...

2020-01-15 10:36:06 92

原创 vuexGetters 总结

vuexGetters 总结getters写法getters方法是和state同一级别的方法getters相当于一个计算属性const store = new Vuex.Store({ state:{ user:{ name: '', tel: '', id: '', ...

2020-01-15 10:34:54 122

原创 vuexActions 总结

vuexActions 总结总结写法 import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) const store = new Vuex.Store({ state: { // 购物车数据 ...

2020-01-15 10:33:29 113

原创 vue 导航守卫

vue 导航守卫全局导航守卫const router = new VueRouter({ routes:[ { path: '/', name: '', component: 组件文件, // 路由独享守卫 beforeEnter: (to, fr...

2020-01-14 20:34:12 76

原创 vue 路由

vue 路由路由分为 编程式路由和声明式路由定义路由对象const router = new VueRouter({ routes:[ { path: '/', name: '', // redirect: '/index', 路由重定向的位置(意思就是要把页面定向到哪一个页面) ...

2020-01-14 20:32:59 100

原创 vue 创建组件的方式

vue 创建组件的方式//1.1 使用 Vue.extend 来创建全局的Vue组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性,指定了组件要展示的HTML结构// })// 1.2 使用 Vue.component('组件的名称', 创...

2020-01-10 20:19:22 68

原创 vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画)

vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...

2020-01-10 20:05:38 249

原创 vue 动画使用第三方库来实现

vue 动画使用第三方库来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...

2020-01-10 20:01:36 69

原创 vue 动画基础

vue 动画基础v-enter //这是一个时间点是进入之前,元素的起始状态,此时还没有开始进入。v-leave-to //是动画离开之后,离开的终止状态,动画已结束。v-enter-active //入场动画时间段v-leave-active //离场动画时间段示例 .v-enter, .v-leave-to { opacity: 0; ...

2020-01-10 19:59:43 62

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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