vue.js通过自定义指令实现数据拉取更新的实现方法


Posted in Javascript onOctober 18, 2016

前言

这篇文章的代码片段位于 vue 的单文件组件中,即以 .vue 结尾的文件中,本文说明的只是一种实现方法,既不是唯一的方法也不是最好的方法,如果大家有更好的方法可以留言,大家进行讨论。

第一步

首先,一定要先定义变量:

// app.vue <script>

data () {  
  return {
   // 定义 getData
   getData:{},
   // 定义自定义指令的绑定值
   ifUpdate:true
  }
}

第二步

然后要使用 ajax 的话,要在 index.html 里引入 jquery,这样就可以全局使用了:

// index.html

<script type="text/javascript" src="./lib/js/jquery-2.1.1.min.js"></script>

第三步

接着使用自定义指令,在组件实例化后,会自动执行自定义指令里的方法:

组件实例化后会立即以初始值 ifUpdate 为参数第一次调用自定义指令 initData 的方法,之后每次参数值 ifUpdate 变化时会再次调用 initData 的函数,参数为 ifUpdate 的新值与旧值。

// app.vue <template>

// 在页面节点(自由选择)中绑定自定义指令
<div v-initData="ifUpdate" ></div>
// app.vue <script>

// 定义自定义指令
directives:{
  initData:function(val, oldVal){
   if(!val){
    return;
   }
   var self = this;
   $.getJSON( "ajax/test.json", function( data ) {
     self.vm.getData = data;
   });
   // 下次 ifUpdate 值更新为 true 时就会再次使用上面的 ajax 去获取数据
   self.vm.ifUpdate = false;
  }
}

使用场景说明

用户评论后,刷新评论列表:

     首次获取评论数据后,将 ifUpdate 改为 false

     用户添加评论后将数据传到后台,并将 ifUpdate 变为 true

     指令根据 ifUpdate 变化而触发,再次通过 ajax 从后台拉取数据

     拉取完再将 ifUpdate 重置为 false

总结

以上就是这篇文章的全部内容,希望本文的内容对大家学习或者使用vue.js能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
微信小程序 教程之WXML
Oct 18 #Javascript
原生JS实现匀速图片轮播动画
Oct 18 #Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 #Javascript
原生js实现网易轮播图效果
Apr 10 #Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 #Javascript
JSON对象 详解及实例代码
Oct 18 #Javascript
简易的JS计算器实现代码
Oct 18 #Javascript
You might like
PHP计数器的实现代码
2013/06/08 PHP
php生成rss类用法实例
2015/04/14 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
新手入门常用代码集锦
2007/01/11 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
简单谈谈Python中的闭包
2016/11/30 Python
如何在python中使用selenium的示例
2017/12/26 Python
python如何将图片转换为字符图片
2020/08/19 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
软件工程师面试题
2012/06/25 面试题
工商管理系学生的自我评价分享
2013/11/29 职场文书
村官学习十八大感想
2014/01/15 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
销售团队口号大全
2014/06/06 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书