- 博客(22)
- 收藏
- 关注
原创 React使用stylus,并解决typeerror this.getoptions is not a function问题
先下载stylus相关包 npm install stylus stylus-loader --save-dev 然后显示隐藏的相关配置文件npm run eject如果有你使用了git还会报错,所以需要在项目目录执行一下git add .git commit -m "初始化项目(备注)"然后在config/webpack.config.js里添加以下内容(前面css/cass都是自带的,脚手架搭起来的都有)const stylusRegex = /\.styl|stylus$/;
2021-07-06 15:39:45
398
原创 VUE双向数据绑定原理官方解释
今天在看文档时发现了这部分,讲得详细,希望大家都可以看看https://vue3js.cn/docs/zh/guide/reactivity.html#vue-%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96
2021-04-15 15:39:51
164
原创 VUE中图片src属性动态显示(根据路由)
点题::src需要使用require()直接上代码如果当前路由等于这个图片对应的菜单就让图片显示激活,否则就显示未激活的 <el-menu-item index="1"> <template slot="title"> <img :src=" defaultActive === '1' ? re
2021-04-13 17:44:23
590
原创 VUE前端展示代码(使用vue-codemirror)
我了解了一下highlightjs和vue-codemirror,我觉得codemirror使用起来更方便,文档看起来也更加清楚,所以这里使用codemirror。先放一个样子,看一下首先npm导入npm install vue-codemirror --save因为不考虑全局使用,只是在一个组件内用,就不用全局引入先引入组件import { codemirror } from "vue-codemirror";然后引入需要的样式,这里给两个可以直接查看主题样式的链接https://c
2021-04-07 18:10:41
6796
原创 VUE纯前端实现数据转CSV格式下载
话不多说直接上才艺<template> <div> <el-button type="primary" @click="xiazai">主要按钮</el-button> </div></template><script>export default { data() { return { //表头 header: [{ label: "name" }, { labe
2021-03-03 17:12:06
1549
1
原创 vue-code-diff添加横向滚动同步功能
在组件的mounted中添加下面的代码这里可能会遇到无法正常获取元素的问题可以看下我的另一篇文章:https://blog.csdn.net/weixin_45091037/article/details/114086733我的解决办法就是把vue-code-diff组件作为一个子组件,在该子组件的mounted使用下面的代码,父组件通过import调用这个子组件在子组件中mounted() { this.tongbu(); },methods: { tongbu() {
2021-02-25 15:46:36
1177
原创 关于VUE无法正确获取元素 添加事件问题
在vue中监听一个滚动事件失败情景父组件是home页面的一个子路由,通过router-view进入如图示,我在子组件的mounted时获取“内容区”这个元素,然后给它添加滚动监听事件,这时该元素是可获取,并且可以添加监听事件的但是当我将子组件的功能拿出来放到父组件中,并且在父组件的mounted添加滚动监听事件,这时该元素无法获取我尝试搜索这个问题来解决它1、使用Vue.nextTick()方法,并不能获取到元素2、target.addEventListener(‘scroll’, thi
2021-02-25 15:32:15
365
原创 Ctrl+A 只选中div中的内容,而不选择页面全部
今天碰见一个需求,要求Ctrl+A只选中div中的内容搜索以后发现给div添加contenteditable属性是个不错的方法contenteditable 元素属性默认属性: false可选属性: true | falseHTML5 引入的新属性还有可以通过onselectstart, onselect 事件来控制用户选择但是实现起来比较麻烦,所以我选择了使用contenteditable给出这位老哥的地址:https://segmentfault.com/a/11900000123165
2021-01-29 11:01:41
729
原创 Python猜大小案例(使用if、while)
import random#展示进入游戏的提示信息print('*' * 10)print('欢迎进入澳门赌场')print('*' * 10)#确认进入游戏money = 0answer = input('确认进入游戏吗(y/n)?')#充值功能————>用户进入游戏就判断金币是否足够def moneyFull(): global money while money < 2: n = int(input('金币不足,请充值(100元/30币,
2021-01-14 16:59:16
880
1
原创 Python使用input输入字符串会报错
当我们使用input函数接受输入的字符串,并在后面的代码中调用时userName = input("Please input userName:")input只会尝试输入数值型的数据(输入是整型,浮点型时合法,输入字符时会转换为对应的ascii码),如果输入是没有加""的字符串就会被认为是一个变量,而这个变量之前没有声明过就会报未定义的错误。NameError: name XXXXX is not defined就是你输入的这个字符串没有定义应该使用raw_input函数,这样输入的数据都会被
2021-01-11 15:30:07
4396
原创 使用ssh连接docker服务器
我刚接触docker时,是真的懵,看了半天菜鸟教程也不会使,现在至少了解了docker是一个容器,里面可以放各种软件,放了ubuntu的话,这个容器就可以看做ubuntu在其他环境使用。下载就按照教程中的来,没啥好说的,放出菜鸟里的安装教程https://www.runoob.com/docker/windows-docker-install.html主要说一下怎么创建一个docker服务,让别人可以通过ssh来连接使用(以ubuntu为例)创建容器需要镜像,使用过ubuntu等镜像安装的小伙伴
2021-01-06 14:06:14
1218
3
原创 element UI表格中设置文字提示(tooltip)或弹出框(popover)
写在前面在表格中自定义内容的时候需要使用<template>标签,否则无法正常显示1、文字提示用具名 slot 分发content,替代tooltip中的content属性。也就是说content属性是一行,而且不支持自定义,可以使用具名slot来给文字提示设置内容<el-table-column prop="name" label="姓名" width="180"> <template slot-scope="scope"> <e
2020-12-29 16:50:13
9411
2
原创 路由守卫钩子函数
一丶全局守卫全局守卫守卫所有的路由,进入每一个页面都会触发,在生命周期beforCreate之前//不能直接导出router实例,需要使用变量接收一下var router = new Router({ routes: [ { path:"/login", component:login, name:"登录页" }, { path:"/index", component:index } ]});//
2020-09-29 21:14:35
705
原创 Vue实现路由懒加载的方法
正常的路由加载//引入需要使用的包import Vue from 'vue'import Router from 'vue-router'//引入组件import login from '../pages/login'import index from '../pages/index'Vue.use(Router)//设置路由export default new Router({ routes: [ {path:"/login",component:login,name:"
2020-09-29 19:56:07
238
原创 常见的字符串方法:查找/提取/转数组/替换等
所有字符串方法都会返回新字符串。它们不会修改原始字符串。正式地说:字符串是不可变的:字符串不能更改,只能替换。查找字符indexOf()方法返回字符串中指定文本首次出现的索引(下标)str.indexOf("查找的字符");lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引str.lastIndexOf("查找的字符");如果未找到文本, indexOf() 和lastIndexOf() 均返回 -1。两种方法都接受作为检索起始位置的第二个参数。lastInd
2020-09-24 20:22:01
423
原创 fs模块文件流读取与写入
我这里准备了两个文件start.txt表示开始文件 end.txt表示结束文件1.读取流 const fs = require("fs"); //创建对某个文件的一个读取流 let readStream = fs.createReadStream("start.txt"); //设置读取流的编码 readStream.setEncoding("utf8"); let data = ""; //用来储存传输的数据 let index = 0
2020-09-09 19:37:44
1141
原创 fs模块的常用方法实例
这是我的文件夹样子,话不多说直接上方法.首先需要导入文件系统模块const fs = require("fs");1.获取文件信息 //fs.stat("url",callback(错误信息,文件信息){ }) fs.stat("./data.txt", (err, stats) => { //先判断err是否为真(判断是否读取成功) if (err) { console.log("读取失败"); } else {
2020-09-09 18:55:42
1029
原创 ES6 Generator函数详细说明
GeneratorGenerator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态.function* generator() { yield "hello"; yield "world"; return "ending";};var hw = generator();hw.next(); //{ value: 'hello', done: false }hw.ne
2020-09-07 10:38:44
140
原创 ES6 Promise对象详细说明
Promise对象Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。Promise对象有两个特点:(1)对象的状态不受外界影响。(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise也有一些缺
2020-09-06 15:03:20
103
原创 ES6 Map结构详细说明
mapES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。基本用法 const m = new Map(); const o = {p: "lojo"} ; m.set(o,'content'); console.log(m); //Map { { p: 'lo
2020-09-05 20:15:22
518
原创 ES6 Set结构详细说明
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的(自带去重),没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。let set = new Set([1,2,3,4,5,6,7,2,3,4,5]);console.log(set); //Set { 1, 2, 3, 4, 5, 6, 7 }console.log(set.size); //7数据操作add(value):添加一个值,返回Set结构本身delete(value):删除一个值,返回
2020-09-05 08:14:39
470
1
原创 使用canvas建立一个可以使用彩笔、橡皮檫的画板
使用canvas建立一个可以使用彩笔、橡皮檫的画板我参加了一个web学习班,因为了解到写博客可以有效提高我的知识掌握水平,所以决定从我学习的内容来入手,废话不多说,开始今天的学习。首先我们要在<body>中创建我们需要的标签,代码如下。其中<input type="color">是颜色选择器,<select><option>画笔</option></select>是下拉选择标签,<canvas></canvas&
2020-06-24 21:37:31
352
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人