- 博客(39)
- 收藏
- 关注
RSS订阅原创 jQurey获取元素宽高包括小数点，记录常用height()、width()等使用显示
jQurey获取元素宽高包括小数点<div class="open"></div>高度var height = $(".open")[0].getBoundingClientRect().height;宽度var height = $(".open")[0].getBoundingClientRect().width;常用jQurey获取元素高度css(‘height’)返回带有完整单位的字符串（例如：100px）。height() - 设置
2021-12-10 12:07:10
460
原创 jQuery WeUI日历calendar时间段（开始日期默认选中日期是今天，结束日期设置最小日期），显示日期格式是yyyy年mm月dd日
jQuery WeUI官网： https://jqweui.cn(国内)说明日历calendar时间段为两段，开始日期和结束日期。开始日期：打开后，默认选中日期是今天。结束日期：打开后，默认选中和最小日期是开始日期。html<div class="weui-cell__bd"> <input class="weui-input" id="start_datetime" type="text"style="border: 0;width: 7rem;padding: 0
2020-11-06 17:54:31
2823
原创 jQuery单选框radio点击选择，判断input填写框是否显示
例子单选框radio（不用name和value做判断判断条件）。点击“其他”时候，后面的input填写框显示。点击“中国大陆”，后面input填写框不显示。代码html代码，默认选择“中国大陆”。<div class="a"> <div> 注册地域： </div> <div> <label><input class="AreaLan"
2020-11-06 17:21:40
760
原创 input里面放iconfont图标，placeholder属性样式修改，vue简单监听input输入框输入内容则iconfont消失，图标反转
效果vue项目，用stylus处理css样式input放图标<div class="jobs_input_wrapper"> <input class="input_text" type="text" placeholder="搜索" v-model="userinput"> <i class="icon iconfont icon-sousuo" v-if="isicon"></i></div>ps：这里利用绝对定位
2020-09-13 15:07:19
2755
原创 在vue项目中引入index.html的外部css样式文件
1.报错在index.html外部引入css报错2.查看config文件下的index.js：assetsSubDirectory：除index.html外的静态资源存放的路径assetsPublicPath：打包后，index.html里引用资源的的相对地址static中的文件是完全不被webpack处理的，文件会直接复制到最终目录（dist/static）下。因此引用文件要是绝对路径。3.成功引入...
2020-09-04 13:44:25
5357
原创 vscode使用快捷键一键生成vue默认的初始结构
1.打开vsCode打开路径：文件-->首选项-->用户代码片段-->vue.json2.vue.json设置粘入编辑好的vue模板：{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>", "", "<scri
2020-09-02 14:37:29
5598
2
原创 解决git报错：‘fatal: unable to access ‘https://XXX: Failed onnect to github. com port 443: Timed out
问题解决发现原来是自己以前用过代理，这里取消代理就可以了git config --global --unset http.proxy解决例子git remote rm origin //之前git上传地址报错，删除一下git config --global -l //查看git当前设置git config --global --unset http.proxygit remote add origin https//github.com/XXX //XXX自己的github项目地址
2020-09-01 18:39:22
73943
11
原创 解决git问题：fatal: remote origin already exists.
git报错：解决： git remote rm origin
2020-09-01 17:32:28
86
原创 成功获取QQ音乐的MV视频（内含视频接口）
1.跨域webpack.base.conf.js文件：const devWebpackConfig = merge(baseWebpackConfig, {... devServer: {... before(app) { ... app.get('/api/getPlaySongVkey', function (req, res) { var url = 'https://u.y.qq.com/cgi-bin/musicu.fcg'
2020-09-01 14:31:03
3554
原创 vue-video-player的组件简单使用
1.安装npm install vue-video-player --save或者：cnpm install vue-video-player --save2.main.js引入import VideoPlayer from 'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.use(VideoPlayer)3.组件使用ps:
2020-09-01 00:29:49
1552
原创 解决vue动态路由返回后再点击进去，地址重复叠加
一.问题1.第一次点击，点击跳转页面后点返回2.第二次点击代码：vue组件：<li class="mv-item" v-for="item in MvList" @click="selecMVList(item)"> ...<!-- 循环MvList数组 --></li>selecMVList(item) { this.$router.push({ path: `search/list/${item.vid}` //ite
2020-09-01 00:04:18
1926
1
原创 Vue 因父元素没有撑开所需的宽度，不能横向滚动
当子元素li竖向排列时，父元素可以撑开高度的。但当多个子元素li单行横向排列，父元素却无法撑开宽度，并且宽度固定为页面宽度。而当需要横向滚动，父元素需要撑开宽度才可以进行滚动。eg.源码： <div class="pic-wrapper"> <ul class="ul"> ...
2020-01-09 16:44:25
684
原创 Vuex笔记（三）--- actions和mutations交互时候，传递的是一个包含数据的对象
actions和mutations交互时候，传递的是一个包含数据的对象。这个对象包含不同数据。eg.state.js： 保存数据const state = { foods: [], shops: []}export default state问题就是mutations.js里面：1.第二个参数foods是用{}包住，foods传递的是一个包含数据的对象。2.第二个...
2019-12-17 12:02:00
584
原创 在vue中使用swiper方法
swiper官网：https://www.swiper.com.cn/usage/index.html安装：npm install swiper --save-dev/>.</个人喜欢方法二方法一：根据官网一样写法，因此哪个组件需要用swiper就直接在组件里引用。轮播器需要什么就写什么，具体看官网，我这里只需轮播循环、分页器为点。<template><...
2019-12-11 11:59:30
690
原创 vue在slot子组件里的内容样式不作用
slot在子组件里不作用，但在父组件里能作用eg.成功代码及效果子组件：<template><div> <div class="top_container"> <slot name="left"/> <div class="top_title ellipsis">{{title}}</...
2019-12-11 10:55:02
3209
2
原创 CSS记录
displayeg.默认。此元素会被显示为内联元素，元素前后没有换行符。playdisplay: inlinejustify-contenteg.项目位于各行之间留有空白的容器内playjustify-content: space-betweenalign-itemseg. 元素位于容器的中心。playalign-items: centervertical-alig...
2019-12-10 16:30:50
89
原创 vue data使用外部其他js文件（使用其他数据大量图片）
1.js文件js文件里都是本地图片资源（本地图片导入方法）export default { data () { return { navImg: [ { id: '001', imgUrl: require('@/pages/MSite/image/nav/1.jpg'), desc: '甜品1...
2019-12-04 10:38:21
2276
原创 vue导入及使用本地图片
MSite.vue导入本地图片图片所在位置：1.直接使用<template> <img src="./image/1.jpg"/></tempalte>2.data里使用require<template> <img :src="imgUrl"></template><script>ex...
2019-12-04 10:37:02
31782
1
原创 导航使用padding和margin让图片自适应排布
padding和margin取值为百分比的时候，不管是left和right，还是top和bottom，参照的是父元素的宽度width。即进行占位和宽度（left/right）或高度（top/bottom）自适应。eg.导航效果：1. 导航容器设置 .nav height 200px margin-top 15px ...
2019-12-03 11:46:55
514
原创 transform:translate(-50%,-50%)水平垂直居中效果
transform: translateY(-50%) 实现元素垂直居中效果transform:translate(-50%,-50%)实现水平垂直居中通过position absolute和top 50%，结合transform产生效果。eg.头部CSS排版<style lang="stylus" rel="stylesheet/stylus">.top_contai...
2019-12-02 12:13:52
4824
原创 eslint报错：Newline required at end of file but not found
eslint报错：官网解释：https://eslint.org/docs/rules/eol-last此规则在非空文件的末尾强制执行至少一个换行符（或不存在换行符）。在v0.16.0之前，此规则还强制文件的末尾只有一行。如果仍然需要这种行为，请考虑启用 带有和/或 没有尾随空格的no-multiple-empty-line。代码修正：...
2019-11-29 16:26:22
4162
原创 stylus和stylus-loader使用
参考文档：https://stylus.bootcss.com/stylus：CSS的预处理框架，即将stylus转换为css使用stylus-loader：让webpack理解stylus安装npm install stylus stylus-loader --save-dev编写使用1）完全通过缩进控制, 可不需要大括号、分号、冒号、逗号2）父级引用：使用字符&指向父...
2019-11-29 12:16:24
3605
原创 Vue Router - 钩子函数
参考文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html全局钩子：beforeEach，afterEach1.beforeEachconst router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ......
2019-11-29 11:00:52
142
原创 vue移动端音乐---使用QQ音乐数据
技术栈vuevue-routervuexjsonpaxios相关的基础插件stylus：CSS 的预处理框架，以及stylus-loaderfastclick：解决移动端点击延迟300ms问题better-scroll：滚动vue-awesome-swiper：用于实现了首页的轮播图vue-layload：解决页面刷新后图片全部加载问题create-keyframe-...
2019-11-20 12:20:46
1200
1
原创 小白接触GitHub(三)---vue项目上传
注册GitHub（注册详情）下载Git下载地址: https://git-for-windows.github.io/一直next到finish新建repository存储库在GitHub上角完成后这里有个SSH地址：ps:删除repository（详细内容）Git Bash Here在项目空白处右键，如果你之前安装git成功的话，右键会出现两个新选项，分...
2019-11-19 13:09:11
132
原创 小白接触GitHub(一)---GitHub注册
1.GitHub注册：https://github.com/2.填写个人信息下一步：3.选择计划（choose your plan）两种选择：（1）创建公开仓库（repository）（2）创建个人仓库（private），但需要费用因此我选择第一种。选好后，点击continue。...
2019-11-19 11:51:35
195
原创 手机端和电脑端打开可以看到同一vue项目
1，ipconfig查询电脑连接的手机热点或者是wifi的地址：2.package.json在"scripts"里"dev"添加你的地址：–host 地址3.在config文件下修改host，这样手机端才可以打开这样手机端和电脑端打开同一网址都是可以看到vue项目的...
2019-11-14 17:45:02
466
原创 vue项目使用vconsole，这样手机端也可以console
vconsole的了解：https://github.com/Tencent/vConsole/blob/dev/README_CN.md一，使用vconsole1.vue项目安装vconsolenpm install vconsole2.在入口文件main.js引入vConsoleimport Vconsole from 'vconsole'let vConsole = new V...
2019-11-14 17:32:51
2199
原创 Vuex笔记（二）--- store里的分割
项目api下的store文件，把state、getters、mutations、actions分割放到不同的js文件里：index.js入口文件：加入vuex自带的工具import Vue from 'vue'import Vuex from 'vuex'import * as actions from './actions'import * as getters from './g...
2019-10-26 12:10:26
171
原创 Vuex笔记（一）---个人总结概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。State需要共用的数据（跟组件、项目、模块所相关最底层的数据）都放在state里。访问方法：1.使用辅助函数：mapState2.子组件能通过 this.$store.stateGetter对数据进行映射。getters可以是个函数，类似计算属性，可以根据state不同值计算一个新的值。getters里面也可以写一...
2019-10-26 11:45:05
204
原创 watch:{} 与 this.$watch() 一样
this.$watch() 的使用（这里可以放在Vue生命周期钩子里）：this.$wath('query', (newQuery) => { this.$emit('query', newQuery) })watch:{}的使用（一个方法）：watch:{ query(newQuery){ this.$emit('query', ...
2019-10-24 16:08:09
5368
原创 动态子路由跳转成功，页面没有成功渲染
这里是动态子路由跳转成功明明链接都成功显示到子路由id，页面没有成功渲染。仔细看代码原来是路由的index.js写错了。错误代码：这次的子路由是动态的，id前面少了“ : ”。所以跳转是正常的，而没有渲染。正确代码：...
2019-10-22 11:02:48
1501
原创 vue报错：Error in created hook: "TypeError: Object(...)(...).then is not a function"
代码正常运行后，打开浏览器报错：过了一会时间又多了一个报错：我百度了一下第一句报错内容：问题解决过程：1.检查代码：比如生命函数钩子或组件中的方法等等有没有写错1）生命函数钩子：eg. created() {} 写成：（错误写法）created: {}2）组件中的data需有return：eg.data() { return { singing...
2019-10-18 15:54:42
32279
1
原创 vue更新后删除了dev-server.js，后台数据模拟或开发本地请求本地数据配置在webpack.dev.conf.js
根据学习发现vue现在新版是没有dev-server.js的，现在所有的后台数据模拟或开发本地请求本地数据配置都在webpack.dev.conf.js配置使用。旧版源码都是在dev-server.js配置好可以用的，但新版只能在webpack.dev.conf.js重新更改配置。一，创建好开发框架的实例等不管是旧版dev-server.js还是新版webpack.dev.conf.js，用...
2019-10-16 16:31:02
259
原创 在入口文件main.js引入styl报错，不断修改后运行正常了
在入口文件main.js里导入styl文件，直接运行发现系统报错了。想了一下，发现并没有安装stylus和stylus-loader。把系统的所有终端调试运行都停止，直接在项目下安装：1.npm install stylus --save2.npm install stylus-loader --save安装完成后打开package.json看到有这两个都显示当前版本（我感觉可能是直接在...
2019-10-10 16:25:41
651
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人