vue コンポーネントは 3 つの部分で構成されます: 1. コンポーネントのテンプレート構造を設定するテンプレート; 2. コンポーネントの JavaScript 動作を設定するスクリプト; 3. スタイルを設定するスタイル成分。各コンポーネントにはテンプレート テンプレート構造が含まれている必要があり、スクリプトの動作とスタイルはオプションのコンポーネントです。「」は Vue によって提供されるコンテナ タグであり、ラッパーとしてのみ機能し、Real DOM 要素としてレンダリングされません。 " は Vue によって提供されるコンテナ タグです。これはラッピングの役割のみを果たします。実際の DOM 要素としてレンダリングされません。
vue はコンポーネント開発を完全にサポートするフレームワークです vue で指定されるコンポーネントのサフィックス名は .vue です。 App.vue ファイルは本質的に vue コンポーネントであり、各 .vue コンポーネントは 3 つの部分、すなわち:
<template>
<!-- 当前组件的DOM结构，需要定义到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 は次のように規定しています: コンポーネント内の
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
