前端
前端
深夜的我最精神
这个作者很懒,什么都没留下…
展开
-
h5适配iphone 刘海安全距离 (vue)
1.App.vue 加样式名, safe-area-content,名字可以随便起。原创 2023-05-05 11:34:35 · 1155 阅读 · 0 评论 -
Vue自定义组件实现v-model指令(实测可以)
1.子组件<template> <div> <input type="text" :value="$attrs.value" @input="codeInputChange"> </div></template><script>export default { methods:{ codeInputChange (e) { const value = e.target.value原创 2022-05-16 17:55:54 · 458 阅读 · 0 评论 -
vue 引入动态svg
亲测可用,如果有其他方法也可以告诉我<template> <embed :src="svgImg" width="100" type="image/svg+xml"/></template> import svg from './xx.svg';<script> export default { data(){ return { svgImg: svg } } }</script>...原创 2022-04-01 15:02:20 · 1856 阅读 · 1 评论 -
Scroll或者页面元素距离某个位置的方法(个人理解使用)
1.ScrollScrollTop: (被滚动条卷去的头部高度)ScrollLeft: (被滚动条卷曲的左侧距离)ScrollWidth (内容实际宽度:width+padding+超出盒子的宽度)ScorllHeight (内容实际高度:height+padding+超出盒子的高度)2.getBoundingClientRect() 元素距离页面可视区域上下左右的距离getBoundingClientRect().topgetBoundingClientRect(.原创 2021-12-20 15:28:05 · 409 阅读 · 0 评论 -
vuex dispatch 和 commit(个人理解使用)(经常不知道是使用dispatch 还是 commit)
1. vuex 文件import Vuex from 'vuex'Vue.use(vuex);const store = new Vuex.store({ state: { nickName: "", cartCount: 0 }, mutations: { updateUserInfoMutations(state,nickName) { state.nickName = nickName; }, upd.原创 2021-12-13 16:41:08 · 953 阅读 · 0 评论 -
vue $set 改变数据和改变对象
1.data 数据 data () { return { obj: { name: '周杰伦', sex: '男' } } }2. methods methods: { changeObj () { this.$set(this.obj, 'age', 88) this.$set(this.arr, 1, 87) } },3.改变后的值...原创 2021-12-09 19:39:00 · 1175 阅读 · 0 评论 -
vue plugins 创建和使用(个人使用)
1. plugins.jsexport default function install (Vue) { if (install.installed) return install.installed = true Vue.component('VueSkipTo', VueSkipTo) Vue.directive('focustest', { inserted (el) { el.focus() } })}2. main.js 引入和注册原创 2021-12-09 15:47:27 · 359 阅读 · 0 评论 -
vue directives 指令按需引入使用
1.index.js 里写着指令// 获取焦点export const focustest = { inserted: function (el) { el.focus() }}2.当前页面需要按需引入指令使用import { focustest } from '../directives/index.js' // 根据自己要求写路径 directives: { focustest: focustest }3.html 里使用<inp原创 2021-12-08 18:02:39 · 391 阅读 · 0 评论 -
vue 使用 vconsole 移动端H5调试(引入使用)
1.引入<template> <div class="cod-policy" ref="codPolicyBox"> <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> </div></template>2.再mounted 使用moun原创 2021-11-22 18:25:01 · 1253 阅读 · 0 评论 -
exports、module.exports和export、export default(个人总结)
1.exports 导出,如何导入使用demo1.jsexports.getData1 = function(a){ console.log('a', a)}exports.getData2 = function(b){ console.log('b', b)}index.js 使用let test = require('../js/demo1')test.getData1(101)2.module.exports导出, 如何导入使用(项目中基本都是用这种方法,很少原创 2021-11-09 11:32:07 · 170 阅读 · 0 评论 -
解决 css让页面字体小于12px
transform: scale(0.7); //缩放0.7倍但是由于缩放之后没有左对齐,所以还要使用以下方法,根据实际要求transform-origin: 0 0;原创 2021-10-21 17:52:51 · 303 阅读 · 0 评论 -
css 实现 0.5px 边框
.xxx:after{ content: ""; position: absolute; top: 0; left: 0; border-bottom: 1px solid #979797; box-sizing: border-box; width: 200%; height: 200%; transform: scale(0.5); ...原创 2021-10-21 17:13:37 · 153 阅读 · 0 评论 -
node 修改需要重新启动和修改无需重新启动命令
1.修改需要重新启动方法2.修改无需重新启动命令原创 2021-10-21 17:11:38 · 343 阅读 · 0 评论 -
vscode i18n-ally 插件的使用
1.安装i18n-ally2.设置 ->setting.json 里配置// i18n插件 配置 "i18n-ally.localesPaths": "src/assete/lang", // 自己多语言的路径 "i18n-ally.dirStructure": "file", "i18n-ally.keystyle": "nested",原创 2021-10-20 19:02:08 · 3901 阅读 · 0 评论 -
vue 生命周期(含中文翻译)
图片来源不知道,没法写转载,所以写原创,可联系我改转载转载 2020-10-06 20:09:21 · 366 阅读 · 0 评论 -
vuex registerModule 后 引入对应的数据方法(个人笔记)
import test2 from '../../store/module/test2'this.$store.registerModule('test', test2, { preserveState: fales})1.mapState...mapState({ privacyTxtMax: state => state.test.detail })或者...mapState(test ,{ privacyTxtMax: "detail"...原创 2021-07-29 18:04:01 · 393 阅读 · 0 评论 -
vue 项目 eslint vscode 保存后自动格式化 (个人实战可以)
1.安装eslint 插件2. 进入 vscode setting.json 里面1.添加 代码,完成"editor.codeActionsOnSave": { "source.fixAll": true },原创 2021-07-23 16:17:50 · 210 阅读 · 0 评论 -
web 前端跨域,查看是否允许跨域
Access-Control-Allow-Credentials响应头表示是否可以将对请求的响应暴露给页面。返回true则可以,其他值均不可以。Access-Control-Allow-Origin响应头指定了该响应的资源是否被允许与给定的origin共享。//指定允许其他域名访问'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies//是否允许后续请求携带认证信..转载 2021-06-28 16:43:16 · 1419 阅读 · 0 评论 -
vue3 main.js 引入axios 的方法(如图)
原创 2021-06-16 14:11:10 · 3398 阅读 · 0 评论 -
js 构造函数静态方法 和 静态属性 调用方法
<script> function Obj(name,age){ this.age = age this.name = name this.test = function(){ console.log(this.age) } Obj.test4 = function(){ console.log("构造函数属性方法") } Obj.text = '构造函数静态属性'...原创 2021-06-12 22:33:12 · 1118 阅读 · 0 评论 -
js 静态属性和静态方法调用方法
1. 天真的我以为这样调用 <script> function Obj(name,age){ this.age = age this.name = name this.test = function(){ console.log(this.text) } } Obj.test2 = function(){ console.log(123) } Obj.text原创 2021-06-12 22:17:58 · 420 阅读 · 0 评论 -
js:什么是实例,什么是实例化(大白话)
// 一. 定义一个构造函数 function Person() { } // 二. 实例化一个对象, 赋值给变量p var p = new Person();//P是实例//new Person() 是实例化原创 2021-05-29 17:52:12 · 1925 阅读 · 1 评论 -
普通函数this 、class this 和箭头函数的this指向(个人觉得很容易理解)
6. this 指向 (最终的调用者,就是this)(1)//默认绑定(2)隐式绑定 (对象方法被调用时,会发生隐式绑定,this 指向该方法的对象)(3)硬绑定(4)构造函数绑定(5)剪头函数 :该函数所在的作用域指向的对象,对象是不能形成独立的作用域 (我个人理解是,当前作用域的上一级)...转载 2021-05-28 23:25:01 · 232 阅读 · 0 评论 -
http-serve 服务器(一个最简单的本地服务器)
1.安装 http-serve (前提,需要已经安装node)npm i http-serve2.进入目录3.原创 2021-05-27 20:25:12 · 652 阅读 · 0 评论 -
快速安装,自动配置好 element ui (不详细,个人笔记使用)
1.命令vue add element 安装其他看步骤完成原创 2021-03-28 17:17:34 · 86 阅读 · 0 评论 -
vue-cli>3 关闭 eslint (个人实战)
1.vue.config.js 文件添加一行代码module.exports = { lintOnSave: false, //是否开启eslint}原创 2021-03-08 22:50:29 · 93 阅读 · 0 评论 -
vue 安装cube-ui
我的环境前提:vue-cli >= 3 (vue-cli <3我没有写)1.命令执行 vue add cube-ui2.是否选项如下原创 2021-03-04 18:24:29 · 498 阅读 · 1 评论 -
vue 使用引入 scss 报错,需要降版本的正确方法
报错信息:in ./src/assets/styles/global.scssSyntax Error: TypeError: this.getOptions is not a function1.sass版本太高了,需要回退版本,把已经安装的版本卸载,重新安装,安装如下cnpm inode-sass@4.14.1 -Scnpm isass-loader@7.3.1 -S2.重新启动,正常...原创 2021-03-02 16:01:07 · 2488 阅读 · 0 评论 -
vue 安装sass 、 less 和 stylus
刚开始的时候以为安装一个sass 就可以,发现有坑,其实需要安装2个库cnpm i node-sass sass-loader -S就是这么简单原创 2021-02-28 15:28:15 · 283 阅读 · 0 评论 -
vue 使用 qrcode 生成二维码图片(个人实战)
1.安装qrcodenpminstall--saveqrcode2.按需引入importQRCodefrom'qrcode'3.生成图片二维码方法 QRCode.toDataURL('这里放需要生成的资源') .then(url => { this.imgPay = url //this.imgPay 就是二维码资源信息,直接使用就行<img :src="imgPay" alt=""...原创 2021-02-08 16:44:03 · 1147 阅读 · 0 评论 -
vue router 路由跳转常用的4 个方法
1.方法一this.$router.push('/xx') xx是配置路由时的path的值2.方法二this.$router.push({ xx1是配置路由时的name的值 name:'xx1', query:{ xx:xx //这里可以配置一些参数,可以不配置 } })3.方法三this.$router.push({ path:'/xx2', xx2是配置路由时的path.原创 2021-02-05 11:09:43 · 1044 阅读 · 0 评论 -
Element ui 按需和完整引入,和组件名称的由来(个人实战)
1.安装element-uicnpm i element-ui -S2.main.js 完整引入(这样就可以直接在组件中使用对应的element-ui 组件了)import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);3.按需引入(按组件名称引入)首先,安装 babel-plugin-componentcnpm install b...原创 2021-01-31 21:16:48 · 1553 阅读 · 0 评论 -
vue-awesome-swiper 实现轮播图:方法2(个人实战)
我用的是:"swiper":"^5.4.2", #一定要用这个版本,用6.x很难用,最好用这个,安装命令 cnpm install swiper@5.4.2 -S"vue-awesome-swiper":"^4.1.1" # 安装命令cnpm installvue-awesome-swiper -S使用导入 swiper 和SwiperSlide 实现main.js全局引入import VueAwesomeSwiper from 'vue-awesome...原创 2021-01-10 22:10:06 · 162 阅读 · 0 评论 -
background-size: cover 和contain 的区别
background-size: cover 占满整个背景高和宽background-size: contain按背景等比例缩放原创 2021-01-04 16:06:12 · 156 阅读 · 0 评论 -
vue 本地mock json 数据(个人实战)
环境: vue3 创建的项目1.在pulic 文件里创建mock文件,在mock 里再创建user 文件,在user 文件里创建 login.js (路径具体根据自己需要,我这里是这样写)2.随便找个文件发送请求 mounted(){ //由于public 是根路径,可以省略,直接是/mock/.... this.axios.get('/mock/user/login.json').then(res=>{ console.log(res) }).原创 2021-01-03 14:48:11 · 556 阅读 · 0 评论 -
vue 前端项目mock 数据,使用淘宝rap2(个人实战)
环境: vue3 的创建的项目1. 由于vue3创建的项目没有了config.js配置项目,这个新增的vue.config.js 的配置项,名称规定是这个#vue.config.js 文件module.exports = { devServer:{ host: "localhost", port: 8080, proxy:{ '/api':{ target: 'http://rap2api.taobao.org/app/mock/27464原创 2021-01-03 14:28:06 · 902 阅读 · 0 评论 -
vue less 样式穿透写法(个人实战)
刚开始,我网上一直找,搞不懂,可能我的方法有问题,所以写下,以swiper 来做例子1.html 数据结构<template> <div class="slite-box" v-show="show" @click="handleClick"> <div v-swiper:mySwiper="swiperOption"> <div class="swiper-wrapper"> <div class=..原创 2020-12-29 11:45:06 · 3518 阅读 · 0 评论 -
vuex 的使用(不是很详细,个人笔记使用)
1.安装vuexnpm install vuex --save2.写一个store 仓库, main.js 导入 vuex 的一个仓库(1)仓库import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { city: localStorage.city || "上海" }, actions:{ setCity(cxt,c原创 2020-12-21 20:54:29 · 74 阅读 · 0 评论 -
vue DOM实现使用 better-scroll 使用上下滚动,可实现局部滚动(个人实战)
我个人觉得官网写的有问题,也试了很多次官网的方法,无法拖动,才写了以下这个教程1.安装better-scrollnpm install better-scroll -S # 安装带有所有插件的 BetterScroll2.html结构需要符合要求(官方要求的结构)<div class="wrapper" ref='wrapper'> <ul class="content"> <li>...</li> <li.原创 2020-12-17 13:26:51 · 603 阅读 · 0 评论 -
vue-awesome-swiper 实现轮播图:方法1(个人实战)
我用的是:"swiper":"^5.4.2", #一定要用这个版本,用6.x有bug,最好用这个,安装命令 cnpm install swiper@5.4.2 -D"vue-awesome-swiper":"^4.1.1" # 安装命令cnpm installvue-awesome-swiper -Dmain.js全局引入import VueAwesomeSwiper from 'vue-awesome-swiper' //引入vue swiper(1)...原创 2020-12-08 22:55:45 · 458 阅读 · 0 评论