预览模式: 普通 | 列表

VUE中用refs实现父子通讯的新方法

作者:admin  日期:2017-09-30

例子：http://258754.cn/2017/read2/test_component.html 

用refs父子通讯的新方法，比用emit要方便。主要思路是用refs去读取子组件的内部值，调用内部函数。之前真不知道可以这样用，直到我读到这篇文章--Vue.js 组件样式指南（英文）：
https://github.com/pablohpsilva/vuejs-component-style-guide
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5219

近期VUE及周边笔记--YDUI框架

作者:admin  日期:2017-09-24

 YDUI是基于vue2.0的一个功能齐全的UI框架，就我个人的应用范围来说，比element ui更适合我的需要。可能他的组件配置并没有ele那么强大而齐全，但是简练的风格反而更适合于中小移动端项目。

我主要使用这些组件：

  • flexible组件，用于rem-px单位转换，默认单位是10，好转脑子。
  • 弹窗，只有几个参数，适用于不复杂的情况。
  • 日期选择器，weui风格的，从底部向上弹出。
  • 滚动加载（yd-infinitescroll）
  • 数字动画 （CountUp）

其它的一些组件，别的库中也有，或是可以自己手写出来，并不是完全依赖。

要注意的事及BUG：

1、这个库的版本更新很快，如果发现参数无效等奇怪的情况，请先检查版本。比如yd-infinitescroll的不同版本写法就不一样。

2、flexible组件，对于窗口宽度的变化是有范围的。

Javascript代码
  1. //ydui.flexible.js，以下的11.2会在宽420像素以上停止变化，改为21.2后，会在768像素以上才停  
  2. return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 21.2), 8.55) + "px", e  

查看更多...

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 27515

近期VUE及周边笔记--easy mock

作者:admin  日期:2017-09-24

easy mock(https://easy-mock.com/)平台的主要作用，是用来模拟生成json文件，在后端未到位的情况下，为前端调试提供数据。我的使用方法：

1、是在开发时将ajax请求，直接指向https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api这样的远程接口，进行调试。

2、等前后端联调结束后，通过修改axios的axios.defaults.baseURL参数，将数据接口指向真实ajax地址，完成切换。

easy平台提供了丰富的mock.js语法，也可以接收并request参数，模拟真实ajax情况很逼真。比如下面这个范式，就模拟了对”/list?page=*“这样的多页请求的情况：

Javascript代码
  1. {  
  2.   res_body: function({  
  3.     _req,  
  4.     Mock  
  5.   }) {  
  6.     //page小于3，每页给出20个随机数据  
  7.     if (_req.query.page < 3) {  
  8.       return Mock.mock({  
  9.         "page_num": 4,  
  10.         "list|20": [{  
  11.           "id": _req.query.page,  
  12.           "tt_amount": "@float(200, 2000, 2, 2)",  
  13.           "commission": "@float(200, 2000, 2, 2)",  
  14.           "final_amount": "@float(200, 2000, 2, 2)"  
  15.         }]  
  16.       })  
  17.   
  18.     }  
  19.   
  20.     //page==3，给出6个数据，模拟末页情况  
  21.     if (_req.query.page == 3) {  
  22.       return Mock.mock({  
  23.         "page_num": 4,  
  24.         "list|6": [{  
  25.           "id": _req.query.page,  
  26.           "tt_amount": "@float(200, 2000, 2, 2)",  
  27.           "commission": "@float(200, 2000, 2, 2)",  
  28.           "final_amount": "@float(200, 2000, 2, 2)"  
  29.         }]  
  30.       })  
  31.     }  
  32.   }  
  33. }  

 模拟身份验证

Javascript代码
  1. {  
  2.   res_flag: function({  
  3.     _req  
  4.   }) {  
  5.     return (_req.header.token == "1234567890")?true:false;  
  6.   }  
  7. }  

 

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 7538

近期VUE及周边笔记--axios

作者:admin  日期:2017-09-24

我将ajax工具栈从vue-resource改为了axios，基本用法类似，但调用格式略有不同。比如vue-resource的response是放在res.body中，而axios放在了res.data中。

值得一提的是，axios的全局设置很方便，包括参数和拦截器。列举：

Javascript代码
  1. // 全局基地址配置  
  2. axios.defaults.baseURL = 'https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api';  
  3.   
  4. // 全局token  
  5. axios.defaults.headers = {token: window.localStorage.getItem("jyg_token")};  
  6.   
  7. // 添加全局请求拦截器  
  8. axios.interceptors.request.use(function (config) {  
  9.   // 给每个发出的请求后面加上php后缀  
  10.   config.url = config.url + "php";  
  11.   return config;  
  12.   }, function (error) {  
  13.   // 对请求错误做些什么  
  14.   return Promise.reject(error);  
  15.   });  
  16.   
  17. // 添加响应拦截器，比如对所有错误代码进行全局统一的出错处理  
  18. axios.interceptors.response.use(function (response) {  
  19.   // 对响应数据做点什么  
  20.   return response;  
  21.   }, function (error) {  
  22.   // 对响应错误做点什么  
  23.   return Promise.reject(error);  
  24.   });  

 

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5136