Lernen Sie die Vorlagensyntax in Vue kennen und sprechen Sie über die Beziehung zwischen Containern und Instanzen

Dieser Artikel führt Sie durch die Vorlagensyntax in vue, stellt die Interpolationssyntax und die Befehlssyntax vor und spricht über die Beziehung zwischen Containern und Instanzen. Ich hoffe, dass er für alle hilfreich ist!

Ich möchte Schritt für Schritt aufsteigen ~ Hallo zusammen, heute lernen wir das Konzept der Vorlagensyntax kennen!

1. Vorlagensyntax

Die Vorlagensyntax ist in Interpolationssyntax und Befehlssyntax unterteilt.

1. Interpolationssyntax

Die Interpolationssyntax wird durch zwei geschweifte Klammern dargestellt, die zur Erläuterung des Inhalts des Tag-Körpers, xxx{{xxx}, verwendet werden. code> /code> muss ein <code>{{xxx}}里面的xxx必须要是js表达式，xxx就可以在被解析后去自动读取实例中定义的属性了。（学习视频分享：vuejs教程）

· 标签体：这个位置就是标签体，举个栗子

<h3 id="插值语法">插值语法</h3> [插值语法就是标签体]
<h1 id="Hello-name">Hello,{{name}}</h1> [Hello,{{name}}就是标签体 ]

· js表达式：可以产生一个值的，举几个例子就明白了

• name
• 1+1
• ok ? 'YES' : 'NO'

· js代码（语句）是一种特殊的js代码，会产生一个值 js代码（语句）：举几个比较常见的例子

• if(){}
• for(){}

2.指令语法

指令语法以v-开头，你应该不会陌生，包括v-for、v-on、v-bind......

它的作用是解析标签（包括标签属性，标签体内容，绑定事件），功能就非常强大了，我们这里举个v-bind的使用案例，它是用来绑定属性的，v-on则是用于绑定事件：

<div id="app">
            <h3 id="插值语法">插值语法</h3>
            <h1 id="Hello-name">Hello,{{name}}</h1>
            <h3 id="指令语法">指令语法</h3>
            <a v-bind:href="url">点我点我！</a>
            <li v-for="(item,index) in student.name">
                <label>{{index+1}}. {{item.toUpperCase() }}</label>
            </li>
        </div>

        <script >
            new Vue({
                el:&#39;#app&#39; ,
                data:{
                    name:&#39;三年二班&#39;,
                    url:"https://www.baidu.com",
                    student:{
                        name:["Sam","Bob","Alice"]
                    }
                }
            })

结果如下图所示：

这里的v-bind:href="url"，双引号的内容也要写成js表达式，v-bind将href属性和url进行了绑定，这样就可以正确的读取data中url属性https://www.baidu.com。

注意：如果不加v-bind，写成href="url"，那此时双引号里的内容就编程了字符串，给hrefjs-Ausdruck

sein, xxx kann die in der Instanz definierten Attribute nach dem Parsen automatisch lesen. (Teilen von Lernvideos: vuejs Tutorial

)· Tag-Körper : Diese Position ist der Tag-Körper, zum Beispiel

rrreee

·js-Ausdruck

: Es kann einen Wert generieren, geben Sie einfach ein paar Beispiele zum Verständnis an

Name
• 1+ 1
  ok ? 'JA' : 'NEIN'

• · js-Code (Anweisung)
ist eine spezielle Art von js-Code, der einen Wert erzeugt js-Code (Anweisung): Nennen Sie einige gängige Beispiele

if(){}

for(){}

2 Anweisungssyntax🎜 🎜🎜 Die Anweisungssyntax beginnt mit v- und sollte Ihnen vertraut sein, einschließlich v-for, v-on, v-bind...🎜🎜Seine Funktion besteht darin, Tags zu analysieren (einschließlich Tag-Attribute, Tag (Textkörperinhalt, Bindungsereignisse) ist die Funktion sehr leistungsfähig. Hier geben wir einen Anwendungsfall von v-bind, der zum Binden von Attributen verwendet wird um Ereignisse zu binden: 🎜rrreee🎜Das Ergebnis ist wie folgt: 🎜🎜🎜🎜Hier v-bind:href="url" muss der Inhalt in doppelten Anführungszeichen auch als js-Ausdruck geschrieben werden, v- bind bindet das Attribut href und url, sodass das URL-Attribut https in den Daten korrekt gelesen werden kann ://www.baidu.com . 🎜🎜Hinweis: Wenn Sie v-bind nicht hinzufügen und es als href="url" schreiben, wird der Inhalt in den doppelten Anführungszeichen in eine Zeichenfolge programmiert. hrefZuweisung geben. 🎜🎜🎜🎜 2. Die Beziehung zwischen Containern und Instanzen 🎜🎜🎜🎜🎜🎜🎜Die Beziehung zwischen Containern und Instanzen ist 1:1, das heißt, eine Instanz kann nur an einen Container gebunden werden : 🎜 🎜🎜🎜1 Container mit der ID von App, 2 Instanzen mit der El von App: Auf diese Weise wird nach dem Parsen des Namens im Container nur das Datenattribut aus der ersten Instanz gelesen🎜🎜🎜🎜2 ID des App-Containers, 1 Instanz von el ist App: Der Container hinter dem Codesegment wird nicht analysiert. Im tatsächlichen Entwicklungsszenario gibt es nur eine Vue-Instanz, da der Code zusammen mit der Komponente erstellt wird . , sodass der Code in der Instanz nicht besonders kompliziert ist. 🎜🎜 (Lernvideo-Sharing: 🎜Web-Frontend🎜)🎜

Das obige ist der detaillierte Inhalt vonLernen Sie die Vorlagensyntax in Vue kennen und sprechen Sie über die Beziehung zwischen Containern und Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!