随笔分类 - vue
摘要：获取今天以后一月内的日期数组 效果图 // 获取今天 const today = this.$moment(new Date()); // 获取一个月后的日期 const nextMonth = today.clone().add(1, "months"); // 初始化日期变量 const cur
阅读全文
摘要：日期数组时间轴显示 效果图 <template> <div> <div class="time-line"> <span>小时的时间轴显示</span> <div class="time-box"> <div v-for="(item,index) in dateList" class="time-
阅读全文
摘要：vue 项目中添加水印效果 效果图 原文链接：https://article.juejin.cn/post/7140610844223602725 方法 1 通过 waterMark.js 实现 水印会随着页面滚动而滚动 waterMark.js const watermark = {}; cons
阅读全文
摘要：/* eslint-disable */ function getUrlKey (name) { return decodeURIComponent((new RegExp("[?|&]" + name + "=([^&;]+?)(&|#|;|$)").exec(location.href) ||
阅读全文
摘要：vue + elementUI + moment 根据切换月份查看当月的日历 main.ts import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from ".
阅读全文
摘要：mousemove 移动选中单元格 mousemove 移动选中单元格 click 选中/取消单元格 <template> <div class="table-page"> <div class="table-box"> <table cellpadding="0" cellspacing="0">
阅读全文
摘要：vue3 Vite 安装 npm init vite@latest -- --template vue npm install npm run dev 动态参数 动态属性 v-bind绑定 <button @click="attributeName = 'class'">改变属性 动态事件 <but
阅读全文
摘要：1、封装时间组件(基于 element) commonDate.vue <template> <!-- 年月日 --> <el-date-picker v-model="val" :type="type" :value-format="valueType" :format="valueType" :
阅读全文
摘要：实现的图 代码 小时的时间轴显示 {{hour + 7}} import { Component, Vue } from "vue property decorator"; @Component export default class TimeLine extends Vue { endTime
阅读全文
摘要：实现单选时的价格，全选时价格 单选效果图 全选效果图 <! 淘宝结算购物车 {{item.content}} ${{item.money}} {{item.num}} + 全选 合计{{total}} 结算({{num}}) export default { data(){ return { che
阅读全文
摘要：vue中使用window.print打印效果 项目要求 打印每页有10行表格，如果接口数据没有十个显示10行 效果图 第一页 第二页 子组件 打印页面 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione officiis
阅读全文
摘要：vue做单选只能选一个 <! 多行多列单选 只能选一个 {{item.sex}} {{list.name}} export default{ name: 'list', data() { return { checked: '', items: [ { sex: '男爱豆', introduce:
阅读全文
摘要：vuex是一个专门为vue.js设计的集中式状态管理架构。状态？把它理解为在data中的属性需要共享给其他vue组件使用的部分。 简单的说就是data需要共用的属性 一、小demo 已经用Vue脚手架工具构建好项目 1、引入vuex 1.安装vuex npm n install vuex save
阅读全文
摘要：路由，其实就是指向的意思 当我点击页面上的Home按钮时，页面中就要显示home的内容，如果点击页面上的about按钮，页面中就要显示about的内容。 Home按钮 = home内容，about按钮 = about内容，也可以说是一种映射。 所以在页面显示中，有两个部分，一个是需要点击的部分，一个
阅读全文
摘要：`目录结构` | build // 项目构建(webpack)相关代码 | | build.js // 生产环境构建代码 | | check version.js // 检查node、npm等版本 | | dev client.js // 热重载相关 | | dev server.js // 构建本
阅读全文
摘要：概述： 实例就是在构造器外部操作构造器内部的属性选项或者方法，这叫做实例。实例的作用就是给原生的或者其他JavaScript框架一个融合的接口或者说是机会，让Vue和其他框架一起使用。（摘自技术胖博客http://jspang.com/） 一、实例属性 1、vue和jQuery.js一起使用 {{m
阅读全文
摘要：axios 基于promise用于浏览器和node.js的http客户端 特点 支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动转换JSON数据 浏览器端支持防止CSRF(跨站请求伪造) 一、安装 npm安装 $ npm install axi
阅读全文
摘要：生命周期图示 创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后 beforeCreate:function(){ console.log('1 beforeCreate 组件还未被创建'); }, created:function(){ console.log('2 created 组
阅读全文
摘要：Vue点击切换多个class {{item.text}} import Vue from 'vue' export default{ data:function() { return { items:[ {text: '静安区'}, {text: '宝山区'}, {text: '虹口区'}, {te
阅读全文
摘要：1.安装vue cli,通过vue v可以查明 安装vue cli步骤 vue init airyland/vux2 projectPath（项目名字） 2.安装依赖模块 方法1：npm install 方法2：npm install registry=https://registry.npm.ta
阅读全文