Vue文档小结

1. 解析 DOM 模板时的注意事项

• 有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

2. 事件名 - 全小写

跟组件和 prop 不同，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

3. .sync 修饰符

  this.$emit('update:title', newTitle)

  <text-document
    v-bind:title="doc.title"
    v-on:update:title="doc.title = $event"
  ></text-document>

  // 简写
  <text-document v-bind:title.sync="doc.title"></text-document>

4. 插槽 [父组件控制子组件页面内容显示: js控制(通过数据传递,控制权在子组件) html控制(通过html传递, 控制权在父组件,满足父组件的私有化,传入结构不确定，情况经常变化)]

• 父组件可以拿到子组件的数据,对数据处理后放入插槽
• 作用域
  有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽