Vue学习经验分享
Vue学习经验分享
小猿猪哥
这个作者很懒,什么都没留下…
展开
-
export async/await 的实践
之前在使用axios的时候都是封装成async/await的形式去调用,《react axios的使用 封装async/await》《vue 开发axios的封装async/await》。下面的代码和上面的息息相关。需求现在遇见这个一个问题,就是有一个接口需要在很多和页面调用,涉及到多人开发,不可能每个人的页面都去写一次,那么这里就需要再次的封装一下了。封装新建一个testRequ...原创 2019-12-24 11:38:04 · 10833 阅读 · 0 评论 -
vue 开发axios的封装async/await
难得的这周事情少,不要给领导看见了啊。嘿嘿 这段时间计划把一个之前的PC项目avalon + gulp的框架重构为vue + element-ui。没有用vuex,我觉得这个东西目前还用不到。 目前只是在做一些基本工作。其中最重要的就是网络请求部分了。今天就上班时间,记录下我的昨天封装的。和之前使用axios算是改变了。项目基本目录结构 项目目录结构基本就是这样的,其实就是vue-c...原创 2018-07-11 10:03:56 · 14772 阅读 · 2 评论 -
vue 微信公众号开发
vue 微信公众号开发开题上个月初入职了一家新公司。来了新公司很忙。本来计划是在上个月底写一篇博客的,写一下关于新公司的事情。 几度思考之后还是没写。也许做程序员接手别人的项目,都会说别人的项目多么的坑吧。但是我接手的这个两个 不是我一个人说坑。各种非人道的东西就不一一说了。整体开发效率降低。前几天前端来了一个同事,所以才有时间写这些。正题 – vue 微信公众号开发...原创 2018-06-28 16:49:05 · 20374 阅读 · 1 评论 -
vue之watch的用法
最近在做一个H5的项目。 需求是当用户在输入完了手机号和验证码之后,登录按钮才可以点击。 在没有使用vue之前,我们可能是通过input的change事件来判断,用户是否输入了内容,然后修改按钮的状态。现在有了vue,就省事了很多,我们只需要在watch中,监听数据模型的值改变即可。<div id="app" class="login_area"> <div c...原创 2018-03-28 14:16:19 · 21409 阅读 · 2 评论 -
Vuex(六)--Vue核心概念Module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。const moduleA = { state: { ... },原创 2017-10-26 15:12:57 · 2121 阅读 · 1 评论 -
Vuex(五)--Vue核心概念Action
Action 类似于 mutation,不同在于: - Action 提交的是 mutation,而不是直接变更状态。 - Action 可以包含任意异步操作。 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getter原创 2017-10-25 14:19:59 · 2748 阅读 · 0 评论 -
Vuex(四)--Vue核心概念Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。mutation 必须是同步函数。不带载荷接前面几篇文章的例子,这里我们修改商品价格原创 2017-10-25 09:33:34 · 2487 阅读 · 0 评论 -
Vuex(三)--Vue核心概念Getter
在上一篇《Vuex(二)–Vue核心概念State》,我们介绍了State。 有时候我们需要从 store 中的 state 中派生出一些状态。 如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。 Vuex 允许我们在 store 中定义getter(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返原创 2017-10-24 10:38:22 · 2430 阅读 · 0 评论 -
Vuex(二)--Vue核心概念State
在上一篇《Vuex(一)–为什么要使用Vuex》。简单的介绍了为什么要使用Vuex,通过一个反例来证明的。 现在在上一篇的基础上使用Vuex中的State,一个正面例子来证实,同时也介绍一下Vue核心概念State。 Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单原创 2017-10-24 10:00:28 · 2740 阅读 · 0 评论 -
Vuex(一)--为什么要使用Vuex
关于Vuex,可以看看官方文档-《Vuex 是什么?》。文档里面其实也说了为什么要使用Vuex。问题其实我们在工作中也经常遇见这种情况:一份数据需要在多个页面共享操作,同时保证同步。 开发过原生iOS的就知道,页面有生命周期-UIViewController的生命周期及iOS程序执行顺序,我们只需要把这份数据做成单例或者本地数据即可,数据同步就在页面生命周期函数里面处理就行。但是H5的前端应用似乎原创 2017-10-23 17:05:52 · 12433 阅读 · 3 评论 -
Nginx部署静态网页(2017.11.17添加https)
之前这《vue新建项目(四)项目部署》介绍了在使用IIS不是Vue项目。现在服务器换成了Linux+Nginx的了。现在又要部署一次了这次。Nginx的部署也不难。步骤新建.conf配置文件/etc/nginx/sites-enabledtouch manage.conf编辑配置文件vim manage.conf粘贴进如下代码server { listen 80;原创 2017-08-04 09:54:50 · 5600 阅读 · 0 评论 -
vue新建项目(四)项目部署
项目预览地址http://manage.hgdqdev.cn/。这里我已经写了一些页面。项目目录github: https://github.com/zhuming3834/manage本地开发// 开启服务器,浏览器访问 http://localhost:8080npm run dev构建生产// 执行构建命令,生成的dist文件夹放在服务器下即可访问npm run build## 目录结构原创 2017-05-27 10:40:56 · 2875 阅读 · 0 评论 -
vue新建项目(三)构建单页应用(SPA)
在前面的两篇《vue新建项目(一)vue-cli新建模板项目》 和 《vue新建项目(二)安装element-ui》 中,我们已经新建一个vue项目且安装了一套UI,但是这个只是一个页面,那么怎么新建一个单页应用(SPA)呢。 这里我们需要做一点改造。 步骤: 1.在src/components 下面新建一个目录common ,并且在这个目录里面新建一个.vue文件:Home.vue 2.在原创 2017-05-27 10:08:18 · 4492 阅读 · 0 评论 -
vue新建项目(二)安装element-ui
步骤1.在package.json 的 dependencies 字段下面增加 "element-ui": "^1.3.4" 这里的1.3.4是需要安装的那个版本。 element-ui官网。 2.cd 项目目录 3.npm install 4. 看到如下结果 manage@1.0.0 /Users/xhdx/Desktop/pname └─┬ element-ui@1.3.4原创 2017-05-27 09:12:58 · 17018 阅读 · 0 评论 -
vue新建项目(一)vue-cli新建模板项目
准备在使用vue-cli新建项目前。请确保你已经安装了Node.js,vue和vue-cli。步骤:cd 目录(你要把项目放在哪个目录);vue init webpack pname(你的项目名字);? Project description (A Vue.js project) vue-cli新建项目(项目描述);? Author (xhdx <zhuming3834@sina.com>)原创 2017-05-27 08:55:01 · 24065 阅读 · 2 评论 -
vue-resource请求本地json文件
在平时项目开发中,有时后台接口跟不上前台开发的进度时,需要我们自己写先写本地的json文件,这样我们可以把静态界面和逻辑一起调试了,等后台来了接口,替换请求地址即可。但是在vue的项目中,网路请求不是ajax而是vue-resource了。但是现在vue,推荐使用vue-axios。 那么请求本地json文件,请求路径怎么写呢? 项目结构: json文件在static目录下面。 项目下载原创 2017-05-24 10:14:38 · 12839 阅读 · 5 评论 -
vue加载自定义的js文件
在做项目中需要自定义弹出框。就自己写了一个。效果图遇见的问题怎么加载自定义的js文件 vue-插件这必须要看。然后就是自己写了。export default{ install(Vue){ var tpl; // 弹出框 Vue.prototype.showAlter = (title,msg) =>{ var alte原创 2017-04-21 16:55:11 · 9442 阅读 · 2 评论 -
vue中v-model动态生成
最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的。那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>原创 2017-04-14 11:11:03 · 24894 阅读 · 3 评论