Vue.js基础-11-自定义指令（directive）：全局指令、局部指令、钩子、简写函数

文章目录

1. 自定义全局指令
- 语法示例
- 全局指令
2. 自定义局部指令
- 语法示例
- 完整示例
3. 钩子
4. 简写函数

1. 自定义全局指令

语法示例

下边定义了一个名为 v-指令名的自定义指令

     Vue.directive('指令名', {操作})

全局指令

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
 
<body>
  <div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
  </div>
 
  <script>
    // 注册一个全局自定义指令 v-focus
    Vue.directive('focus', {
      // 当绑定元素插入到 DOM 中。
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })
    // 创建根实例
    new Vue({
      el: '#app'
    })
  </script>
</body>
 
</html>

2. 自定义局部指令

语法示例

     new Vue({
      el: '#app',
      directives: {
        指令名: {操作}
      }
    })

完整示例

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
 
<body>
  <div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
  </div>
 
  <script>
    // 创建根实例
    new Vue({
      el: '#app',
      directives: {
        // 注册一个局部的自定义指令 v-focus
        focus: {
          // 指令的定义
          inserted: function (el) {
            // 聚焦元素
            el.focus()
          }
        }
      }
    })
  </script>
</body>
 
</html>

3. 钩子

3.1 钩子函数

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

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

3.2 参数

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 编译生成的虚拟节点。
oldVnode:
上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

3.3 示例

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
 
<body>
  <div id="app" v-xishu:hello.a.b="message">
  </div>
 
  <script>
    Vue.directive('xishu', {
      bind: function (el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
          'name: ' + s(binding.name) + '<br>' +
          'value: ' + s(binding.value) + '<br>' +
          'expression: ' + s(binding.expression) + '<br>' +
          'argument: ' + s(binding.arg) + '<br>' +
          'modifiers: ' + s(binding.modifiers) + '<br>' +
          'vnode keys: ' + Object.keys(vnode).join(', ')
      }
    })
    new Vue({
      el: '#app',
      data: {
        message: '只是一个信息'
      }
    })
  </script>
</body>
 
</html>

结果输出

 name: "xishu"
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

4. 简写函数

语法示例

 Vue.directive('xiShu', function (el, binding) {
      //简写函数
      el.innerHTML = binding.value.text
    })

完整示例

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
 
<body>
  <div id="app">
    <div v-xiShu="{ color: 'yellow', text: '重要通知!',backgroundColor: 'red' }"></div>
  </div>
 
  <script>
    Vue.directive('xiShu', function (el, binding) {
      el.innerHTML = binding.value.text
      el.style.backgroundColor = binding.value.backgroundColor
      el.style.color = binding.value.color
    })
    new Vue({
      el: '#app'
    })
  </script>
</body>
 
</html>

说明；

directive 定义了一个自定义指令 v-xiShu，需要 el和binding两个参数。
在 < div > 中定义binding.value 的一些属性：color,text,backgroundColor

结果显示

posted on 2022-06-09 19:51 运维开发玄德公阅读(56) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

· Vue.js基础-01-Vue实例和Vue表达式（实例化，常用选项el/data/methods/computed/filter/watch，实例属性）

· Vue — 自定义指令

· 《全局实例篇》Vue.directives自定义指令v-my

· Vue自定义指令

Vue.js基础-11-自定义指令（directive）：全局指令、局部指令、钩子、简写函数

文章目录

1. 自定义全局指令

语法示例

全局指令

2. 自定义局部指令

语法示例

完整示例

3. 钩子

3.1 钩子函数

3.2 参数

3.3 示例

4. 简写函数

语法示例

完整示例

导航

统计

合集

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>CROW-宋</title>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>

	<body>
	<div id="app">
	<p>页面载入时，input 元素自动获取焦点：</p>
	<input v-focus>
	</div>

	<script>
	// 注册一个全局自定义指令 v-focus
	Vue.directive('focus', {
	// 当绑定元素插入到 DOM 中。
	inserted: function (el) {
	// 聚焦元素
	el.focus()
	}
	})
	// 创建根实例
	new Vue({
	el: '#app'
	})
	</script>
	</body>

	</html>

	name: "xishu"
	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

	Vue.directive('xiShu', function (el, binding) {
	//简写函数
	el.innerHTML = binding.value.text
	})