本文主要介绍了Vue 中批量下载文件并打包的示例代码，用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件，有兴趣的可以了解一下，希望能帮助到大家。思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件1. 准备工作安装 3 个依赖: axios, jszip, file-saveryarn add axios yarn add jszip yarn add file-saver2. 下载文件import axios from axios const getFile = url => {return...
这篇文章主要介绍了JS库中的Particles.js在vue上的运用案例分析,需要的朋友可以参考下知乎的首页后面的粒子动效总觉得很炫酷，搜了一下，发现是用particles.js编写的。刚好目前的项目是利用vue框架的，两个凑在一起学了。讲道理，这个用得好的话，页面是可以很酷的，譬如我现在写的项目酷酷的登录页嘻嘻~安装particles.jsnpm install --save particles.js配置particles.js1.data这个data是用于控制粒子在页面中所呈现的状态。{ "pa...
前言组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。组件开发的基础组件可以扩展 HTML 元素，封装可重用的代码。我理解为功能模块的模板吧。对于vue来说，组件是这个样子的，我们在html里面写<div id="example"><my-component></my-component> </d...
vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。这种方式下一个组件生成一个js文件 用例： { path: /promisedemo, name: PromiseDemo, component: resolve => require([../components/PromiseDemo], resolve) }es提案的import() (推荐)webpack官方文档：webpack中使用import() vue官方文档：路由懒加载(使用import()) 用例： // 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。 const Imp...
安装clipboard.jsgithub路径:https://github.com/zenorocha/clipboard.js安装：npm install clipboard --save 引入clipboard.js import ClipboardJS from "clipboard";或 <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>使用：剪切 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device...
一、函数式组件和普通组件的区别 渲染快没有实例，意味着没有（this）没有生命周期（没有响应式数据）二、组件函数的使用1.以局部组件为例，将组件标记为functional=ture; 因为函数式没有实例，因此组件需要的一切都是通过context参数传递，它是一个包括如下字段的对象： props：提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数，返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象...
前言兄弟组件的信息传递有三种方式： 1.vuex 传递。 会将信息公有化。 此方法可在所有组件间传递数据。 2.建立Vue 实例模块传递数据。 Vue 实例模块会成为共用的事件触发器。 其通过事件传递的信息不回被公有化。 3.建立事件链传递数据。 一个兄弟组件通过事件将信息传给兄弟组件共有的父组件。 父组件再将信息通过属性传递给另一个兄弟组件。 若兄弟组件不是亲兄弟，而是堂兄弟，也就是他们有一个共同的爷爷，那么此方法会使程序变...
FormData 对象的使用：1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString2. 异步上传二进制文件。（ps：说白了就是不使用form表单实现form表单提交数据或文件，如果还是不懂，请自行百度）实现过程1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式)2.修改input框的默认样式3.通过选择文件拿到数据4.请求接口以上就是本次关于vue中实现上传文件给后台的...
今天主要记录 vue中命名视图的用法 先奉上官网网址：https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下，一个页面里面可能有多个组件，比如侧边栏，内容区，侧边栏是一个组件、内容区是一个组件，我们普遍会将两个组件作为子组件添加到主页面中，因为页面中只有一个 router-view视图，那么问题来了，怎么让一个页面中有多个视图呢，拥有多个视图，很随意，多写几个router-view标签就行了，但是每个route...
v-cloak 当用户频繁刷新页面或网速慢时，页面未完成 Vue.js 的加载时，导致 Vue 来不及渲染，这就会导致在浏览器中直接暴露插值(表达式)，Vue由此也给出了解决方法。在指定标签或整个父容器加入v-cloak指令，通过css选择器选中v-cloak，隐藏元素即可。 // html <div v-cloak id="app"><span>{{ msg }}</span> </div> // css [v-cloak]{display:"none"; } // vue实例对象 => vm var vm = new Vue({el:#app,data:{msg:"hello world",...
1、foreachforeach循环对不能使用return来停止循环search(keyword){var newList = []this.urls.forEach(item =>{if(item.name.indexOf(keyword) != -1){newList.push(item)}})return newList}2、filteritem对象就是遍历数组中的一个元素，includes是es6中的新方法，在search方法中直接返回新数组search(keyword){return this.urls.filter(item =>{if(item.name.includes(keyword)){return item}})} 3、findIndex返回true后index就可...
Vue中util的工具函数，下面通过实例代码给大家介绍的非常详细，具体代码如下所示： // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => {fn.apply(context, args) }, wait) } } function flatten (arr) { // 数组扁平化 return arr.reduce((result, item) => { return result.concat(Array.isArray(item) ? flatten(item) : ...
订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学，可以把他类比于 watch 下面我们看一个例子 var observe={fnsObj:{},// 订阅方法on:function(key,fn){if(!observe.fnsObj[key]){observe.fnsObj[key] = []}observe.fnsObj[key].push(fn...
父组件向子组件通信 业务场景：现在我要在父组件点击一个回退按钮，这个回退会传进子组件中（子组件中有两步进程），子组件来处理。 解决方案 起初我是父组件通过props传值，但是发现只有组件第一次加载时才能传值，通过事件改变的父组件值并不会再通过过props传递，也就是说props只有加载组件时才会工作，并不会根据值改变动态操作 后面，我是通过操作dom的方法，this.$refs.children这样直接操作子组件 <ProgressTwo ref="progre...
$root vue状态管理使用vuex,如果项目不大，逻辑不多，name我们没必要用vuex给项目增加难度，只需要用$root设置vue实例的data就行了，如下 main.js new Vue({data(){return{loading:true}},router,store,render: h => h(App) }).$mount(#app)a.vue created(){ console.log(this.$root.loading) //获取loading的值 }b.vue created(){ this.$root.loading = false; //设置loading的属性 }$parent parent能够访问父组件的属性和方法 pa...