06 2021 档案
摘要：store.js如下： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { value: 100 }, mutations: { updateValu
阅读全文
摘要：<div v-for="(item,index) in color" :key="index" v-if="flag"> {{item}} </div> data() { return { color: ['red', 'yellow', 'blue'], flag: true } } 这样可以渲染
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>导出图片和数据到Excel</title> </head> <body></body> <script src="js/export2Excel.js"><
阅读全文
摘要：效果： 一、通过watch监听和methods进行数据交互 DOM结构： <template> <div id="app"> <ul> <li><input type="checkbox" v-model="allCheck" @click="handleAllCheck" />全选</li><br
阅读全文
摘要：<template> <div class="my-radio"> <ul> <li v-for="item in list" :key='item.id'> <div class="name"> <span>{{item.userName}}</span> </div> <van-radio-gr
阅读全文
摘要：<template> <div class="my-radio"> <ul> <li v-for="item in list" :key='item.id'> <div class="name"> <span>{{item.userName}}</span> </div> <van-radio-gr
阅读全文
摘要：效果图： 需求： 1、根据接口数据渲染list中每条数据，operationType 1则【仅查看】高亮，operationType 2则【可编辑】高亮 2、如果list中的所有数据都是【仅查看】，那么底部的【全部设置为仅查看】高亮，反之【全部设置为可编辑】高亮。如果既有【仅查看】又有【可编辑】，那
阅读全文
摘要：1、lazy <input type="text" v-model="name"> 相当于 <input type="text" :value="name" @input="(e)=>name=e.target.value"> 加上lazy修饰符 <input type="text" v-model
阅读全文
摘要：1、在textarea标签中使用 <textarea v-model="name"></textarea> <p>{{name}}</p> 问题： 在data中的数据已经加上换行符 \n 了，但是页面渲染时并没有换行 解决： 给p标签添加样式 <p style="white-space:pre-li
阅读全文
摘要：如果说要MyInput.vue组件，和父组件App.vue中的name联动 1、MyInput.vue <template> <div> <input type="textarea" :value='value' @input='(e)=>$emit("input",e.target.value)'
阅读全文
摘要：v-model：双数据绑定 一、v-model是一个语法糖 <template> <div id="app"> <input type="text" v-model="name"> <p>{{name}}</p> </div> </template> <script> export default
阅读全文
摘要：我的vue/cli版本： 创建项目，选择Default ([Vue 2] babel, eslint) 选择Default (Vue 3 Preview) ([Vue 3] babel, eslint) 开始对比： 1、目录文件没有区别 2、index.html没有区别 3、babel.config
阅读全文
摘要：上篇：vue基于vant的popup组件封装confirm弹框 为什么用到popup呢？主要是用到了其中的动画，其实这个动画可以通过transition标签实现 效果等同于前篇： step： 1、components文件夹下新建MyConfirm文件夹，分别新建index.vue和index.js
阅读全文
摘要：?. 的概念： 允许读取位于连接对象深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 操作符，不同之处在于，在引用为空的情况下不会引起错误，该表达式短路返回值是undefined。与函数一起使用时，如果给定的函数不存在，则返回undefined。 以上是MDN的解释
阅读全文
摘要：js中有6中情况转为布尔值为false，其他情况都为true： !!NaN 语法相当于Boolean(NaN) 逻辑或运算符 || ：如果左侧的值转为布尔值为true，则结果为左侧的值，反之结果为右侧的值 也就是说以下6中情况，都取的是右侧的值： 空值合并操作符 ?? 和 || 的区别是，?? 左侧
阅读全文
摘要：
如果不是用vant组件库，推荐看：vue封装confirm弹框，通过transition设置动画 效果： step： 1、components文件夹下新建MyConfirm文件夹，分别新建index.vue和index.js index.vue： <template> <div class="my-
阅读全文
如果不是用vant组件库，推荐看：vue封装confirm弹框，通过transition设置动画 效果： step： 1、components文件夹下新建MyConfirm文件夹，分别新建index.vue和index.js index.vue： <template> <div class="my-
阅读全文
摘要：1、下载vant npm i vant -S 2、main.js中全局引入 import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant) 3、使用 <van-button type="primary" @click="()=>{t
阅读全文
摘要：1、安装插件 npm install -g @vue/cli-service-global 2、终端中运行 vue serve 或者运行 vue build 会打包一个dist文件夹，通过anywhere可以在本地启动项目 在任意文件夹下新建的单文件组件都可以通过vue serve的方式启动： 报错
阅读全文
摘要：给每个li添加test3类名： <ul ref="ulRef"> <li class="test1 test2">项目一</li> <li class="test1 test2">项目二</li> <li class="test1 test2">项目三</li> </ul> 1、utils/util
阅读全文
摘要：一、分类：全局守卫、路由独享守卫、组件内路由守卫 全局守卫： router.beforeEach((to, form, next) => { console.log('全局前置守卫 beforeEach') next() }) router.beforeResolve((to, form, next
阅读全文
摘要：一、pc端 pc端一般返回时有返回按钮，这种情况下，在跳转到详情页时通过query或params将当前tab的name或下标传过去，在返回时再通过query或params传回来 data() { return { tabActiveName: 'first' } }, created() { //
阅读全文
摘要：1、下载 npm install vue-touch@next --save 2、main.js中引入 import VueTouch from 'vue-touch' Vue.use(VueTouch, { name: 'v-touch' }) 3、使用，tag渲染成什么标签，默认渲染成div。c
阅读全文
摘要：点击li打印它的index <ul> <li v-for="(item,index) in list" :key="index" @click="handleClick(index)">{{item}}</li> </ul> handleClick(index) { console.log(inde
阅读全文
摘要：<div ref="divRef">div</div> <A ref='aRef'></A> 获取dom： mounted() { console.log(this.$refs.divRef) this.$refs.divRef.style.backgroundColor = 'red' conso
阅读全文
摘要：1、utils文件夹下新建 directives.js： import Vue from 'vue' Vue.directive('watermark', (el, binding) => { function addWaterMarker(str, parentNode, font, textCo
阅读全文
摘要：1、common文件夹下新建 watermark.js： /** 水印添加方法 */ let setWatermark = (str1, str2) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !==
阅读全文
摘要：getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) // 返回 [min, max] }, shuffle(arr) { let _arr = arr.slice() // 浅复制
阅读全文
摘要：console.time("加载时间") // …… console.timeEnd("加载时间")
阅读全文
摘要：const path = require('path') module.exports = { lintOnSave: false, // 是否在开发环境下每次保存代码时都启用 eslint 验证 // chainWebpack: (config) => { // config.resolve.al
阅读全文
摘要：handleCopyName() { let str = this.temp.part1.realname this.copy(str) }, copy(str) { const save = (e) => { e.clipboardData.setData('text/plain', str) e
阅读全文
摘要：1、下载 npm install clipboard --save 2、在需要复制的组件中引入 import Clipboard from 'clipboard' 也可以在main.js中引入： import Clipboard from 'clipboard' Vue.prototype.$cli
阅读全文
摘要：1、下载： npm install --save v-clipboard 2、组件中引入（或者在main.js中全局引入） import Vue from 'vue' import Clipboard from 'v-clipboard' Vue.use(Clipboard) 3、在按钮标签中加载指
阅读全文
摘要：1、打印this.$route 可以发现matched是可以提供面包屑的数据源，根据实际情况进行filter 2、在路由表（路由记录）中添加 meta const routes = [ // 第一级 { path: '/', name: 'Home', component: Home, meta:
阅读全文
