Skip to content

Commit 6eb1634

Browse files
committed
Merge pull request #258 from kazupon/terminal-params
Add terminal directive explanation
2 parents b77b0fa + 5b355b9 commit 6eb1634

File tree

1 file changed

+43
-1
lines changed

1 file changed

+43
-1
lines changed

src/guide/custom-directive.md

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -277,8 +277,50 @@ Vue.directive('my-directive', {
277277

278278
Use this wisely though, because in general you want to avoid side-effects in your templates.
279279

280+
### terminal
281+
282+
In some cases, we may want to used as the **terminal** directives. For example, you may want to perform custom directive than normal directive like `v-if` or `v-for`. If you want to do so, you need to pass in `terminal: true` in your directive definition.
283+
284+
The following is an example that inject to DOM is specified with argument of directive:
285+
286+
``` js
287+
var FragmentFactory = Vue.FragmentFactory
288+
var remove = Vue.util.remove
289+
var createAnchor = Vue.util.createAnchor
290+
291+
Vue.directive('inject', {
292+
terminal: true,
293+
bind: function () {
294+
var container = document.getElementById(this.arg)
295+
this.anchor = createAnchor('v-inject')
296+
container.appendChild(this.anchor)
297+
remove(this.el)
298+
var factory = new FragmentFactory(this.vm, this.el)
299+
this.frag = factory.create(this._host, this._scope, this._frag)
300+
this.frag.before(this.anchor)
301+
},
302+
unbind: function () {
303+
this.frag.remove()
304+
remove(this.anchor)
305+
}
306+
})
307+
```
308+
309+
``` html
310+
<div id="modal"></div>
311+
...
312+
<div v-inject:modal>
313+
<h1>header</h1>
314+
<p>body</p>
315+
<p>footer</p>
316+
</div>
317+
```
318+
319+
If you want to define the terminal directive, we recommend that you understand internal API of Vue and other terminal directives like `v-if` and `v-for`. In the target element of the compilation, notice that when Vue.js finds the terminal directive, even if the other directives exist, these are not handled. As the above example code, you should be handled other directives.
320+
321+
280322
### priority
281323

282-
You can optionally provide a priority number for your directive (defaults to 1000). A directive with a higher priority will be processed earlier than other directives on the same element. Directives with the same priority will be processed in the order they appear in the element's attribute list, although that order is not guaranteed to be consistent in different browsers.
324+
You can optionally provide a priority number for your directive. If you don't provide a priority, as default priority value, normal directive set to `1000`, terminal directive set to `2000`. A directive with a higher priority will be processed earlier than other directives on the same element. Directives with the same priority will be processed in the order they appear in the element's attribute list, although that order is not guaranteed to be consistent in different browsers.
283325

284326
You can checkout the priorities for some built-in directives in the [API reference](/api/#Directives). Additionally, flow control directives `v-if` and `v-for` always have the highest priority in the compilation process.

0 commit comments

Comments
 (0)