pg电子是什么游戏

書名： Vue.js從入門到項目實踐（超值版）
作者名：聚慕課教育研發(fā)中心編著
本章字數(shù)： 350字
更新時間： 2022-07-29 14:27:38

3.3.5　terminal

terminal：使用terminal選項是一個相對較為復雜的過程，選項terminal的作用是阻止Vue.js遍歷當前元素及其內(nèi)部元素，并由該指令本身去編譯綁定元素及其內(nèi)部元素。Vue通過遞歸遍歷DOM樹來編譯模塊。但是當它遇到terminal指令時會停止遍歷這個元素的后代元素，并由terminal指令接管編譯這個元素及其后代元素。v-if和v-for都是terminal指令。

編寫自定義terminal指令是一個高級話題，需要較好地理解Vue的編譯流程，但這不是說不可能編寫自定義terminal指令。用terminal:true指定自定義terminal指令，可能還需要用Vue.FragmentFactory來編譯partial。下面是一個自定義terminal指令的示例，terminal指令編譯內(nèi)容模板并將結(jié)果注入頁面的另一個地方。

提示：如果想編寫自定義terminal指令代碼，建議讀者先通讀內(nèi)置terminal指令的源碼（如v-if和v-for），以便更好地了解Vue的內(nèi)部機制。

代碼如下：

    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>

官术网_书友最值得收藏!

Vue.js從入門到項目實踐（超值版）

3.3.5 terminal

3.3.5　terminal