用vue构建项目笔记5(在vue-cli项目中引用公用方法)(vue resource统一处理)
来源:互联网 发布:咕咕收音机mac版 编辑:程序博客网 时间:2024/05/18 07:52
之前用cli脚手架构建的项目废了,又让我改成jq了,悲剧,这次这个项目用纯vue实现了,哈哈。下面介绍如何引入全局方法供每个组件都能调用。
1.创建一个js文件,我起的名字叫做“common.js”,放在assets>js下。
2.在common.js文件中写入公用方法
export default{ install(Vue,options){ Vue.prototype.url= "http://www.baidu.com/" //可以自定义变量 Vue.prototype.myFun = function (ev) { //给自定义方法起个名 ev + 1; return ev; } Vue.http.interceptors.push(function ( request, next ) { //附赠一个可以控制页面所有路由开始之前结束之后的方法 // 请求发送前的处理逻辑//console.log(request)//console.log(next) next(function (response) { // 请求发送后的处理逻辑 // 更具请求的状态, response参数会返回给 successCallback或errorCallback//console.log(response.data.result)if(response.data.result == undefined){this.$router.push('/')}// return response }); }); }}上面由三部组成,一个自定义变量,一个自定义方法,一个可以控制页面所有路由开始前和结束后的方法,我写的是如果路由后状态值为空跳到主页。
3.在main.js中引入公用js (这里我遇到一个坑,common.js中如果有resource,必须要注意main,js中的书写顺序,如果不先调用resource,common.js中关于ajax调用会找不到方法)
import common from './assets/js/common.js'Vue.use(common);4.在组件中只用公用方法
同在methods中定义的方法一致,使用this.myFun(1)调用方法,调用变量为this.url。
注意,变量名称最好不要重名,这是一个好习惯。方法如果尝试ES6写法可能会报错,悠着点。
阅读全文
0 0
- 用vue构建项目笔记5(在vue-cli项目中引用公用方法)(vue resource统一处理)
- 用vue构建项目笔记6(在vue中使用vue resource)
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- vue-cli构建vue项目
- 用vue-cli构建vue项目
- vue-cli构建项目
- vue-cli构建项目
- 用vue构建项目笔记7(在vue中引用公共过滤器filter)
- 笔记:cli脚手架构建vue项目步骤
- vue-cli快速构建Vue项目
- Vue.js脚手架vue-cli构建项目
- vue-cli构建vue项目步骤
- 利用 vue-cli 构建一个 Vue 项目
- 脚手架vue-cli构建vue项目
- file.encoding详解
- tomcat服务器设置文件下载
- 10个最佳Es6 特性
- 探秘Java中的String、StringBuilder以及StringBuffer
- 《Java NIO文档》非阻塞式服务器
- 用vue构建项目笔记5(在vue-cli项目中引用公用方法)(vue resource统一处理)
- git常用命令
- 2---C语言|笔记【对C语言指针的初步理解】
- 进程与线程-通俗易懂的解释
- 机器学习入门资料
- 【备忘】Java菜鸟到大牛学习路线之实战篇
- 黑客六道:简单而方便的一个日站工具-小白专用
- 二叉树所有相关遍历的算法
- JavaScript中原型对象的彻底理解