Die Vue-Komponente besteht aus mehreren Teilen

Die Vue-Komponente besteht aus 3 Teilen: 1. Vorlage, die die Vorlagenstruktur der Komponente festlegt; 2. Skript, das das JavaScript-Verhalten der Komponente festlegt; 3. Stil, der den Stil der Komponente festlegt; Jede Komponente muss eine Vorlagenstruktur enthalten, und Skriptverhalten und -stil sind optionale Komponenten. „

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3 Computer.

vue ist ein Framework, das die Komponentenentwicklung vollständig unterstützt. Der Suffixname der Komponente in Vue ist im Wesentlichen eine Vue-Komponente

template -> Die Vorlagenstruktur der Komponente

• script -> Das JavaScript-Verhalten der Komponente

• style -> Der Stil der Komponente

• Unter Jede Komponente muss eine Vorlagenstruktur enthalten, und Vue schreibt vor, dass die jeder Komponente entsprechende Vorlagenstruktur im Knoten

  <template>
  <!-- 当前组件的DOM结构，需要定义到template 标签的内部
  </ template>

Definieren Sie den Stammknoten in der Vorlage

In der In der vue 2.x-Version unterstützt die DOM-Struktur innerhalb des

<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>

In der vue 3.x-Version unterstützt das

script-Knoten der Komponente

vue-Vorschriften: Der <script>-Knoten ist optional und Entwickler können die JavaScript-Geschäftslogik der Komponente im <script>-Knoten kapseln ; script > Die Grundstruktur des Knotens ist wie folgt: Der Namensknoten in <strong><span style="font-size:16px;"><pre class="line-numbers language-js">&lt;template&gt; &lt;!--这是包含多个根节点的template 结构，因为h1标签和h2标签外层没有包裹性质的根元素--&gt; &lt;h1&gt;这是App根组件&lt;/h1&gt; &lt;h2&gt;这是副标题&lt;/h2&gt; &lt;/template&gt;</pre></script>

script kann einen Namen für die aktuelle Komponente über den Namensknoten definieren. Der Code lautet wie folgt:

<script>
//今后，组件相关的data 数据、methods 方法等，
//都需要定义到export default 所导出的对象中。
export default {}
</script>

When Verwenden von vue -devtools Beim Debuggen des Projekts kann der benutzerdefinierte Komponentenname jede Komponente klar unterscheiden:

Datenknoten im Skript

vue wird beim Rendern der Komponente benötigt im Datenknoten definiert werden:

<script>
export default {
// name 属性指向的是当前组件的名称(建议:每个单词的首字母大写)
name: &#39;MyApp&#39;，
}
</script>

Die Daten in der Komponente müssen eine Funktion sein. Vue legt fest, dass die Daten in der Komponente eine Funktion sein müssen und nicht direkt auf ein Datenobjekt verweisen können. Daher ist beim Definieren des Datenknotens in der Komponente die folgende Methode falsch: Der Methodenknoten im

<script>
export default {
//组件的名称
name:
&#39;MyApp&#39;，
//组件的数据(data方法中return出去的对象，就是当前组件渲染期间需要用到的数据对象)
data() {
return {
username: &#39;哇哈哈 &#39;,
}
 },
 }
</script>

Skript

Die Ereignisverarbeitungsfunktion in der Komponente muss im Methodenknoten definiert werden. Der Beispielcode lautet wie folgt:

data: { //组件中，不能直接让data 指向一个数据对象(会报错)
count: 0
}

Der Stilknoten der Komponente

vue legt fest: Der

Das obige ist der detaillierte Inhalt vonDie Vue-Komponente besteht aus mehreren Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!