Dieser Artikel führt Sie durch die Vorlagensyntax in Vue und stellt die Interpolationssyntax und die Befehlssyntax vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Vue verfügt über eine große Vorlagensyntax, die besonders einfach zu verwenden ist. Sie können eine von Vue definierte Vorlagensyntax in HTML schreiben, um Daten, Bindungsmethoden usw. schnell anzuzeigen. Dies ist einer der Gründe, warum Vue so schnell einsetzbar ist.
Lassen Sie uns zunächst verstehen, was eine Vorlage ist.
Die Vorlage ist die dynamische HTML-Seite, die etwas js-Syntaxcode enthält
Vues Vorlagensyntax ist in zwei Typen unterteilt, nämlich:
1. Interpolationssyntax:
{{xxx}}, xxx ist ein js-Ausdruck, und alle Attribute in den Daten können direkt gelesen und die Methode des Objekts aufgerufen werden{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性，可以调用对象的方法2、指令语法：
v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性v-????
【相关推荐：《vue.js教程》】
下面我们来介绍几个常用的指令语法。
v-bind:
功能：指定变化的属性值
完整写法
v-bind:xxx='yyy' // yyy会作为表达式解析执行
简洁写法
:xxx='yyy'
语法：v-bind:href ="xxx" 或简写为 :href ="xxx"
特点：数据只能从 data 流向页面
v-model语法：v-mode:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data
v-on:功能：绑定指定事件名的回调函数
完整写法
v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
简洁写法
@click='xxx' @keyup='xxx' @keyup.enter='xxx'
v-text
作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html
1、作用：向指定节点中渲染包含html结构的内容。
2、与插值语法的区别：
v-html会替换掉节点中所有的内容，{{xx}}则不会。v-html可以识别html结构。3、严重注意：v-html有安全性问题！！！！
v-html，永不要用在用户提交的内容上！<body>
<div id='app'>
<h2>1. 大括号表达式</h2>
<p>{{msg}}</p> <!--textContent -->
<p>{{msg.toUpperCase()}}</p>
<p v-html="msg"></p> <!--innerHTML -->
<p v-text="msg"></p> <!--textContent -->
<p v-text="msg.toUpperCase()"></p>
<h2>2. 指令一： 强制数据绑定</h2>
<img src="imgUrl" alt="Vue"> <!--无法显示图片，没有识别成js表达式 -->
<img v-bind:src="imgUrl" alt="Vue"> <!--属性值识别成js表达式 -->
<img :src="imgUrl" alt="Vue">
<h2>3. 指令二： 绑定事件监听</h2>
<button v-on:click="test1">test1</button>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button> <!--可以传参数 -->
<button @click="test2(msg)">test2</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '<a href="http:www.baidu.com">I Will Back!</a>',
imgUrl: "https://cn.vuejs.org/images/logo.png"
},
methods: {
test1() {
alert('heheh');
},
test2(content){
alert(content);
}
}
})
</script>
</body>
移除标签删除
写法：
v-if="表达式" v-else-if="表达式"v-else="表达式"适用于：切换频率较低的场景。 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
添加样式隐藏（display: none）
写法：v-show="表达式"
js-Ausdruck in der Formel
: js-Code mit Rückgabewert, nicht 🎜js-Anweisung 🎜🎜🎜🎜 2. Anweisungssyntax: 🎜🎜🎜 Funktion: wird zum Parsen von Tags verwendet (einschließlich: Tag-Attribute, Tag-Textinhalt, Bindungsereignisse ...) .)🎜🎜Beispiel:v-bind:href="xxx" oder abgekürzt als :href="xxx", xxx muss auch einen js-Ausdruck schreiben und kann sein Lesen Sie direkt alle Attribute in Daten🎜🎜Hinweis: Es gibt viele Anweisungen in Vue und die Formen sind: v-????🎜🎜🎜[Verwandte Empfehlungen: "vue.js-Tutorial》】🎜🎜Lassen Sie uns unten einige gängige Befehlssyntax vorstellen. 🎜v-bind: 🎜🎜🎜Funktion: Geben Sie den geänderten Attributwert an🎜🎜🎜Vollständige Schreibmethode🎜<body>
<div id="demo">
<p v-if="ok">成功了</p> <!-- 移除标签删除 -->
<p v-else>失败了</p>
<p v-show="ok">又成功了</p> <!-- 添加样式隐藏 -->
<p v-show="!ok">又失败了</p>
<button @click="ok = !ok">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
ok: false,
}
})
</script>
</body>v- bind:href ="xxx" oder abgekürzt als :href ="xxx"🎜🎜🎜🎜Funktionen: Daten können nur von Daten zur Seite fließen🎜🎜🎜v-modelv- Modus: value="xxx" oder abgekürzt als v-model="xxx" 🎜🎜🎜🎜Eigenschaften: Daten können nicht nur von Daten zu Seite, sondern auch von Seite zu Daten fließen 🎜🎜🎜< h1 data-id="heading-4">3. Befehlssyntax: Ereignis-Listener binden v-on:🎜🎜🎜Funktion: Rückruffunktion des angegebenen Ereignisnamens binden🎜🎜 🎜Vollständige Schreibmethode🎜 rrreee🎜Prägnantes Schreiben🎜rrreeev-text🎜v-text ersetzt den Inhalt im Knoten, {{xx}} jedoch nicht. 🎜🎜🎜🎜v-html🎜🎜1. Rendern Sie Inhalte, die eine HTML-Struktur enthalten, in den angegebenen Knoten. 🎜🎜2. Der Unterschied zur Interpolationssyntax: 🎜🎜🎜(1).v-html ersetzt den gesamten Inhalt im Knoten, {{xx}} jedoch nicht treffen. 🎜🎜(2).v-html kann die HTML-Struktur identifizieren. 🎜🎜🎜3. Ernsthafte Achtung: v-html weist Sicherheitsprobleme auf! ! ! ! 🎜🎜🎜(1). Das dynamische Rendern von beliebigem HTML auf einer Website ist sehr gefährlich und kann leicht zu XSS-Angriffen führen. 🎜🎜(2). Verwenden Sie v-html immer für vertrauenswürdige Inhalte, niemals für vom Benutzer übermittelte Inhalte! 🎜🎜rrreee🎜🎜 v - if="expression" 🎜🎜v-else-if="expression"🎜🎜v-else="expression"🎜🎜Anwendbar zu: Szenarien mit geringer Schalthäufigkeit.
Features: Nicht angezeigte DOM-Elemente werden direkt entfernt.
Hinweis: v-if kann zusammen mit v-else-if und v-else verwendet werden, die Struktur darf jedoch nicht „unterbrochen“ werden. 🎜🎜🎜Stilausblenden hinzufügen (Anzeige: keine)🎜🎜🎜🎜v-show🎜🎜🎜Schreibmethode: v-show="expression" Geeignet für: Szenen mit hoher Schalthäufigkeit.
Features: DOM-Elemente, die nicht angezeigt werden, wurden nicht entfernt, sie werden nur mithilfe von Stilen ausgeblendet🎜🎜[Bemerkungen] Bei Verwendung von v-if kann das Element möglicherweise nicht abgerufen werden, aber es kann definitiv mit v-show abgerufen werden. 🎜v-if是控制元素是否加载到页面上（有性能开销） v-show是控制元素的显示与隐藏 （初始创建时加载一次）
<body>
<div id="demo">
<p v-if="ok">成功了</p> <!-- 移除标签删除 -->
<p v-else>失败了</p>
<p v-show="ok">又成功了</p> <!-- 添加样式隐藏 -->
<p v-show="!ok">又失败了</p>
<button @click="ok = !ok">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
ok: false,
}
})
</script>
</body>
一些常用的指令
v-text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show : 通过控制display样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强制绑定解析表达式, 可以省略v-bindv-model : 双向数据绑定ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }更多编程相关知识，请访问：编程入门！！
Das obige ist der detaillierte Inhalt vonEine eingehende Analyse der Vorlagensyntax in Vue: Interpolation und Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
