javascript - 关于vue指令的执行顺序和页面流程的疑问

Question

目的

为了给页面按钮增加权限控制，所以想到使用到vue里面的terminal。

xxx.vue

<template>
  <p class="">
    <p id="modal"></p>
    <p v-auth：modal @click='aa'>
      <h1>header</h1>
      <p>body</p>
      <p>footer</p>
    </p>
  </p>
</template>

<script>
'use strict'

export default {
  methods: {
    aa() {
      console.log(3);
    }
  }
}
</script>

directive

'use strict'

import Vue from 'vue'
var FragmentFactory = Vue.FragmentFactory
var remove = Vue.util.remove
var createAnchor = Vue.util.createAnchor

export default {
  priority:0,
  terminal: true,
  bind: function () {
    var container = document.getElementById(this.arg)
    debugger
    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 () {
  }
}

v-auth这个指令已经注到全局了，所以别问我为啥没引用。指令的内容直接拷贝的官网例子(原文)，但是运行报错。所以断点调试

如上图是没有这个id的，查看网页dom发现文档里面什么都没有

结合自己对生命周期理解，我这边猜想上面这个<p id="modal"></p>应该不属于spa中的元素吧？因为在组件编译的时候是不会再dom文档中有内容的，也就是官网的例子给一个思路其实不能用于特定的场景。

Answer 1

你 v-auth:model 的冒号错了, 如果你是直接复制的话.