Vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
MW0309
天才就是无止境刻苦勤奋的能力。
展开
-
HTML+CSS实现时间轴效果
【代码】HTML+CSS实现时间轴效果。原创 2023-04-12 11:36:45 · 1230 阅读 · 0 评论 -
JavaScript 生成随机颜色
JavaScript 生成随机颜色。原创 2022-09-22 15:51:19 · 214 阅读 · 0 评论 -
Vue 按钮防止重复提交
vue 按钮防止重复提交原创 2022-09-14 10:21:01 · 754 阅读 · 2 评论 -
vue页面同时适配手机端和PC端
vue页面同时适配手机端和PC端原创 2022-08-19 16:00:54 · 3836 阅读 · 0 评论 -
Element Table 表格后台数据 是true或者false页面需要展示是或者否
靠过滤器全代码第二种全局过滤器在项目main.js中引用全局过滤器页面直接使用原创 2022-07-11 15:02:33 · 1977 阅读 · 0 评论 -
vue-element-admin多个项目部署到服务器nginx 里面,指定目录
1.多个vue-element-admin 项目部署到同一台服务器的nginx里面2.我们需要修改vue.config.js里面的publicPath原来的配置 publicPath: '/',指定的目录的配置 publicPath: process.env.NODE_ENV === 'production' ? '/gong' : '/',gong 就是指定的目录3.放到服务器指定目录中...原创 2022-05-11 18:12:30 · 1014 阅读 · 0 评论 -
Vuex 动态改变颜色
1.在store文件下的index.js 文件下定义变量import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 定义Mutationexport default new Vuex.Store({ state: { count:0, color:'red' }, mutations: { // 改变颜色 nge(state,step){ state.color=step原创 2022-03-21 21:05:34 · 891 阅读 · 0 评论 -
JavaScript 数组对象 新增对象到数组 根据key判断没则添加有则替换
var problems = [] const problem1 = { problemUuid: 1, voteState: 2 } const problem2 = { problemUuid: 2, voteState: 1 } const problem3 = { problemUuid: 2, voteState: 2 } // 过滤 /** * @param {Object} 新数组原创 2022-01-07 17:30:00 · 1329 阅读 · 0 评论 -
JavaScript 数组对象 根据属性名 拆分,组合成新的数组
var entityList = [ { formatDate: "2021-01", nums: 0 }, { formatDate: "2021-02", nums: 0 }, { formatDate: "2021-03", nums: 0 }, { formatDate: "2021-04", nums: 0 }, { formatDate原创 2022-01-06 15:19:09 · 740 阅读 · 0 评论 -
Vue 链接生成二维码
1.安装qrcodejs2cnpm i qrcodejs2 --save 或者npm i qrcodejs2 --save 2.在需要用的页面中引入 <div id="qrcode" ref="qrcode"></div>3.methods 方法中使用qrcode () { let qrcode = new QRCode("qrcode", { width: 200, // 二维码宽度,单位像素 height: 20原创 2021-11-24 10:33:53 · 3797 阅读 · 0 评论 -
Vuex的认识和基本使用
一、组件之间共享数据的方式父向子传值:v-bind子向父传值:v-on兄弟组件之间传值:EventBus二、Vuex是什么vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。**简单来说:**V原创 2021-06-02 14:50:59 · 153 阅读 · 0 评论 -
Element 表格某一列内容过多,超出省略号显示
使用element组件库里面的Table 表格,遇到某一个字段内容过多,导致td高度被撑开,布局显得很不美观比如:只要给table-cloumn添加一个属性show-overflow-tooltip就可以了 <el-table-column prop="Content" label="内容" width="180"原创 2021-05-08 11:01:10 · 940 阅读 · 0 评论 -
ECharts 基础配置
ECharts基础配置option主要的配置有:series系列图标配置,它决定着显示那种类型的图表xAxis设置x轴yAxis-设置y轴grid直角坐标系内绘图网格tooltip图表的提示框组件title设置图标的标题legend图例组件color调色盘颜色列表toolbox-工具箱组件,可以另存为图片等功能详细请看官网:https://echarts.apache.org/zh/option.html#title原创 2021-02-01 22:46:30 · 184 阅读 · 0 评论 -
ECharts入门
常见的数据可视化库D3.js 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。ECharts 一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,原创 2021-02-01 18:48:13 · 128 阅读 · 0 评论 -
Axios 5种常见的请求方法
axios请求方法:get,post,put,patch,deleteget:获取数据post:提交数据(表单提交+文件上传)put:更新数据(所有数据推送到后端)patch:更新数据(只将修改的数据推送到后端)delete:删除数据...原创 2020-02-09 13:09:17 · 1039 阅读 · 0 评论 -
Axios(二) 方法基本使用
第一步创建一个vue项目,名字叫axios-vuevue create axios-vue第二步先不要急着启动项目,cd 进入到项目中输入cnpm add axios第三步启动项目npm run serve第四步在你views文件中的Home.vue配置一下import axios from 'axios'created() { axios.get('/data.js...原创 2020-02-09 13:01:04 · 126 阅读 · 0 评论 -
Axios(一)基本认识
Axios 是什么 Axios 是一个基于promise的HTTP库 可以用于浏览器和node.jsAxios有哪些特性 支持Promise APl 取消请求  ...原创 2020-02-09 12:30:39 · 127 阅读 · 0 评论 -
Vue watch用法
wathc 监听器虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。直接上代码<div> watch 用法 <br/> {{answer}} <input type="text" v-model="answer"></div>export defa原创 2021-01-11 14:22:36 · 119 阅读 · 0 评论 -
Vue动态路由
动态路由在router文件中先定义路由import Vue from 'vue'import VueRouter from 'vue-router'//主页import Home from '../views/Home'//详情import Detail from "@/views/Detail/Detail";Vue.use(VueRouter) //注册模块const routes = [ { path:'/', redirect:'/home'// 重定向原创 2020-12-20 10:53:17 · 308 阅读 · 1 评论 -
Vue嵌套路由与重定向
在router路由里面配置const routes = [ { path:'/', redirect:'/home'// 重定向 }, { path: '/home', component:Home, //嵌套路由 children: [ { path:'nowplaying', component:Nowplaying }, { path:'comingsoon原创 2020-12-20 03:32:07 · 623 阅读 · 2 评论 -
用vue脚手架创建一个项目 并且配置Element-UI组件库和配置axios库
1.用vue可视化页面创建项目window+R cmd输入vue ui2.安装Element插件,并且去项目中配置然后在你的vue项目中的mian.js中加入三句话就行了// 手动配置element-uiimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3.配置axios库去mian.js中加入两句话就行了...原创 2020-07-15 20:20:43 · 372 阅读 · 0 评论 -
Vue CLl 出现 Invalid Host header
产生原因新版的webpack-dev-server增加了安全验证,默认检查hostname,如果hostname不是配置内的,将中断访问。解决方案在根目录下创建文件vue.config.js,然后填入如下内容disableHostCheck: true,...原创 2020-03-20 13:40:41 · 219 阅读 · 0 评论 -
Vue CLl 反向代理配置
第一步需要下载 axioscnpm install --save axios里面的内容module.exports = { devServer: { proxy: { '/ajax': { target: 'http://m.maoyan.com', /* ws: true,*...原创 2020-03-20 12:16:15 · 180 阅读 · 0 评论 -
Vue CLl单个文件组件+多个文件组件
单个文件组件基于Vue CLl脚手架 把App.vue全部内容删了换成下面的<template> <div> <h1>MW</h1> <input type="text" ref="mytext"> <button @click="handleAdd">添加</button> ...原创 2020-03-19 18:40:04 · 444 阅读 · 0 评论 -
Vue CLi eslint 打包
就两步第一步最好执行自动修复错误代码(比如少一个空格)npm run lint第二步打包npm run build最后会生成一个dist的目录 那个里面就是我们写好的,最后后台需要就直接拿去用...原创 2020-03-19 16:51:31 · 339 阅读 · 0 评论 -
Vue CLl 基础知识+安装
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service),该依赖:可升级;基于 webpack 构建,并带有合理的默认配置;可以通过项目内的配置文件进行配置;可以通过插件...原创 2020-03-19 14:18:15 · 3063 阅读 · 0 评论 -
如果让vue2.0项目中使用vue3.0语法
第一步需要去把原来的项目中引用新的 组合式 API,我参考的是vue的GitHubhttps://github.com/vuejs/composition-api/blob/master/README.zh-CN.mdnpm install @vue/composition-api验证是否成功可以去项目中package.json文件中看是否加入了这个 "@vue/composition-api": "^1.0.0-beta.19",然后去main.js文件中加入import Vue原创 2020-11-18 17:04:03 · 1482 阅读 · 0 评论 -
Vue中处理项目中ESLint 语法报错问题
第一步需要在项目中加入.prettierrc文件{ "semi": false, "singleQuote": true}第二步在.eslintrc.js加入 'space-before-function-paren': 0原创 2020-07-03 11:05:37 · 438 阅读 · 0 评论 -
Vue-指令用法
指令用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue-指令用法</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js...原创 2020-03-15 14:18:26 · 88 阅读 · 0 评论 -
Vue transition过渡
Vue transition过渡 Vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。(1)单元素/组件过渡 css过渡 css动...原创 2020-03-13 14:22:09 · 212 阅读 · 0 评论 -
Vue-slot插槽(内容分发)
slot插槽(内容分发)单个slotb具名slot*混合父组件的内容与子组件自己的模板–>内容分发*父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。...原创 2020-03-13 08:02:48 · 105 阅读 · 0 评论 -
Vue动态组件
知识点<component> 元素,动态地绑定多个组件到它的is 属性<keep-alive> 保留状态,避免重新渲染上代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 动态组件<...原创 2020-03-12 17:37:41 · 87 阅读 · 0 评论 -
Vue非父子通信
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 非父子通信</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">...原创 2020-03-12 15:02:06 · 85 阅读 · 0 评论 -
Vue-ref 通信
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue-ref 通信</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&g...原创 2020-03-11 22:11:23 · 249 阅读 · 0 评论 -
Vue 子传父
Vue 子传父<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue 子传父</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue....原创 2020-03-11 20:39:23 · 138 阅读 · 0 评论 -
Vue 父传子+属性验证
废话不多说上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue父传子</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue....原创 2020-03-11 15:06:58 · 304 阅读 · 0 评论 -
Vue定义组件
废话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue定义组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/v...原创 2020-03-11 07:48:12 · 157 阅读 · 0 评论 -
Vue简易购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue购物车</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&l...原创 2020-03-10 12:16:07 · 153 阅读 · 0 评论 -
Vue表单控件绑定
废话不多说上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue表单控件绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/v...原创 2020-03-09 16:05:18 · 116 阅读 · 0 评论 -
Vue事件处理器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue事件处理器</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cd...原创 2020-03-08 06:33:44 · 158 阅读 · 0 评论