V-Text
V-Text wird hauptsächlich zum Aktualisieren von Textinhalten verwendet, die dem Textattribut von JS entsprechen können.
<span v-text="text"></span>
// 等同于下方语句：
<span>{{text}}</span>Nach dem Login kopieren
v-html
Die Methode mit doppelten Klammern interpretiert die Daten als einfachen Text, nicht als HTML. Um echtes HTML auszugeben, können Sie den Befehl v-html verwenden. Es entspricht der innerHtml-Eigenschaft von JS.
Hinweis: Der Inhalt wird als normales HTML eingefügt – er wird nicht als Vue-Vorlage kompiliert.
<div v-html="html"></div>
Nach dem Login kopieren
v-show
entspricht der CSS-Anzeigeattributumschaltung der Einstellungen „Keine“ und „Blockieren“.
<div v-show="isShow">hello world</div>
Nach dem Login kopieren
Nach dem Login kopieren
v-if
v-if kann bedingtes Rendering implementieren, um Elemente basierend auf den wahren und falschen Bedingungen des Ausdruckswerts zu rendern.
<div v-show="isShow">hello world</div>
Nach dem Login kopieren
Nach dem Login kopieren
Der obige Code: Wenn isShow falsch ist, wird das div gerendert, andernfalls wird es nicht gerendert.
Hinweis:
v-if muss von v-show unterschieden werden. Die Elemente von v-show werden immer im Dom gerendert und gespeichert. Es wird lediglich das Anzeigeattribut von CSS geändert.
v-if hat einen höheren Switching-Overhead.
v-show hat einen höheren anfänglichen Rendering-Overhead.
Wenn Sie also sehr häufig wechseln möchten, ist es besser, v-show zu verwenden. Wenn sich die Bedingungen während der Laufzeit wahrscheinlich nicht ändern, ist es besser, v-if zu verwenden.
v-else
v-else wird mit v-if verwendet und muss auf v-if oder v-else-if folgen, sonst funktioniert es nicht.
Ähnlich wie bei JS, wenn .. sonst.
<div v-if="isSow">值为true的时候显示的内容</div>
<div v-else>值为false的时候显示的内容</div>
Nach dem Login kopieren
v-else-if
v-else-if fungiert als else-if-Block von v-if und kann mehrfach in einer Kette verwendet werden. Ähnlich wie bei JS if .. else if .. else
<div v-if="type==='A'">
A
</div>
<div v-if="type==='B'">
B
</div>
<div v-if="type==='C'">
C
</div>
<div v-else>
Not A,B,C
</div>
Nach dem Login kopieren
v-for
verwendet die v-for-Anweisung zum Rendern durch Durchlaufen des Arrays.
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
<script>
new Vue({
el: '#app',
data: {
items: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
// 补充：
// 也可以自行指定参数，最多可以接受3个参数
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
// 迭代对象
<ul>
<li v-for="value in object">
{{ index }}. {{ key }} : {{ value }}
</li>
// 迭代整数
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>Nach dem Login kopieren
v-on
Bind-Ereignis-Listener. Der Ereignistyp wird durch Parameter angegeben. Der Ausdruck kann der Name einer Methode oder einer Inline-Anweisung sein und kann weggelassen werden, wenn keine Modifikatoren vorhanden sind.
v-on kann auch als „@“ abgekürzt werden, zum Beispiel:
v-on="show" kann abgekürzt werden als: @show
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>Nach dem Login kopieren
Sie können auch Modifikatoren wie folgt verwenden:
.stop - Aufrufereignis. stopPropagation().
.prevent – ruft event.preventDefault() auf.
.capture – Verwenden Sie den Aufnahmemodus, wenn Sie Ereignis-Listener hinzufügen.
.self – Der Rückruf wird nur ausgelöst, wenn das Ereignis von dem Element selbst ausgelöst wird, an das der Listener gebunden ist.
.{keyCode |. keyAlias} – Löst einen Rückruf nur aus, wenn das Ereignis von einem bestimmten Schlüssel ausgelöst wird.
.native – Hören Sie sich native Ereignisse des Komponentenstammelements an.
.once – löst nur einmal einen Rückruf aus.
.left – wird nur ausgelöst, wenn die linke Maustaste geklickt wird.
.right – wird nur ausgelöst, wenn die rechte Maustaste geklickt wird.
.middle – wird nur ausgelöst, wenn die mittlere Maustaste geklickt wird.
.passive – Fügen Sie einen Listener im Modus {passiv: true } hinzu.
v-bind
Binden Sie eine oder mehrere Eigenschaften oder eine Komponenten-Requisite dynamisch an einen Ausdruck. Wird häufig zum dynamischen Binden von Klassen und Stilen verwendet. Und href usw.
kann abgekürzt werden als: „:“, wie zum Beispiel:
v-bind:class=" isActive : 'active' :' ' ", kann abgekürzt werden als: :class=" isActive : 'active' :' ' „
<div v-bind:class=" isActive : 'active' :' ' "></div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive : true,
}
})
</script>
//渲染结果为： <div class="active"></div>Nach dem Login kopieren
Binden Sie mehrere Klassen wie folgt:
<div v-bind:class="[ isActive : 'active' :' ' , isError: 'error' :' ' ]">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive : true,
isError: true,
}
})
</script>
//渲染结果为： <div class="active error"></div>Nach dem Login kopieren
Weitere Beispiele finden Sie im Code unten für Details:
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>Nach dem Login kopieren
v-model
Erstellen Sie eine bidirektionale Bindung für Formularsteuerelemente oder Komponenten.
V-Modell ignoriert die Anfangswerte der Wert-, Prüf- und ausgewählten Attribute aller Formularelemente. Weil es Vue-Instanzdaten als spezifischen Wert auswählt.
<div id="app">
<input v-model="somebody">
<p>hello {{somebody}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
somebody:'小明'
}
})
</script>Nach dem Login kopieren
Geben Sie in diesem Beispiel einen anderen Namen direkt in die Browsereingabe ein, und der Inhalt des p unten ändert sich direkt. Dies ist eine bidirektionale Datenbindung.
Verfügbare Modifikatoren:
.lazy – Standardmäßig synchronisiert das V-Modell den Wert und die Daten des Eingabefelds. Mit diesem Modifikator können Sie im Änderungsereignis auf Resynchronisation umschalten.
.number – Wandelt den Eingabewert des Benutzers automatisch in einen numerischen Typ um.
.trim – Filtert automatisch die vom Benutzer eingegebenen führenden und nachgestellten Leerzeichen.
Verwendung von Modifikatoren: wie zum Beispiel:
<input v-model.trim="somebody">
Nach dem Login kopieren
v-pre
v-pre wird hauptsächlich verwendet, um den Kompilierungsprozess dieses Elements und seiner Unterelemente zu überspringen. Kann verwendet werden, um das ursprüngliche Mustache-Tag anzuzeigen. Überspringen Sie eine große Anzahl von Knoten ohne Anweisungen, um die Kompilierung zu beschleunigen.
<div id="app">
<span v-pre>{{message}}</span> //这条语句不进行编译
<span>{{message}}</span>
</div>Nach dem Login kopieren
Diese Direktive wird verwendet, um für die Kompilierung bis zum Ende der zugehörigen Instanz auf dem Element zu bleiben.
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>Nach dem Login kopieren
Erklärung:
wird flackern, wenn die Seite geladen wird. Zuerst wird Folgendes angezeigt:
<div>
{{message}}
</div>Nach dem Login kopieren
und dann kompiliert:
<div>
hello world!
</div>
Nach dem Login kopieren
Die V-Cloak-Anweisung kann das obige Interpolationsflackerproblem wie folgt lösen: Was verwendet wird, ist, dass, wenn die Interpolation nicht geladen wird, der Inhalt durch das Stilattribut ausgeblendet wird.
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
<p v-cloak>++++++++ {{ msg }} ----------</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello',
}
})
</script>Nach dem Login kopieren
v-once
v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
<span v-once>This will never change:{{msg}}</span> //单个元素
<div v-once>//有子元素
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //组件
<ul>
<li v-for="i in list">{{i}}</li>
</ul>Nach dem Login kopieren
上面的例子中，msg,list即使产生改变，也不会重新渲染。
v-slot
提供具名插槽或需要接收 prop 的插槽。
可简写为：#
slot 和 scope-slot 是在 vue@2.6.x 之前的语法，而从 vue@2.6.0 开始，官方推荐我们使用 v-slot 来替代前两者。
使用具名插槽来自定义模板内容（vue@2.6.x已经废弃）
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>Nach dem Login kopieren
在向具名插槽提供内容的时候，我们可以在一个父组件的 元素上使用 slot 特性：
<base-layout>
<template slot="header">
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template slot="footer">
<p>Here's some contact info</p>
</template>
</base-layout>Nach dem Login kopieren
接下来，使用 v-slot 指令改写上面的栗子：
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>Nach dem Login kopieren
使用 # 简写代替 v-slot
<base-layout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here's some contact info</p>
</template>
</base-layout>Nach dem Login kopieren
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程教学！！
Das obige ist der detaillierte Inhalt vonAllgemeine Anweisungen in vue.js verstehen (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
