速览

本节目标：理解“速览”的核心思路，并能把它用于实际开发或面试表达。

条件显示

循环解析

组件化：在 Vue 中，组件本质上是一个具有预定义选项的实例。在 Vue 中注册组件很简单：如对 app 对象所做的那样创建一个组件对象，并将其定义在父级组件的 components 选项中：

const TodoItem = {
  template: `<li>This is a todo</li>`
}
//

创建 Vue 应用

const app = Vue.createApp({
  components: {
    TodoItem //

注册一个新组件

  },
  ... //

组件的其它

 property
})
//

挂载 Vue 应用

app.mount(...)

现在，你可以将其放到另一个组件的模板中：

<ol>
  <!--

创建一个 todo-item 组件实例

 -->
  <todo-item></todo-item>
</ol>

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能将数据从父组件传入子组件才对。让我们来修改一下组件的定义，使之能够接受一个 ==prop==：

const TodoItem = {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
}

现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：

<div id="todo-list-app">
  <ol>
     <!--

现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”，稍后再作详细解释。

    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 <todo-item> 组件，提供一个更为复杂的模板和逻辑，而不会影响到父应用。

在一个大型应用中，有必要将整个应用程序划分为多个组件，以使开发更易管理。在后续教程中我们将详述组件，不过这里有一个 (假想的) 例子，以展示使用了组件的应用模板是什么样的：

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

==与自定义元素的关系== ==你可能已经注意到 Vue 组件与自定义元素非常类似——它是== ==Web Components 规范====的一部分。确实，Vue 的组件设计 (如插槽 API) 在浏览器原生支持该规范前就部分受到了它的影响。==

==它们之间主要的不同在于，Vue 组件的数据模型是作为框架的一部分而设计的，而该框架为构建复杂应用提供了很多必要的附加功能。例如响应式模板和状态管理——这两者都没有被该规范所覆盖。==

==Vue 也为创建和使用自定义元素提供了很好的支持。关于其更多细节，请浏览== ==Vue 和 Web Components== ==章节。==

速览 ​