- 博客(86)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 VUE-DAY01
04、简单Vue创建实例总结:(1)定义变量:let 定义变量 ； const 定义常量；(2)const app = new Vue ({el:加上绑定的元素；data:{} })其中创建实例关键字为new，Vue指调用vue.js中的Vue函数直接调用函数进行创建实例，类似于var app= function vue(); <div id="app"> <p>{{message}}</p> <p>{{
2021-01-05 00:36:03
206
原创 设计模型理解
例子的环境是表单的验证，有手机号验证，邮箱验证等function tester() { this.testList = [];}tester.prototype.addTest = function (fn) { this.testList.push(fn)};tester.prototype.runTest = function (value) { var self = this; async function runList(value) { l
2022-03-17 23:25:51
928
原创 vue 使用svg渲染地图
本人小白，看了同事代码实现的效果实现思路：1、找ui要到的svg图片，把其中path的值赋值过来，所有数据一起组成一个json文件Json文件{ "svgArr": [{ "d":"M440.9,128.9l25,16.3l9.5,32.3l9.5,4.3v6.3h7.5l13.3,7l2,8.5l24.5,9l4.4,3.3L530,222l2.9,15l11.8,7.1v12.2 l6.5,10.9l10,1l1.5,7.9l-17.5,4.6l-0.1,3.
2022-02-11 10:07:50
2103
1
原创 echarts实现svg地图
链接阿里云数据可视化平台介绍之前写了另一个echarts实现地图的，可以移步这里这次是用的echarts+svg实现的，参考了echarts的这两个案例庖丁解牛内脏数据代码废话不多说，直接上代码<template> <div> <h1>深圳罗湖区--svg地图</h1> <div id="main"></div> </div></template><script
2022-01-21 16:07:35
9941
5
原创 vue+js 实现倒计时，鼠标移动停止，无操作自动倒计时
vue+js 实现倒计时功能整体功能倒计时代码完整代码分析效果整体功能1、刚进入页面时、自动开始倒计时2、当用户有按键盘、鼠标点击、鼠标滚轮、鼠标移动时，停止倒计时3、停止鼠标事件等，重新开始倒计时。（这里写的不好，还是从最开始的事件重新减的）倒计时代码for (let i = 0; i < 1000; i++) { clearInterval(i); clearTimeout(i); } (function ($) { var funO
2022-01-13 19:47:34
1866
原创 pdfjs-dist pdf预览（打包正常）
1、安装指定版本“pdfjs-dist”: “^2.0.943”,2、showpdf组件<template> <!-- pdf base64显示 --> <div class="pdf" ref="pdf"> <div class="button"> <button @click="onPrevPage">上一页</button> <button @click="onNextPage">下一页<
2022-01-12 09:31:31
1109
原创 meta print 设置打印时样式
meta print 设置打印时样式背景实现背景遇到一个胡搅蛮缠的客户，各种出乎意外的需求，前面提了各种各样的需求，又要求能够打印网页，但是由于跟前面提的各种浮窗定位冲突了，请教了我的老大，又是偷学的一天.因为定位，滚动的区域我是写的一个div，跟整个网页的页面同宽高，这样我滚动的区域就不是html而是我这个div,当打印时，就只会截取当前页面。利用media适配对打印的样式进行调整实现@media print里面的内容只对打印出来的内容有效，之外的内容就是屏幕显示的样式。 @media p
2022-01-05 10:08:40
875
原创 vue+echarts 区域地图绘制（街道）
vue+echarts 区域地图绘制（街道）1、以下是本人参考别的博主的链接2、需要用到的资源3、获取地图JSON（1）[阿里云](http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5)获取--只精准到市区（--这里以深圳市为例）（2）[北斗卫星软件](http://www.bigemap.com/)获取--精准
2021-12-21 17:37:33
6369
3
原创 pdfjs-dist 实现pdf文件在线预览
pdfjs-dist 实现pdf文件在线预览实现效果实现过程（1）安装pdfjs-dist（2）代码部分（3）原理项目要求实现pdf文件在线预览，并且pdf预览通过上下页滚动pdf,且兼容ie浏览器浏览器兼容参照了这位博主的文章，选择用pdfjs-dist 实现实现效果这是我随便写的一个pdf(一共2页)，可通过点击上下换页谷歌浏览器ie11实现过程（1）安装pdfjs-distnpm install --save pdfjs-dist@2.0.943这里需要指定2.0.943的版
2021-12-17 15:28:35
17172
8
原创 Vue-cli--jquery.ajax调用接口跨域问题（ No ‘Access-Control-Allow-Origin‘ ）
Vue-cli--jquery.ajax调用接口跨域问题（ No 'Access-Control-Allow-Origin' ），接口无法加载响应数据本人小白一个，在调用后台给的接口时，频频报错，特此记录一下项目是vue-cli搭建，分正式测试环境，接口使用jquery.ajax调用调用过程中出现以下两个错误一个是No 'Access-Control-Allow-Origin，在网上找了相关文章为跨域问题，因为我本地和接口所在地址不是同源，这个后面采用了代理处理另一个是failed to loa
2021-12-13 16:13:05
1316
原创 79-高阶
这里写目录标题mixinmixinMixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。mixin会和原本组件的选项里的数据合并(例如data,methods之类)，组件的选项优先级高于mixin,如果有相同的会被替换，如果是生命周期的钩子函数，会新执行mixin再执行组件里的钩子函数<!DOCTYPE html><html
2021-11-21 22:33:56
486
原创 phpstudy 8.1小皮配置vue项目本地域名访问
phpstudy 8.1小皮配置vue项目本地域名访问1、安装phpstudy2、phpstudy配置3、问题排查1、安装phpstudy1、先下载安装小皮，这里就不做赘述官网下载地址2、phpstudy配置因为我这里只是一个网页的显示，就只启动了apache服务注意这里的路径，如果是vue项目，要先打包,然后指向dist生成的文件路径，我这里是把dist打包好的文件复制到小皮下文件目录，注意一定是index.php或者是 index.html配置完成后，来到设置里检验配置的端口是否可
2021-11-18 14:30:37
4694
原创 vue布局组件(router-view)
网页中，很常见的是头部导航栏、底部链接、面包屑或者其他部分，在网站的每一个页面都会出现，并且样式统一可以使用vue-router提供的router-view来构成一个布局组件，将头部导航栏、底部链接等写在页面上固定渲染，切换页面时，只切换中间内容部分思路：1、创建一个layout文件，放置一个router-view标签即可，每一个路由请求默认都是从这里进去跳转，这里是示例每个页面都带一个面包屑组件（一般是app.vue，这里我自定义了一个）//layout文件<template>
2021-11-05 14:42:32
7295
原创 常用表单正则规则校验
常用表单正则规则校验身份证单位机构代码电话座机邮政编码邮箱身份证身份证验证（只验证号码长度、出生年月、Xx） card: {// 身份证验证（只验证号码长度、出生年月、Xx） has: /.*身份证[^件].*/, re: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10
2021-10-18 16:58:13
120
原创 65-68 watch侦听 补充知识点
65-68 watch侦听 补充知识点watch侦听器单项数据流（补充）动态绑定传参便携写法no props 主要用于传递样式watch侦听器watch可以监听data中的数据，自带两个参数，current,prev分别是之前和之后的值掌握watch和计算属性的区别watch更适合异步的操作，适合一个属性变化引起一系列变化的情况计算属性:需要通过计算得到，直接计算结果 watch:{ price(current,prev){
2021-10-10 22:17:50
124
原创 56-61 组件插槽、动态组件，异步组件
插槽的基本使用先写一个组件，然后将按钮注释，改为插槽，其中插槽可以编写默认内容，在应用组件时，将自定义元素写在组件中，就会替换slot的标签，十分灵活 <body> <div id="app"> <lk-box><button>点我</button></lk-box> <lk-box><input type="text" placeholder="输入名字"></lk
2021-10-05 21:44:08
263
原创 40-55 组件化、父子组件通信
40-全局化组件局部组件-使用components选项进行引入父子组件组件标签化第二种-template标签（项目开发中常用）掌握1、组件不能直接访问vue实例的数据data为什么是函数，不是对象全局化组件组件必须先进行注册，挂载到实例时当全局组件中使用其他组件时，必须在实例前使用；<body> <div id ="app"> <div id="home"><span>首页</span></div>
2021-09-23 00:10:26
117
原创 vue+js实现描点跳转的导航跟着滚动条实现变化
页面代码，导航条为ul部分 <div class="header-bookmark" ref="bookmark"> <ul class="bookmark"> <li v-for="(item, index) in bookmark" :key="index" class="bookmark-item" :
2021-09-22 16:15:38
844
原创 获取富文本编译器内容并显示在html页面上
参考链接这里使用的是v-html指令，v-html会将元素当成HTML标签解析后输出例如<body> <div id="app"> <p v-cloak>{{ msg }}</p> <p v-text="msg"></p> </div> <script type="text/javascript"> var vm = new Vue(
2021-09-14 16:18:04
7042
原创 表单不能更改-Readonly和Disabled的区别
Readonly和Disabled的作用都是使用户不能更改表单域中的内容两者的区别1、对应表单标签不同Readonly 只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包含select，radio，checkbox,button等，在选择时需要按照标签进行选择；2、提交是否被传递在表单元素使用disabled后，表单以Post、Get等方式提交的话，这个被使用了disabled的值不会被传递出去，而readonly会将该值传递出去
2021-09-14 09:39:38
126
原创 vue-前端实现省市三级联动选择（elementUI的级联选择器el-cascader）
参考链接：emementUI官方介绍element-china-area-data参考链接安装npm install element-china-area-data -S使用regionData是省市区三级联动数据（不带“全部”选项）CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市import { regionData, CodeToText } from "element-china-area-data";省
2021-09-13 09:46:58
3142
channel_v3.zip
2021-03-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人