From e97303fc39b3bd6f0cc28556db5e73402de75587 Mon Sep 17 00:00:00 2001 From: zhaoss Date: Mon, 9 May 2022 14:23:51 +0800 Subject: [PATCH] =?UTF-8?q?2.8.3=E5=B0=8F=E8=8A=82=E4=B9=A0=E9=A2=98?= =?UTF-8?q?=E3=80=81=E5=85=B3=E9=94=AE=E5=AD=97=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exercises.json" | 7 ++ .../exercises.md" | 99 +++++++++++++++++++ .../config.json" | 6 ++ .../config.json" | 8 ++ 4 files changed, 120 insertions(+) create mode 100644 "data/2.Vue\344\270\255\351\230\266/8.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/3.\345\212\250\346\200\201\346\214\207\344\273\244\345\217\202\346\225\260/exercises.json" create mode 100644 "data/2.Vue\344\270\255\351\230\266/8.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/3.\345\212\250\346\200\201\346\214\207\344\273\244\345\217\202\346\225\260/exercises.md" create mode 100644 "data/2.Vue\344\270\255\351\230\266/9.UI\347\273\204\344\273\266\345\272\223/config.json" create mode 100644 "data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/7.\347\273\204\344\273\266\347\232\204\351\200\222\345\275\222/config.json" diff --git "a/data/2.Vue\344\270\255\351\230\266/8.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/3.\345\212\250\346\200\201\346\214\207\344\273\244\345\217\202\346\225\260/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/8.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/3.\345\212\250\346\200\201\346\214\207\344\273\244\345\217\202\346\225\260/exercises.json" new file mode 100644 index 0000000..b20e28c --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/8.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/3.\345\212\250\346\200\201\346\214\207\344\273\244\345\217\202\346\225\260/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": null, + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "acc37c5805244cb9bca3526be6b78a3a" +} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/8.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/3.\345\212\250\346\200\201\346\214\207\344\273\244\345\217\202\346\225\260/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/8.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/3.\345\212\250\346\200\201\346\214\207\344\273\244\345\217\202\346\225\260/exercises.md" new file mode 100644 index 0000000..4c31869 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/8.\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244/3.\345\212\250\346\200\201\346\214\207\344\273\244\345\217\202\346\225\260/exercises.md" @@ -0,0 +1,99 @@ +# 动态指令参数 + +
小常识：
+
+ + + +指令的参数可以是动态的。例如，在 `v-mydirective:[argument]="value"` 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。 + +例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令： + +```javascript +
+

Scroll down the page

+

Stick me 200px from the top of the page

+
+Vue.directive('pin', { + bind: function (el, binding, vnode) { + el.style.position = 'fixed' + el.style.top = binding.value + 'px' + } +}) + +new Vue({ + el: '#baseexample' +}) +``` + +这会把该元素固定在距离页面顶部 200 像素的位置。但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢？这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。 + +```javascript +
+

Scroll down inside this section ↓

+

I am pinned onto the page at 200px to the left.

+
+Vue.directive('pin', { + bind: function (el, binding, vnode) { + el.style.position = 'fixed' + var s = (binding.arg == 'left' ? 'left' : 'top') + el.style[s] = binding.value + 'px' + } +}) + +new Vue({ + el: '#dynamicexample', + data: function () { + return { + direction: 'left' + } + } +}) +``` + +结果： +
+![在这里插入图片描述](https://img-blog.csdnimg.cn/10de551b6d6140baa679a077f06f59bb.gif) +
+ +这样这个自定义指令现在的灵活性就足以支持一些不同的用例了。 +
+**函数简写** +
+在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写： +
+ +```javascript +Vue.directive('color-swatch', function (el, binding) { + el.style.backgroundColor = binding.value +}) +``` + +
+ + + + +
小测试：
+ +根据上方小常识完成填空：动态指令参数 `(__1__)`，`(__2__)`可以根据组件实例数据进行更新！

+ +## 答案 + +1、v-mydirective:[argument]="value"；2、argument 参数 + +## 选项 + +### A + +1、v-mydirective:[argument]="value"；2、ele参数 + +### B + + +1、v-mydirective:[value]="argument"；2、argument 参数 + +### C + + +1、v-mydirective:[value]="argument"；2、ele参数 \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/9.UI\347\273\204\344\273\266\345\272\223/config.json" "b/data/2.Vue\344\270\255\351\230\266/9.UI\347\273\204\344\273\266\345\272\223/config.json" new file mode 100644 index 0000000..bb4fbac --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/9.UI\347\273\204\344\273\266\345\272\223/config.json" @@ -0,0 +1,6 @@ +{ + "node_id": "vue-5421c0d63bd24a34929175e0c31f2759", + "keywords": [], + "keywords_must": [], + "keywords_forbid": [] +} \ No newline at end of file diff --git "a/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/7.\347\273\204\344\273\266\347\232\204\351\200\222\345\275\222/config.json" "b/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/7.\347\273\204\344\273\266\347\232\204\351\200\222\345\275\222/config.json" new file mode 100644 index 0000000..944bab8 --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/8.Vue\346\272\220\347\240\201\350\247\243\346\236\220/7.\347\273\204\344\273\266\347\232\204\351\200\222\345\275\222/config.json" @@ -0,0 +1,8 @@ +{ + "node_id": "vue-0b06fbe067ef4f6d9b569839f99879de", + "keywords": [], + "children": [], + "export": [], + "keywords_must": [], + "keywords_forbid": [] +} \ No newline at end of file -- GitLab