html - vue.js DOM 模板解析注意事项

Question

Vue 文档 DOM Template Parsing Caveats说:

It should be noted that this limitation does not apply if you are using string templates from one of the following sources:

• String templates (e.g. template: '...')

v-for with a Component说

Note the is="todo-item" attribute. This is necessary in DOM templates […]

但这不就是一个“字符串模板”吗？

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

Answer 1

您可能对字符串模板的“作用域”感到困惑，它使您摆脱了上述限制。

如果限制子元素类型的 HTML 父元素(在本例中为 <ul> )在字符串模板中，那么您没问题。

但如果它在真实的 DOM 中，那么浏览器将开始检查限制并提升它不期望的子元素。

Vue 文档中的精确示例可能不再非常相关，因为浏览器现在似乎接受自定义元素作为 <ul> 的子元素(至少在 Chrome 和 Firefox 中):

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [{
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function() {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

li {
  /* Items will be RED if hoisted out of the UL */
  background-color: red;
}

ul li {
  /* Items will be GREEN if kept inside the UL */
  background-color: green;
}

<script src="https://unpkg.com/vue@2"></script>

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
    <button>Add</button>
  </form>
  <ul>
    <!-- Using directly the Component in DOM -->
    <todo-item
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
</div>

但是请考虑我们替换 <ul> 的情况通过 <table>和 <li>按表行 <tr><td> :

Vue.component('todo-item', {
  template: '\
    <tr><td>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </td></tr>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [{
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function() {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

tr,
td {
  /* Cells will be RED if hoisted out of the table */
  background-color: red;
}

table tr,
table td {
  /* Cells will be GREEN if kept inside the table */
  background-color: green;
}

<script src="https://unpkg.com/vue@2"></script>

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
    <button>Add</button>
  </form>
  <table>
    <!-- Using directly the Component in real DOM -->
    <todo-item
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></todo-item>
  </table>
</div>

现在，如果应用程序模板不再留在真实的 DOM 中，而是还指定为模板字符串:

Vue.component('todo-item', {
  template: '\
    <tr><td>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </td></tr>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  template: `
  <div>
    <form v-on:submit.prevent="addNewTodo">
      <label for="new-todo">Add a todo</label>
      <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
      <button>Add</button>
    </form>
    <table>
      <!-- Using directly the Component in template string -->
      <todo-item
        v-for="(todo, index) in todos"
        v-bind:key="todo.id"
        v-bind:title="todo.title"
        v-on:remove="todos.splice(index, 1)"
      ></todo-item>
    </table>
  </div>
  `,
  data: {
    newTodoText: '',
    todos: [{
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function() {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

tr,
td {
  /* Cells will be RED if hoisted out of the table */
  background-color: red;
}

table tr,
table td {
  /* Cells will be GREEN if kept inside the table */
  background-color: green;
}

<script src="https://unpkg.com/vue@2"></script>

<div id="todo-list-example">
</div>

为了完整起见，如果我们将应用程序模板保留在真实 DOM 中，但正确使用 is引用我们的组件的特殊属性，如 Vue 文档示例中所做的那样:

Vue.component('todo-item', {
  template: '\
    <tr><td>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </td></tr>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [{
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function() {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

tr,
td {
  /* Cells will be RED if hoisted out of the table */
  background-color: red;
}

table tr,
table td {
  /* Cells will be GREEN if kept inside the table */
  background-color: green;
}

<script src="https://unpkg.com/vue@2"></script>

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
    <button>Add</button>
  </form>
  <table>
    <!-- Using a TR with "is" in real DOM -->
    <tr
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></tr>
  </table>
</div>