锚定函数

指令定义函数提供了几个钩子函数（可选）：

  • bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  • inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  • update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的锚定函数参数见下）。
  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  • unbind: 只调用一次， 指令与元素解绑时调用。

锚定函数参数

锚定函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
    binding: 一个对象，包含以下属性：

  • name: 指令名，不包括 v- 前缀。
  • value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
  • oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
  • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
  • modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
    oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

以下实例演示了这些参数的使用：

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app"  v-runoob:hello.a.b="message">
  10. </div>
  11.  
  12. <script>
  13. Vue.directive('runoob', {
  14.   bind: function (el, binding, vnode) {
  15.     var s = JSON.stringify
  16.     el.innerHTML =
  17.       'name: '       + s(binding.name) + '<br>' +
  18.       'value: '      + s(binding.value) + '<br>' +
  19.       'expression: ' + s(binding.expression) + '<br>' +
  20.       'argument: '   + s(binding.arg) + '<br>' +
  21.       'modifiers: '  + s(binding.modifiers) + '<br>' +
  22.       'vnode keys: ' + Object.keys(vnode).join(', ')
  23.   }
  24. })
  25. new Vue({
  26.   el: '#app',
  27.   data: {
  28.     message: '菜鸟教程!'
  29.   }
  30. })
  31. </script>
  32. </body>
  33. </html>

输出：

name: "runoob"
value: "菜鸟教程!"
expression: "message"
argument: "hello"
modifiers: {"a":true,"b":true}
vnode
keys: tag, data, children, text, elm, ns, context, functionalContext,
key, componentOptions, componentInstance, parent, raw, isStatic,
isRootInsert, isComment, isCloned, isOnce

锚定函数简写

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <div v-runoob="{ color: 'green', text: '无极天下!' }"></div>
  11. </div>
  12.  
  13. <script>
  14. Vue.directive('runoob', function (el, binding) {
  15.     // 简写方式设置文本及背景颜色
  16.     el.innerHTML = binding.value.text
  17.     el.style.backgroundColor = binding.value.color
  18. })
  19. new Vue({
  20.   el: '#app'
  21. })
  22. </script>
  23. </body>
  24. </html>

效果：

VueJS锚定的更多相关文章

  1. TODO：搭建Laravel VueJS SemanticUI

    TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...

  2. 一次页面从Jq到Vuejs+PartialView的迁徙

    题外话 本篇分享不能帮助你入门vue,入门的文章也是无意义的,官方文档http://cn.vuejs.org/v2/guide/ 已经写的不能再清晰了.希望我们勇敢的主动地给自己创造实践的机会. 手里 ...

  3. 使用vuejs框架进行列表渲染

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...

  4. Vuejs学习笔记1

    首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...

  5. 【vuejs小项目——vuejs2.0版本】单页面搭建

    http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...

  6. 【vuejs小项目】一、脚手架搭建工作

    一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...

  7. vuejs的动态过滤

    想要通过vuejs动态过滤(这里动态指得是过滤的条件是动态变化的), 一直没找到好办法, 最蠢的办法当然是两个两个数组,一个作为原始副本数组 一个作为视图数组,这样当过滤条件变化的时候 动态拷贝原始数 ...

  8. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  9. vuejs里封装的和IOS,Android通信模块

    项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致.使用WebViewJavascriptBridge. 其实也是通过拦截url scheme,支持ios6往前的系 ...

随机推荐

  1. swiper单屏滚动

    .swiper-slide { overflow: auto; } 1. 排除某些屏,不滚动 var startScroll, touchStart, touchCurrent; var aSlide ...

  2. Python基础教程笔记 第二章

    本章的名字虽然叫列表和元组,但是本章讲的最多的是列表,元祖指讲了很少的一部分.因为元组和列表很多方面都是一样的. 列表和元组的区别:列表可以被修改,元祖不可以被修改. python包含的6种内建序列: ...

  3. ios - 工具类

    这几天看项目,把俺旁边小哥哥的一个工具类相中了,希望对大家有所帮助哦~~~~~~~~~ // // PLZ_Tool.h // // Created by penglaizhi on 2017/7/3 ...

  4. C# 利用ICSharpCode.SharpZipLib.dll 实现压缩和解压缩文件

    我们 开发时经常会遇到需要压缩文件的需求,利用C#的开源组件ICSharpCode.SharpZipLib, 就可以很容易的实现压缩和解压缩功能. 压缩文件: /// <summary> ...

  5. 【Hihocoder1634】Puzzle Game（DP）

    题意:有一个n*m的矩阵,每个矩阵里有一个数字a[i][j].现在要求将其中一个格子的值改为p,使得修改后矩阵的最大子矩阵和最小,求这个最小值 n,m<=150,abs(a[i][j])< ...

  6. js scrollTop, 滚动条操作

    设置页面加载时滚动条自动滚到底的方法: jQuery: 复制代码 代码如下: $(function(){ var h = $(document).height()-$(window).height() ...

  7. [LeetCode] Letter Combinations of a Phone Number 回溯

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  8. Struts2的使用注解配置Action（零配置）

    1.首先引入struts2注解的jar包:struts2-convention-plugin.jar ------------------------------第一种方式-------------- ...

  9. glRectf(-0.5f, -0.5f, 0.5f, 0.5f)

    http://bbs.csdn.net/topics/370049656 x向右,y向上时OPENGL坐标系,z向屏幕外表示正方向(-0.5,-0.5)是左下角坐标,(0.5,0.5)是右上角坐标,, ...

  10. .NET CMS系统--pageAdmin 模板样式设置

    修改方法: 表单模型管理 - 数据表管理 - 模型管理 修改产品详情页