上QQ阅读APP看书，第一时间看更新
3.3.5 terminal
terminal：使用terminal选项是一个相对较为复杂的过程，选项terminal的作用是阻止Vue.js遍历当前元素及其内部元素，并由该指令本身去编译绑定元素及其内部元素。Vue通过递归遍历DOM树来编译模块。但是当它遇到terminal指令时会停止遍历这个元素的后代元素，并由terminal指令接管编译这个元素及其后代元素。v-if和v-for都是terminal指令。
编写自定义terminal指令是一个高级话题，需要较好地理解Vue的编译流程，但这不是说不可能编写自定义terminal指令。用terminal:true指定自定义terminal指令，可能还需要用Vue.FragmentFactory来编译partial。下面是一个自定义terminal指令的示例，terminal指令编译内容模板并将结果注入页面的另一个地方。
提示：如果想编写自定义terminal指令代码，建议读者先通读内置terminal指令的源码（如v-if和v-for），以便更好地了解Vue的内部机制。
代码如下：
var FragmentFactory = Vue.FragmentFactoryvar remove = Vue.util.removevar createAnchor = Vue.util.
createAnchor
Vue.directive('inject', {
terminal: true,
bind: function(){
var container = document.getElementById(this.arg)
this.anchor = createAnchor('v-inject')
container.appendChild(this.anchor)
remove(this.el)
var factory = new FragmentFactory(this.vm, this.el)
this.frag = factory.create(this._host, this._scope, this._frag)
this.frag.before(this.anchor)
},
unbind: function(){
this.frag.remove()
remove(this.anchor)
}
})
<div id="modal"></div>
<div v-inject:modal>
<h3>header</h3>
<p>body</p>
<p>footer</p>
</div>