Vue 学习 day1

摘要：

• 我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

• 应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

  .mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。

• 当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板。
• 如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。
• 双大括号会将数据解释为纯文本，而不是 HTML。双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令.
• 在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
• 如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

　　通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

<div v-bind="objectOfAttrs"></div>

•  Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：{{ number + 1 }}    {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}   <div :id="`list-${id}`"></div>
• 　　JavaScript 表达式需要能合法地写在 return 后面。
• 动态参数绑定： <a v-bind:[attributeName]="url"> ... </a> 这里的 attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。举例来说，如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href
  • 　　动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。