Vue
Vue
Simple-395
简单就好
展开
-
Axios/POST/Spring MVC使用示例
背景:Ajax的Post比较特殊,每次使用都要费尽周折,现将几种方法进行整理。原创 2021-07-29 16:25:50 · 474 阅读 · 0 评论 -
VS Code配置F5一键运行Vue应用(npm run serve)
VsCode能否一键运行程序?比如按下F5,直接运行npm run serve;答案是可以!!!请往下看。原创 2021-01-10 10:21:40 · 9772 阅读 · 2 评论 -
VUE主流UI框架
以下主要介绍三个框架,分别是Element-UI,Bootstrap-Vue,Vuetify。Element-UIhttps://element.eleme.io/https://github.com/ElemeFE/element国内人用的较多。但是,近两年迭代频率越来越低了,有图为证。Bootstrap-Vuehttps://bootstrap-vue.org/https://github.com/bootstrap-vue/bootstrap-vueBootstrap有些后知后觉,原创 2020-11-06 10:10:04 · 1654 阅读 · 0 评论 -
vue/cli
安装npm install -g @vue/cli原创 2020-09-26 12:15:15 · 140 阅读 · 0 评论 -
一个简单的Vue页面(单页面应用)
大多人使用webpack, element-ui等等组件打包了一个庞大的项目,但却忘记了Vue原本的样子,其实Vue本来可以很简单。以下就是一个简单的Vue页面。原创 2020-03-31 12:30:53 · 6814 阅读 · 4 评论 -
Vue Ajax配置(基于axios)
如果你需要在特定的响应码下做特殊处理,可以定义自己的拦截器,方法如下:第一步,标记异步请求(很重要!);第二步,配置请求拦截器 ;第三步,配置响应拦截器;原创 2020-03-26 09:19:17 · 464 阅读 · 0 评论 -
Vue自动翻页插件简易教程(vue-infinite-loading)
在上面的脚本中,我们使用了HN Search API和axios来获取新闻数据。如果API返回一个有非空数组,我们把它直接放入list,同时记录当前页码,通过$state.loaded方法告诉插件我们得到了一些数据。如果服务端接口返回了一个空数组,我们通过$state.complete方法告诉插件所有的数据都被加载了。原创 2019-12-17 16:14:38 · 1504 阅读 · 0 评论 -
Vue事件传递问题(stop、self、once)
oncepreventstopcaptureselfpassive原创 2019-09-26 16:04:56 · 643 阅读 · 0 评论 -
一个简单的vue双向绑定功能演示页面(附图)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>测试页</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head>&l...原创 2019-09-04 11:35:30 · 355 阅读 · 0 评论 -
一步步教你搭建一个完整的前端项目(基于vue 2、vuex、mint-ui 2、webpack 3、axios)
准备工作需要先安装node环境,官方地址:https://nodejs.org开始搭建Windows下不要使用git自带的mintty执行命令,切换选项时会失效的。觉得cmd难看的话用PowerShell会好一些,只是好一些,呵呵。安装vue:npm install vue && npm install --global vue-cli生成项目结构,安装依赖:vue...原创 2019-09-04 11:09:02 · 1060 阅读 · 0 评论 -
Vue常见问题汇总(持续更新。。。)
1、属性赋值不生效问题Vue.set(obj, 'title', 'Hello')原创 2019-09-03 17:59:46 · 424 阅读 · 0 评论 -
使用Webpack构建SPA模式的多页面应用(基于Vue 2)
背景Webpack构建后生成的包实在太大了,特别是大型项目,编译后得到一个庞然大物真是个恶梦。那么问题来了,有解决办法吗?当然,我们可以指定一组文件(组件)生成到一个或者多个目录中去。上代码。指定组件目录编辑webpack.base.conf.js文件,配置entry及output,代码如下:module.exports = { entry: { 'common': './...原创 2018-12-09 23:45:04 · 547 阅读 · 0 评论 -
Vue的props和$attrs用法
当然这个$attrs是vue2.4才推出的,为了简化父组件和孙组件的传值:&amp;lt;child-2 v-bind=”$attrs”/&amp;gt;真的是相当方便!注:不可滥用,如果是明确的属性还是要声明的,否则代码会越来越难维护。...原创 2018-12-08 22:53:55 · 3282 阅读 · 0 评论 -
WebStorm热部署失效问题修复
其实并不是真的失效,只是说启用了“安全模式”。只需要关闭以下选项即可!原创 2018-12-05 18:19:16 · 2597 阅读 · 0 评论 -
VueJS极简教程之十:事件处理(event)
VueJS之事件处理原创 2018-11-27 07:14:41 · 232 阅读 · 0 评论 -
VueJS极简教程之九:渲染函数(jsx)
VueJS之渲染函数原创 2018-11-26 09:43:34 · 1312 阅读 · 1 评论 -
Vue中最为灵活的组件间通信机制(eventBus)
安装与配置,使用方法;监听事件和清除监听。原创 2018-12-10 07:48:38 · 459 阅读 · 0 评论 -
VueJS极简教程之三:组件间通信
以下先列举出来各个方式,后续会逐一补充代码。属性传值最常见的传值方式,可一旦组件嵌套加深,些种方式便显示特别繁琐。适用场景:待完善方法回调安全,数据不易被篡改,但使用越来较为麻烦。适用场景:待完善钩子父组件通过向子组件传入方法钩子,子组件可以直接调用父组件的方法。适用场景:待完善通过refs直接调用在子组件引用时通过ref属性定义一个“对象名”,在需要用过的地方可以直接使用t...原创 2018-11-26 09:20:43 · 200 阅读 · 0 评论 -
前端项目调试模式下在控制台打印代理日志(重定向日志)的方法
背景以下演示在微服务架构下的前后端分离模式,在本地调试时如何启用代理日志:这里插入一个话题:为什么要代理?因为这种模式下存在跨域问题,虽然webpack可以很方便的为我们提供代理支持,但默认情况下并没有启用代理日志。那该如何开启呢?请往下看!示例1、打开并编辑以下文件:/config/index.jsproxyTable: { '/userApi': { target: ...原创 2019-06-09 21:03:15 · 10694 阅读 · 3 评论 -
Vue的接口调用是vue-resources还是axios?
1、vue-resources官方已经不推荐使用了,还是用`axios`吧。2、axios是一种Promise实现,这就意味着你可以使用await关键字实现同步调用。原创 2018-12-08 23:00:00 · 1358 阅读 · 1 评论 -
一步步教你搭建一个完整的前端项目(基于vue 2、vuex、element-ui 2、webpack 3、axios)
需要先安装node环境,官方地址:https://nodejs.org;Windows下不要使用git自带的mintty执行命令,切换选项时会失效的。觉得cmd难看的话用PowerShell会好一些,只是好一些,呵呵。原创 2018-12-05 18:14:44 · 1560 阅读 · 0 评论 -
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题(附图)
背景不多介绍了,直接上代码。打开.eslintrc.js,将rules节点中添加以下配置项。rules: { 'vue/script-indent': ['error', 2, {'baseIndent': 1}]}其中第1个2是指统一缩进2个空格,第2个1是指1倍缩进。...原创 2018-12-08 21:58:26 · 7379 阅读 · 4 评论 -
VueJS极简教程之一:初步
是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。特点ES6简洁语法支持dev、test、build两种环境...原创 2018-11-26 09:02:31 · 254 阅读 · 0 评论 -
VueJS极简教程之二:页面渲染
v-for,v-html,v-model&amp;amp;lt;dd v-for=&amp;quot;item in items&amp;quot;&amp;amp;gt; &amp;amp;lt;input type=&amp;quot;checkbox&amp;quot; v-model=&amp;quot;item.status&amp;quot;/原创 2018-11-26 09:04:31 · 424 阅读 · 0 评论 -
VueJS极简教程之四:过滤器(filter)
主要用于格式化数据使用,以下我们来详细介绍。Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:&amp;lt;!-- 在双花括号中 --&amp;gt;{{ message | capitalize }}&amp;lt;!--...原创 2018-11-26 09:29:22 · 620 阅读 · 0 评论 -
VueJS极简教程之五:计算属性(computed)
VueJS的computed关键字主要用于定义一些 以下我们来着重介绍computed关键字的使用方法。定义方式computed: { now: function () { return Date.now() }}引用方式&amp;amp;lt;span&amp;amp;gt;{{now}}&amp;amp;lt;/span&amp;amp;gt;...原创 2018-11-26 09:35:16 · 373 阅读 · 0 评论 -
VueJS极简教程之六:监听器(watch)
VueJS的watch关键字主要用于定义一些主动监听其他数据变化的逻辑,以下我们来着重介绍它的使用方法。应用场景定义方法watch: { // 如果 `question` 发生改变,这个函数就会运行 question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop ty...原创 2018-11-26 09:38:31 · 1410 阅读 · 0 评论 -
VueJS入门教程之七:自定义指令(detective)
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:原创 2018-11-26 09:42:20 · 786 阅读 · 0 评论 -
VueJS极简教程之八:状态管理(vuex)
VueX原创 2018-11-26 09:42:39 · 257 阅读 · 0 评论 -
Vue组件强制刷新(重新渲染)的四种方案对比
Vue的双向绑定用着确实方便,但自动档虽好,手动档也不是一无是处;在特定的情况下,还真的要手工触发“刷新”操作,目前有四种方案可以选择:原创 2019-05-21 11:48:34 · 60131 阅读 · 39 评论