我也要用
Vue
彭世瑜
要成为程序员的男人，个人主页：www.pengshiyu.com
-
原创 Vue：a标签点击和file-saver实现文件下载
<template> <div class=""> <el-button size="small" @click="downloadFile" >保存文件</el-button> </div></template><script>export default { methods: { downloadFile() { var blob = new2020-12-30 11:39:12
45
0
-
原创 Cannot read property 'echarts' of undefined
场景描述：将echarts 引入到vue项目中，使用了地图map，在开发环境中引入没有问题import Echarts from "echarts";// 引入中国地图数据import "./china.js";打包上线后发现界面白屏，而且控制台报错Cannot read property 'echarts' of undefined问题解决由于参考了网上的文章，将china....2020-04-20 20:19:07
1720
0
-
原创 Vue服务端渲染Nuxt.js实例
nuxtjs： https://zh.nuxtjs.org/SSR：server side render1、使用模板新建项目vue init nuxt-community/starter-template <project-name>cnpm installnpm run dev2、配置axioshttps://github.com/nuxt-community/axi...2019-11-15 00:31:09
321
0
-
原创 Vue项目中使用继承复用代码
parent.vue定义了1个方法和2个数据<template> <div class=""> 这是父组件 {{message}} </div></template><script>export default { name: 'Parent', data() { retur...2019-11-14 22:56:43
1039
0
-
原创 Vue项目的预渲染与页面元信息配置
测试环境利用脚手架生成一个vue项目，需要选择 vue-router# 安装 Vue Clicnpm install -g @vue/cli$ vue --version3.12.0# 创建一个项目vue create vue-demo一、预渲染1、安装插件cnpm install prerender-spa-plugin --save2、配置预渲染vue.conf...2019-11-14 22:33:49
205
0
-
原创 Vue子孙三代的三级组件通信
1、首先是一个简单的示例三个文件app.vue # 自定义的业务，调用自己封装的组件child.vuechild.vue # 自己封装的第三方组件plug.vue，便于上层调用plug.vue # 第三方组件，提供v-model数据绑定调用层次结构 app -> child -> plugchild在这里起到一个承上启下的桥梁功能代码...2019-11-05 11:39:01
415
0
-
原创 Vue数据双向绑定.sync 和v-model
结论：.sync 和v-model两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定。v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一.sync修饰符父组件<comp :foo.sync="bar" ></comp>// 等价于, 组件属性名称一致<comp :foo="bar" @update:foot=...2019-11-04 23:40:46
1026
0
-
原创 Vue新窗口打开this.$router
this.$router默认是当前窗口打开代码示例let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } });window.open(routeData.href, '_blank');参考vue中$router.push打开新窗口...2019-10-30 16:20:48
343
0
-
原创 Vue深度作用选择器
1、使用 >>><style scoped>.a >>> .b { }</style>2、使用 /deep/<style lang="scss" scoped>/deep/ .upload-demo{ }</style>参考Vue scoped CSS 与深度作用选择器 /de...2019-10-23 21:01:17
400
0
-
原创 Vue项目通过scrollIntoView实现锚点滚动
实现代码this.$el.querySelector(selector).scrollIntoView();完整代码实现<template> <div class="main"> <!-- 菜单 --> <div class="nav"> <a href="javascript:" @click="goA...2019-10-14 16:06:40
6187
5
-
原创 Egg.js+Vant前后端实例
前后端环境$ node -vv10.16.0前端部分1、项目环境# 创建项目cnpm install -g @vue/clivue create client && cd client# 安装依赖cnpm i vant -S # vantcnpm i babel-plugin-import -Dcnpm i vue-router --save # 路由...2019-10-14 00:28:20
498
0
-
原创 Egg.js快速入门
Egg.js基于Node.js和Koa企业级应用开发框架特性提供基于Egg的定制上层框架的能力高度可扩展的插件机制内置多进程管理基于Koa开发性能优异框架稳定，测试覆盖率搞渐进式开发涉及内容vant uivue-cli3moment.jsEgg.jsmysql前后端联调开发环境Egg.jshttps://eggjs.org/zh-cn/intro/quickst...2019-10-14 00:25:04
262
0
-
原创 Vue重新渲染数据
Vue 不能检测以下数组的变动：1、当你利用索引直接设置一个数组项时2、当你修改数组的长度时3、对象属性的添加或删除来源： https://cn.vuejs.org/v2/guide/list.html代码引入vue<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>通过索引赋值，...2019-10-09 22:56:29
3578
0
-
原创 Vue基于$attrs及$listeners实现隔代通信
所谓隔代通信就是A 与C的通信A -> B -> C代码实例A.vue<template> <div id="app"> <!-- 此处监听了事件，可以在C组件中直接触发 --> <b-child nameToB="nameToB" nameToC="nameToC" @buttonC...2019-09-22 21:53:15
405
0
-
原创 基于Vue实现多标签选择器
实现效果实现代码<html lang="en"><head> <title>Document</title> <!-- 引入本地组件库 --> <link rel="stylesheet" href="static/element-ui/index.css"> <script ...2019-09-22 21:15:06
3865
0
-
原创 Vue：从单页面到工程化项目
Vue模板语法，条件渲染，列表渲染vue-router vuexvue-cli用到的网站：https://cn.vuejs.org/v2/guide/https://cli.vuejs.org/zh/guide/https://www.bootcdn.cn/开发环境1、IDEwebstorm http://www.jetbrains.com/webstormvscode h...2019-07-07 23:53:38
1544
1
-
原创 前端开发：axios在vue中的使用
Aixos1、Aixos特性（1）支持Promise API（2）拦截请求和响应（3）装换请求数据和响应数据（4）取消请求（5）自动转换JSON数据（6）客户端支持防御XSRF2、Axios基础用法get post put等请求方法3、Axios进阶用法实例 配置 拦截器 取消请求4、Axios进一步封装Axios基础用法文档：https://www.npmjs.com...2019-07-30 10:58:22
2309
0
-
原创 前端开发：vant在vue中的使用
1、安装# 安装 Vue Clinpm install -g @vue/cli# 创建一个项目vue create hello-world# 安装vant npm i vant -S# 完整写法：npm install vant --save# 安装插件 npm i babel-plugin-import -D# 完整写法： npm install babel-plugi...2019-07-30 11:04:42
5555
0
-
原创 前端开发：axios在项目中的应用
用到的模块：Vue: https://cn.vuejs.org/v2/guide/Axios: http://www.axios-js.com/zh-cn/docs/vant: https://youzan.github.io/vant/#/zh-CN/intro可参考文章前端开发：axios在vue中的使用前端开发：vant在vue中的使用1、接口配置server/con...2019-08-09 00:23:04
359
0
-
原创 Vue中父组件与子组件之间的通信
prop 父组件向子组件传递数据, 单向绑定$refs 父组件调用子组件里的属性和方法$emit 子组件向父组件传递消息新建项目$ vue create demo$ cd demo$ npm run serve父组件引用子组件components/Child.vue<template> <h2>子组件</h2></templa...2019-08-10 19:13:26
1666
1
-
原创 Bug：Vue路由不跳转而是刷新页面
问题Vue路由不跳转而是刷新页面解决经过同事的仔细观察，发现点击跳转时，路由中多了一个【问号】并刷新页面没有发生跳转，再次点击才生效方式一使用了click.prevent阻止form表单的默认提交事件<button @click.prevent="onSubmit" >登录</button>方式二button默认是submit类型，改成type=“butt...2019-08-20 10:44:03
1648
0
-
原创 前端开发：Vuex的基本使用
Vuex为vue.js应用程序开发的状态管理模式采用集中式存储管理应用的所有组件状态以相应的规则保证以一种可预测的方式发生变化应用场景读取，多个视图依赖于同一个状态修改，不同视图的行为需要改变同一个状态组成部分State 数据仓库getter 获取数据Mutation 修改数据Action 提交mutation安装Vuex1、安装vuex包：npm install vue...2019-08-17 21:55:13
248
0
-
原创 Vue 路由跳转 新窗口打开页面
1、router-link<router-link :to='url' target='_blank></router-link>2、$routerlet router = this.$router.resolve( { path: <yourPath>, query: { 'ticket': '123456' ...2019-08-30 10:44:14
344
0
-
原创 vColorPicker基于 Vue 的颜色选择器插件
主页：http://vue-color-picker.rxshc.com/Github：https://github.com/zuley/vue-color-picker很不错的插件，支持吸管拾取颜色安装$ npm install vcolorpicker -S使用在 main.js 文件中引入插件并注册# main.jsimport vcolorpicker from 'vc...2019-09-06 13:57:38
5828
7
-
原创 Vue:自定义v-model数据双向绑定
示例age 数据单向绑定name 数据双向绑定<template> <div> <h3>单向绑定数据</h3> <p>age: {{ age }}</p> <p>age: <input type="text" :value="age">&l...2019-09-06 15:00:04
305
0
-
原创 CDN方式使用Vue组件通信
代码示例<div id="app"> <child @buttonclick="buttonClick" :title="title">插槽会显示这段内容</child></div><script src="./vue.js"></script><script> // 定义子组件 V...2019-09-20 23:52:15
1100
0
-
原创 CDN方式Vue组件注册
代码示例<div id="app"> <global-child></global-child> <local-child></local-child></div><script src="./vue.js"></script><script> Vue.c...2019-09-21 00:01:48
939
0
-
原创 Vue：简单使用像引用jQuery一样引用Vue
代码示例<html><head><!-- 引用jQuery --><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><!-- 引用Vue --><script src="https://cdn.bootcss....2019-06-19 21:30:34
600
0