vue組件由3部分組成：1、template，設定組件的模板結構；2、script，設定組件的JavaScript行為；3、style，設定組件的樣式。每個元件中必須包含template模板結構，而script行為和style樣式是可選的組成部分；「」是vue提供的容器標籤，只起到包裹性質的作用，它不會被渲染為真正的DOM元素。 」是vue提供的容器標籤，只起到包裹性質的作用，它不會被渲染為真正的DOM元素。
vue 是一個完全支援元件化開發的框架。vue 中規定元件的字尾名稱是.vue。之前接觸到的App.vue 檔案本質上就是一個vue 的元件。每個.vue 元件都由3 部分構成，分別是：
template -> 元件的模板結構
script -> 元件的JavaScript 行為
<template>
<!-- 当前组件的DOM结构，需要定义到template 标签的内部
</ template>
登入後複製
在template 中使用指令##在元件的 節點中，支援使用前面所學的指令語法，來輔助開發者渲染目前元件的DOM 結構。程式碼範例如下：
<template>
<h1>这是App根组件</h1>
<!--使用{{ }}插值表达式-->
<p>生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}</p>
<!-- 使用v-bind 属性绑定-->
<p :title="new Date(). tol ocaleTimeString()">我在黑马程序员学习vue. js</p>
<!--属性v-on事件绑定
<button @click=”showInfo">按钮</button>
</template>在vue 2.x 的版本中， 節點內的DOM 結構只支援單一根節點：
<template> <!-- vue 2.x 中，template 节点内的所有元素，最外层"必须有“唯一的根节点进行包裹，否则报错--> <div> <h1>这是App根组件</h1> <h2>这是副标题</h2> </div> </ template>
<template> <!--这是包含多个根节点的template 结构，因为h1标签和h2标签外层没有包裹性质的根元素--> <h1>这是App根组件</h1> <h2>这是副标题</h2> </template>
vue 規定：元件內的
