Vue.js

2020你应该有一个自己的组件

由 自作多情 提交于 2021-02-16 06:03:50
公众号：前端微服务 GitHub：https://github.com/yongbolu 作 者：子奕 一、概述 组件化是长期开发过程中一个提炼精华的过程，目的主要是提高复用性、解耦、提升开发效率。本次主要以Vue.js为例来讲解前端组件开发的注意事项，并且带领大家封装自己的组件并发布到npm。 二、环境 window10 x64 node v10.16.3 npm v6.13.4 yarn 三、什么叫做组件化 Vue.js 有两大特性，一个是数据驱动，另一个就是组件化。接下来我就针对这两个问题一一解答，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。 四、如何进行组件化开发 Vue.js 提供了 2 种组件的注册方式，全局注册和局部注册。 4.1 全局注册 在vue.js中我们可以使用 Vue.component(tagName,options) 进行全局注册。 例如: Vue.component('my-component', { // 选项 }) 4.2 局部注册 Vue.js 也同样支持局部注册，我们可以在一个组件内部使用 components 选项做组件的局部注册。

解决vue修改路由的查询字符串（query）url不改变，页面不刷新问题

由 ≡放荡痞女 提交于 2021-02-16 00:21:10
解决vue修改路由的查询字符串（query）url不改变，页面不刷新问题 参考文章： （1）解决vue修改路由的查询字符串（query）url不改变，页面不刷新问题 （2）https://www.cnblogs.com/shuen/p/10929837.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4428122/blog/4953056

【vue开发问题-解决方法】（三）axios拦截器，post请求问题处理，异步请求封装

由 无人久伴 提交于 2021-02-15 12:17:23
【vue开发问题-解决方法】（三）axios拦截器，post请求问题处理，异步请求封装 参考文章： （1）【vue开发问题-解决方法】（三）axios拦截器，post请求问题处理，异步请求封装 （2）https://www.cnblogs.com/qiuyueding/p/9167689.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/stackoom/blog/4750913

spring boot mybatis+ vue 使用POI实现从Excel中批量导入数据

由 穿精又带淫゛_ 提交于 2021-02-15 09:50:17
一、前端vue+element 　　1.前端使用element的upload组件来实现文件的上传 　　　　　　　　　　<el- upload style ="display: inline-flex;margin-right: 8px" :show -file-list="false" :before -upload="beforeUpload" :on -success="onSuccess" :on -error="onError" accept =".xls" :disabled ="importDataButtonDisabled" action ="/employee/basic/import"> <el-button :disabled="importDataButtonDisabled" type="success" size="small" :icon="importDataButtonIcon"> {{importDataButtonMsg}} </el-button> </el-upload> 　　　　 show-file-list :是否显示已选择文件列表 　　　　 before-upload ：文件上传以前调用的钩子 　　　　on-error:文件上传失败后的钩子 　　　　on-success:文件上传成功后的钩子 　　　　accept:接受的文件类型 　　

File input on change in vue.js

由 你说的曾经没有我的故事 提交于 2021-02-15 08:20:51
问题 Using plain HTML/JS, it is possible to view the JavaScript File objects of selected files for an input element like so: <input type="file" id="input" multiple onchange="handleFiles(this.files)"> However, when converting it to the 'Vue' way it doesn't seem to work as intend and simply returns undefined instead of returning an Array of File objects. This is how it looks in my Vue template: <input type="file" id="file" class="custom-file-input" v-on:change="previewFiles(this.files)" multiple>

File input on change in vue.js

由 微笑、不失礼 提交于 2021-02-15 08:20:39
问题 Using plain HTML/JS, it is possible to view the JavaScript File objects of selected files for an input element like so: <input type="file" id="input" multiple onchange="handleFiles(this.files)"> However, when converting it to the 'Vue' way it doesn't seem to work as intend and simply returns undefined instead of returning an Array of File objects. This is how it looks in my Vue template: <input type="file" id="file" class="custom-file-input" v-on:change="previewFiles(this.files)" multiple>

更多的 JavaScript 控制台功能

由 爷，独闯天下 提交于 2021-02-15 06:29:00
每日前端夜话 第296篇 翻译： 疯狂的技术宅 作者：Preston Lamb 来源：prestonlamb.com 正文共：2407 字 预计阅读时间：7 分钟 你可能在 JavaScript 项目中用了console.log。这是一种查看变量值或程序运行中发生的事情的便捷方法。但是 JavaScript console 对象还有许多其他的功能，可以在处理项目时提供帮助。本文将会介绍一些我的最爱，希望你在工作时记得使用它们！ 请注意，此处的例子适用于在浏览器中运行的 JavaScript。这与在 Node.js 中运行的 JavaScript 相似，但是在 Node.js 中的行为可能略有不同。 console.log 在进入其他选项之前，让我们先回顾一下 console.log 的功能。 console.log 将消息输出到控制台。你可以输入一个对象、一个数组、一个对象数组、一个字符串、一个布尔值，基本上你想要打印到控制台的任何内容都可以。这是使用 console.log 及其输出的例子： 1 console .log({ restaurantName : 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' }; 这是 JavaScript 中最常用的调试方法，也是最常用的控制台方法。现在让我们来谈谈其他的一些选择！

this.$refs[(“p” + index)].focus is not a function

由 左心房为你撑大大i 提交于 2021-02-15 06:18:24
问题 I'd like to turn a div into input box on click, so that the post (which is rendered inside a loop) can be edited. Here is the button on the post: <a @click="setFocusEdit(index)" v-if="isAuthor(post)" href="#" >Edit Me</a> And the div concerned: <div :ref="'p' + index" class="post-description"> {{post.description}} </div> The method: setFocusEdit(index) { console.log('focusing on', index); this.$refs['p' + index].focus(); }, But I get this error: Uncaught TypeError: this.$refs[("p" + index)]

this.$refs[(“p” + index)].focus is not a function

由 ぐ巨炮叔叔 提交于 2021-02-15 06:18:20
问题 I'd like to turn a div into input box on click, so that the post (which is rendered inside a loop) can be edited. Here is the button on the post: <a @click="setFocusEdit(index)" v-if="isAuthor(post)" href="#" >Edit Me</a> And the div concerned: <div :ref="'p' + index" class="post-description"> {{post.description}} </div> The method: setFocusEdit(index) { console.log('focusing on', index); this.$refs['p' + index].focus(); }, But I get this error: Uncaught TypeError: this.$refs[("p" + index)]

vue和微信小程序的区别、比较

由 淺唱寂寞╮ 提交于 2021-02-15 02:26:08
链接：https://segmentfault.com/a/1190000015684864 一、生命周期 先贴两张图： vue生命周期 小程序生命周期 相比之下， 小程序 的钩子函数要简单得多。 vue 的钩子函数在跳转新页面时，钩子函数都会触发，但是 小程序 的钩子函数，页面不同的跳转方式，触发的钩子并不一样。 onLoad : 页面加载 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。 onShow : 页面显示 每次打开页面都会调用一次。 onReady : 页面初次渲染完成 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 对界面的设置如 wx.setNavigationBarTitle 请在 onReady 之后设置。详见生命周期 onHide : 页面隐藏 当 navigateTo 或底部tab切换时调用。 onUnload : 页面卸载 当 redirectTo 或 navigateBack 的时候调用。 数据请求 在页面加载请求数据时，两者钩子的使用有些类似， vue 一般会在 created 或者 mounted 中请求数据，而在 小程序 ，会在 onLoad 或者 onShow 中请求数据。 二、数据绑定 VUE :vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：，例： <
订阅 Vue.js