vue.js通过自定义指令实现数据拉取更新的实现方法
前言
这篇文章的代码片段位于 vue 的单文件组件中，即以 .vue 结尾的文件中，本文说明的只是一种实现方法，既不是唯一的方法也不是最好的方法，如果大家有更好的方法可以留言，大家进行讨论。
第一步
首先，一定要先定义变量：
// app.vue <script>
data () {
return {
// 定义 getData
getData:{},
// 定义自定义指令的绑定值
ifUpdate:true
}
}
第二步
然后要使用 ajax 的话，要在 index.html 里引入 jquery，这样就可以全局使用了：
// index.html <script type="text/javascript" src="./lib/js/html" target="_blank">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能有所帮助，如果有疑问大家可以留言交流。
-
本文向大家介绍Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法，包括了Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法的使用技巧和注意事项，需要的朋友参考一下 1. 引入jquery和vue.js 2. JS 3. HTML 以上这篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法就是小编分享给大家的全部内容了，希
-
本文向大家介绍Android自定义ListView实现下拉刷新，包括了Android自定义ListView实现下拉刷新的使用技巧和注意事项，需要的朋友参考一下 首先呈上效果图 当今APP，哪个没有点滑动刷新功能，简直就太落伍了。正因为需求多，因此自然而然开源的也就多。但是若想引用开源库，则很麻烦，比如PullToRefreshView这个库，如果把开源代码都移植到项目中，这是件很繁琐的事，如果用依
-
本文向大家介绍Pytorch 实现数据集自定义读取，包括了Pytorch 实现数据集自定义读取的使用技巧和注意事项，需要的朋友参考一下 以读取VOC2012语义分割数据集为例，具体见代码注释： VocDataset.py Train.py 以上这篇Pytorch 实现数据集自定义读取就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
主要内容：实例,实例,钩子,实例,实例除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点： 实例 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.d
-
问题内容： 我有一个带有模板的指令 我的指令声明为： 我想在单击某个项目并且其值已经更改时调用。 也就是说，如果我的指令实现为： 我希望在的值已更新时致电。 使用上面给出的代码，可以成功调用，但是将使用旧值而不是新的更新值来调用它。 解决该问题的一种方法是在超时值内部调用超时，以在将来某个时刻执行该超时。但是这种解决方案使我无法控制应该执行的顺序，并且我认为应该有一个更优雅的解决方案。 我也可以在
-
本文向大家介绍vue 使用自定义指令实现表单校验的方法，包括了vue 使用自定义指令实现表单校验的方法的使用技巧和注意事项，需要的朋友参考一下 笔者近期在公司的项目中使用自定义指令完成了表单校验。 这里将思路分享给大家，并写了一个小demo。这个自定义指令还需要大家自行完善。 demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网。 首先，在git