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. „“ ist ein von Vue bereitgestelltes Container-Tag, das nur als Wrapper fungiert und nicht als echte DOM-Elemente gerendert wird. " ist ein von vue bereitgestelltes Container-Tag. Es spielt nur eine Wrapping-Rolle. Es wird nicht als echtes DOM-Element gerendert.
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 Komponentescript -> 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 definiert werden muss ; ist ein von vue bereitgestelltes Container-Tag. Es wird nicht als echtes DOM-Element gerendert Für die Komponente wird die zuvor erlernte Befehlssyntax unterstützt, um Entwicklern beim Rendern der DOM-Struktur der aktuellen Komponente zu helfen. Das Codebeispiel lautet wie folgt:
<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 nur einen einzelnen Root-Knoten:
<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 <template>
<!-- vue 2.x 中，template 节点内的所有元素，最外层"必须有“唯一的根节点进行包裹，否则报错-->
<div>
<h1>这是App根组件</h1>
<h2>这是副标题</h2>
</div>
</ template>
vue-Vorschriften: Der
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
