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 call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
H5+css3+js搭建带验证码的登录页面
Oct 11 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 多维数组排序实现代码
2009/08/05 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python绘制动态曲线教程
2020/02/24 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
玲玲的画教学反思
2014/02/04 职场文书
企业员工培训感言
2014/02/26 职场文书
考核工作实施方案
2014/03/30 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android