08 2021 档案
摘要：export function shuffle(arr) { let _arr = arr.slice() for (let i = 0; i < _arr.length; i++) { const j = _getRandomNumber(0, i) const temp = _arr[i] _a
阅读全文
摘要：方法一： 1、data中定义timer变量 data() { return { timer: null } } 2、在使用定时器时将定时器赋值给timer methods: { toggleImg() { this.timer = setInterval(() => { this.currentIn
阅读全文
摘要：根据windows日历，获取当前周，以及当前周的前2周和后4周，共7周的日期范围 export function getFormatDate(serverDate) { let list = [] // 二维数组 let formatDate = function (date, days) { le
阅读全文
摘要：1、作为事件对象【原生事件】 <button @click="handleClick">按钮</button> <el-button @click="handleClick($event)">按钮</el-button> methods: { handleClick(e) { console.log
阅读全文
摘要：1、utils/utils.js const namespace = 'mall' export function setItem(key, value) { let storage = window.localStorage.getItem(namespace) storage = storage
阅读全文
摘要：export const quertObject = (url) => { const queryString = url.split('?')[1] const obj = {} const arr = queryString.split('&') for (let i = 0; i < arr.
阅读全文
摘要：当使用elementUI的按钮组件时 <el-button @click="handleClick1">按钮一</el-button> <el-button @click="handleClick2">按钮二</el-button> <el-button @click="handleClick3">
阅读全文
摘要：定义Child组件： <template> <transition name="slide"> <div id="child" v-show="isShow"> <h1>子组件</h1> <button @click="isShow=false">按钮</button> </div> </trans
阅读全文
摘要：动态面包屑效果： 1、当路由为/home时，面包屑只展示一级 2、当路由为/home/manage时，面包屑显示一级和二级 3、当路由为/home/manage/list或/home/manage/test时，面包屑显示一级、二级、三级 实现： 1、components/BreadCrumb.vue
阅读全文
摘要：相同点： 1、都是用来放静态资源的 2、如果资源在html中使用，都是可以的 <img src="../../../assets/images/002.jpg"> <img src="../../../../static/images/002.jpg"> 3、资源通过import引入，都可以在htm
阅读全文
摘要：<template> <div class="star"> <span class="star-item on"></span> <span class="star-item off"></span> <span class="star-item half"></span> <hr> <span c
阅读全文
摘要：<ul id="list"> <li id="li1">项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul> const list = document.getElementById('list') const li1 = document.ge
阅读全文
摘要：<ul id="list"></ul> const ul = document.getElementById('list') const fragment = document.createDocumentFragment() for (let i = 0; i < 5; i++) { const
阅读全文
摘要：一、async函数返回值都是Promise对象 二、promise.then 成功的情况 对应await 三、promise.catch 失败的情况 对应try…catch 一、async函数返回值都是Promise对象 1、返回值不是promise对象，那么新promise的状态为fullfill
阅读全文
摘要：结论： 1、then 正常返回时，Promise的状态为fulfilled 报错时，Promise的状态为rejected 2、catch 正常返回时，Promise的状态为fullfilled 报错时，Promise的状态为rejected 当状态为成功时： const p = Promise.r
阅读全文
摘要：<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script> const ID_BASE_URL = 'https://jsonplaceholder.typicode.com/to
阅读全文
摘要：class Person { constructor(name) { this.name = name } publicFn() { console.log('公共方法') } } class Student extends Person { constructor(name, score) { /
阅读全文
摘要：dom结构： <h1><b>h1</b></h1> <h2><b>h2</b></h2> <h3><b>h3</b></h3> <h4><b>h4</b></h4> <h5><b>h5</b></h5> <h6><b>h6</b></h6> css： h1 > b, h2 > b, h3 >
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要：1、v-html和v-text（简写：{{}}）相比，可以识别字符串中的标签 data() { return { html1: '<p>HTML1</p>' } } <p v-html="html1"></p> <p v-text="html1"></p> <p>{{html1}}</p> 结果：
阅读全文
摘要：Sticky Footer：页脚footer永远在页面的底部，内容不够长时footer停留在底部，内容撑满时将footer往下挤，footer仍然停留在底部。 实现方式： 1、利用绝对定位和padding-bottom .container { position: relative; min-hei
阅读全文
摘要：/* 第一种方法：设置父容器的行高，子容器需要设置为行内块 */ .box1 { width: 200px; height: 200px; line-height: 200px; background: rgb(164, 214, 179); } .box1 span { display: inli
阅读全文
摘要：block formatting context 块级格式化上下文 形成独立的渲染区域，内部元素的渲染不会影响外界 形成BFC的条件： 浮动元素 float不是none 绝对定位元素 position为absolute或fixed 块级元素的overflow不为visible flex元素 inli
阅读全文
摘要：margin-top 元素向上拖拽 margin-left 元素向左拖拽 margin-bottom 元素本身不变，下边元素上移 margin-right 元素本身不变，右边元素左移
阅读全文
摘要：如果想在命令行输入qq来打开qq软件 这样是不行的，需要进入到qq软件所在的目录 但是想要在任何地址下输入qq都可以打开qq软件，就需要设置环境变量了 【此电脑】-【右键】-【属性】-【高级系统设置】-【环境变量】-【path】双击-【新建】-粘贴qq软件所在地址 重启命令行，此时在任何目录下都可以
阅读全文
摘要：hash： <button id="myBtn">按钮</button> <script> // 监听hash的变化：手动去改路由、浏览器前进后退、点击事件更改hash window.onhashchange = (e) => { console.log('老url', e.oldURL) cons
阅读全文
摘要：动态组件component标签是vue的一个内置组件，通过动态地设置is属性，渲染出对应的组件 使用方法： 1、components/MyText.vue： <template> <div> 文本组件 </div> </template> components/MyImage.vue： <templ
阅读全文
摘要：1、store/index.js： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { buttonPermission: { add: true,
阅读全文
摘要：定义一个Title组件，在使用的时候，通过父组件传值level去定义这个title是h1~h6 1、components/Title.vue： <template> <h1 v-if="level 1"> <a href=""> <slot></slot> </a> </h1> <h2 v-else
阅读全文
摘要：inheritAttrs和$attrs的作用： 当需要将父组件的props传递到子组件中，而子组件的需要接收到props的节点有父级容器，那么就需要用到这两个属性。 将inheritAttrs设置为false，在子组件需要接收props的节点上加上 v-bind='$attrs' 如果父组件中在子组
阅读全文
摘要：1、vue-ssr/index.template.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge
阅读全文
摘要：客户端渲染：前端去服务端获取数据，自己生成dom 服务端渲染：服务端生成dom返回给前端，有利于seo优化 客户端渲染： 服务端渲染： 利用vue-server-renderer渲染一个vue实例： 1、vue-ssr文件夹执行 npm init -y 安装所需插件：npm i vue vue-se
阅读全文
摘要：1、Live Server 实时编译html文件，很香的 2、Bracket Pair Colorizer 将括号的颜色区分开来，看着就很爽 3、Vetur 代码补全、语法高亮、格式化等 4、Vue VSCode Snippets 代码补全 5、Community Material Theme 更换
阅读全文
摘要：1、store/index.js： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { isLogin: false }, mutations: {
阅读全文
摘要：作用：将ui组件转为js组件 利用Vue.extend()封装一个toast组件 1、components/MyToast/index.vue <template> <div class="container" v-if="show"> <div>{{ text }}</div> </div> </
阅读全文
摘要：views/cityDetail.vue： <template> <div class="city-detail">{{$route.params.id}}</div> </template> <style> .city-detail{ height: 1500px; line-height: 50
阅读全文
摘要：给当前路由加上active类名高亮显示： <template> <div id="app"> <router-link to='/' active-class="active">首页</router-link> | <router-link :to="{name:'about'}" active-c
阅读全文
摘要：redirect和alias都是可以将一个地址匹配到想要去到的路由 redirect： { path: '/a', redirect: '/about' } 如果访问 /a 会跳转到 /about alias： { path: '/about', name: 'about', component:
阅读全文
摘要：命名路由： { path: '/about', name: 'about', component: About } 作用： 1、路由跳转 this.$router.push({ name: 'about' }) 2、路由重定向 { path: '/a', redirect: { // path: '
阅读全文
摘要：使用动态路由： views/Home.vue： <template> <div>Home</div> </template> views/User.js： <template> <div> 当前用户id：{{id}} </div> </template> <script> export defaul
阅读全文
摘要：Father.vue： <script> import Child from './Child' export default { beforeCreate() { console.log('父组件 beforeCreate') }, created() { console.log('父组件 cre
阅读全文
摘要：<body> <div id="app"> <p>{{message}}</p> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script> <script> new Vue({ el: '#a
阅读全文
摘要：自定义一个TabBar组件： <template> <div class="tab-bar"> <div v-for="(item,index) in tabList" :key="index" :class="['common',{active:currentIndex index}]" @cli
阅读全文
摘要：异步组件和路由懒加载的原理比较像，路由懒加载是将router.js中的路由通过懒加载的方式引入进来从而提升性能，异步组件是那些没有当做路由去使用的组件，如果需要提升这部分组件加载的性能，需要将它的引入方式由同步改为异步。 1、定义一个List.vue： <template> <div>这是一个列表的
阅读全文
摘要：1、安装： npm install vue-awesome-swiper@3 --save-dev 我的版本是： "vue": "^2.6.11" "vue-awesome-swiper": "^3.1.3" 2、使用： <template> <div class="recommendPage">
阅读全文
摘要：MyButton.vue： <template> <button :class="['my-btn',btnClass]"> <slot name='btnText'></slot> </button> </template> <script> export default { props: { b
阅读全文
摘要：<template> <div id="app"> <h1>axios拦截器</h1> <button @click="handleClick">按钮</button> <p>{{title}}</p> <div v-if="loading">loading...</div> </div> </te
阅读全文
摘要：<li v-for="(item,index) in list" :key="index" class="common" :class="index currentIndex?'active':''">{{item}}</li> <li v-for="(item,index) in list" :k
阅读全文
摘要：[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
阅读全文
摘要：function star(rate){ const star='★★★★★☆☆☆☆☆' return star.slice(5-rate,10-rate) }
阅读全文
摘要：扩展运算符的剩余参数，如果想删除对象中的某个属性，这是一个思路 可以对原对象中的字段重新赋值，以及添加一个新的字段 const obj = { name: 'xx', age: 12 } const o = { ...obj, name: 'yy', hobby: 'ss' } // 重写name，
阅读全文
摘要：利用对象对数组的每一项进行解构，可以方便地获取数组的第n个值
阅读全文
摘要：const flatten = (arr, depth = 1) => depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flatten(v, depth - 1) : v), []) : arr.reduce((a, v)
阅读全文
摘要：var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota']; var carsObj = cars.reduce(function (obj, name) { obj[name] = obj[name] ? ++obj[name] : 1;
阅读全文
摘要：将数组中的值翻倍，再输入大于50的数： const numbers = [10, 20, 30, 40]; const doubledOver50 = numbers.reduce((finalList, num) => { num = num * 2; if (num > 50) { finalL
阅读全文
摘要：const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
阅读全文
摘要：1、方法一：定义临时变量 2、方法二：利用数组的解构（不需要第三个变量）
阅读全文
摘要：创建一个HelloWorld组件： <script> import Test from '@/components/Test' export default { props: { tag: String }, data() { return { arr: ['小王', '小明', '小红'] } }
阅读全文
摘要：1、通过改变父组件中的状态，从而改变兄弟组件的状态 Parent.vue： <template> <div> <h1>父组件</h1> <p>{{name}}</p> <Child1 :name='name' @child1Click='name = $event' /> <Child2 :name
阅读全文
摘要：1、props+$emit Parent.vue： <template> <div> <h1>父组件</h1> <p>{{message}}</p> <Child :message='message' @messageChange='message=$event' /> </div> </templ
阅读全文
