一, 什么是全局 API?
全局 API 并不在构造器里, 而是先声明全局变量或者直接在 vue 上定义一些新功能, Vue 内置了一些全局 API, 比如我们今天要学习的指令 Vue.directive. 说的简单些就是, 在构造器外部用 Vue 提供给我们的 API 函数来定义新的功能.
二, Vue.directive 自定义指令
我们在第一季就学习了内部指令, 我们也可以定义一些属于自己的指令, 比如我们要定义一个 v-jspang 的指令, 作用就是让文字变成绿色.
在自定义指令前我们写一个小功能, 在页面上有一个数字为 10, 数字的下面有一个按钮, 我们每点击一次按钮后, 数字加 1.
三, 自定义指令中传递的三个参数
el: 指令所绑定的元素, 可以用来直接操作 DOM.
binding: 一个对象, 包含指令的很多信息.
vnode:Vue 编译生成的虚拟节点.
四, 自定义指令的生命周期
自定义指令有五个生命周期 (也叫钩子函数), 分别是 bind,inserted,update,componentUpdated,unbind
bind: 只调用一次, 指令第一次绑定到元素时调用, 用这个钩子函数可以定义一个绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用 (父节点存在即可调用, 不必存在于 document 中). update: 被绑定于元素所在的模板更新时调用, 而无论绑定值是否变化. 通过比较更新前后的绑定值, 可以忽略不必要的模板更新. componentUpdated: 被绑定元素所在模板完成一次更新周期时调用. unbind: 只调用一次, 指令与元素解绑时调用.
<script type="text/javascript" src="../assets/js/vue.js"></script>
vue.directive 自定义指令
{{num}}
加分
解绑
- <script type="text/javascript">
- function unbind() {
- app.$destroy();
- }
- // 自定义指令
- Vue.directive('jspang', {
- bind: function(el, binding, vnode) { // 被绑定
- /**
- var s=JSON.stringify;
- el.innerhtml =
- 'name:' + s(binding.name) +''+'value:'+ s(binding.value) +'
- '+'expression:'+ s(binding.expression) +'
- ' ;
- **/
- el.style = 'color:' + binding.value;
- console.log('1 - bind');
- },
- inserted: function() { // 绑定到节点
- console.log('2 - inserted');
- },
- update: function() { // 组件更新
- console.log('3 - update');
- },
- componentUpdated: function() { // 组件更新完成
- console.log('4 - componentUpdated');
- },
- unbind: function() { // 解绑
- console.log('5 - unbind');
- }
- }) var app = new Vue({
- el: '#app',
- data: {
- color: 'green',
- num: 10
- },
- methods: {
- jia: function() {
- this.num++;
- }
- }
- })
- </script>
- bind: function() { // 被绑定
- console.log('1 - bind');
- },
- inserted: function() { // 绑定到节点
- console.log('2 - inserted');
- },
- update: function() { // 组件更新
- console.log('3 - update');
- },
- componentUpdated: function() { // 组件更新完成
- console.log('4 - componentUpdated');
- },
- unbind: function() { // 解绑
- console.log('1 - bind');
- }
来源: https://www.2cto.com/kf/201809/777949.html