vue的ui组件库很多种，但是这么多的组件库也不能满足我们的开发需求，所以需要我们根据自己需求自己写一个插件，下文我通过两个栗子给大家介绍js自定义组件的方法，感兴趣的朋友一起看看吧现在基于vue的UI组件库有很多，比如iview，element-ui等。但有时候这些组件库满足不了我们的开发需求，这时候我们就需要自己写一个插件。举第一个栗子用vue-cli搭建好项目目录之后，在src/components下面新建一个文件夹放我们要写的插件，如图...
这次给大家带来Vue导出excel表格实例详解，Vue导出excel表格的注意事项有哪些，下面就是实战案例，一起来看一下。引言：最近使用vue在做一个后台系统，技术栈 vue + iView ，在页面中生成表格后， iView可以实现表格的导出，不过只能导出csv格式的，并不适合项目需求。如果想要导出Excel在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.jsnpm install -S file-saver 用来生成文件的web应用程序npm install -S xlsx 电...
在文章使用vue-router完成简单导航功能 中实现的路由导航功能是不能传递参数的，也就是说是静态路由。而能传递参数的路由模式，由于可以传递参数，所以其对应的路由数量是不确定的，故称之为 动态路由。那么如何将参数作为路由呢？在参数名前面加上 : ，然后将参数写在路由的 path 内如下示例： routes: [ //将页面组件与path指令的路由关联{ name: BookInfo, path: /books/:id, component: BookInfo }]这样定义之后，vue-rout...
本文主要和大家介绍了vue路由懒加载的实现方法，我们可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。希望能帮助到大家。component可以是一个箭头函数，我们可以使用动态 import语法来定义代码分块点；如果想在network里面看到动态加载的组件名字，可以加webpackChunkName；同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName代码// router里面的index.js import ...
本文主要和大家分享Vuejs搜索匹配功能实例，最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。 大概长这个样子：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue测试2</title> <script type="text/javascript" src="js/vue.min.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; font-size: 14px; font-family: "微软雅黑...
本文主要和大家分享vue-router源码阅读学习，如同分析vuex源码我们首先通过一个简单例子进行了解vue-router是如何使用的，然后在分析在源码中是如何实现的，希望能帮助到大家。示例下面示例来自于example/basica/app.js import Vue from vue import VueRouter from vue-routerVue.use(VueRouter)const Home = { template: <div>home</div> } const Foo = { template: <div>foo</div> } const Bar = { template: <div>ba...
前后端分离，后端提供了接口。但有一部分数据，比较产品说明文件，是存在其他的服务器上的。所以，在页面显示的时候，如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。本文主要和大家介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。不同以往的IFRAME标签，那种方式比较Low，另外有其他的一些BUG。本文思路是把HTM...
本文主要和大家介绍vue router 动态路由和嵌套路由，详细的介绍了动态路由和嵌套路由的使用方法，有兴趣的可以了解一下，希望能帮助到大家。首先介绍一下动态路由。动态路由按照我的理解，就是说能够进行页面的跳转，比如说：下面的这个页面中：<template> <p id="app"> <header> <router-link to="/">/</router-link> <router-link to="/hello">/hello</router-link> <router-link to="/cc">/cc</router-link> </header> <router-...
使用场景当需要进行vuex进行数据状态管理的时候，会使用到mapGetters,mapState,还有自身的计算属性的时候，这个时候就会用到这个了！本文主要和大家介绍vuex中使用对象展开运算符的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。1.首先需要安装npm install babel-plugin-transform-object-rest-spread -D2.需要在.babelrc文件中新增以下{"presets": [["env", { "modules"...
本文主要介绍了vue-cli中的webpack配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。版本号vue-cli 2.8.1 (终端通过vue -V 可查看)vue 2.2.2webpack 2.2.1目录结构├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── w...
当需要进行vuex进行数据状态管理的时候，会使用到mapGetters,mapState,还有自身的计算属性的时候，这个时候就会用到这个了！本文主要和大家介绍vuex中使用对象展开运算符的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。1.首先需要安装npm install babel-plugin-transform-object-rest-spread -D2.需要在.babelrc文件中新增以下{"presets": [["env", { "modules": false ...
很多时候Web在运行时要更改元素的CSS类名。但是在改变类名时，有时最好是有条件地应用样式。例如你有一个翻页的效果。翻页效果通常有一个高亮的效果，用于向用户显示当前页，这对于用户而言是很有帮助的。该项目的样式是有条件设置的，基于当前正在查看的页面。本文主要介绍在Vue中有条件地使用CSS类，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。翻页常见的一个效果看起来像...
本文主要和大家介绍Vue shopCart 组件开发详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。一、shopCart组件(1) goods 父组件和 子组件 shopCart 传参deliveryPrice:{ // 单价 从json seller 对象数据中获取type:Number,default:0 }, minPrice:{ // 最低起送价 从json seller 对象数据中获取type:Number,default:20 }其中 deliveryPrice 和 minPrice 的数据都是从 data.json...
本文主要介绍了从Vue.js源码看异步更新DOM策略及nextTick，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助大家更好理解Vue.js异步。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。 文章的原地址：https://github.com/answershuto/learnVue。 在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/...
本文主要给大家通过代码实例分析了vue.js数据传递以及数据分发slot的相关知识，有这方面兴趣的朋友参考下吧，希望能帮助到大家。一、组件间的数据传递1.父组件获取子组件的数据 *子组件把自己的数据，发送到父级*vm.$emit(事件名,数据);*v-on: @示例用法：当点击send按钮的时候，“111”变成“我是子组件的数据”<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>父级获取子级的数据</title><script src="...