v-text
v-text est principalement utilisé pour mettre à jour textContent, qui peut être équivalent à l'attribut text de JS.
<span v-text="text"></span>
// 等同于下方语句：
<span>{{text}}</span>v-html
La méthode des doubles accolades interprétera les données comme du texte brut, pas du HTML. Afin de générer du vrai HTML, vous pouvez utiliser la commande v-html. C'est équivalent à la propriété innerHtml de JS.
Remarque : le contenu est inséré au format HTML normal - ne sera pas compilé en tant que modèle Vue.
<div v-html="html"></div>
v-show
équivaut à changer les paramètres "aucun" et "bloquer" de l'attribut d'affichage CSS.
<div v-show="isShow">hello world</div>
v-if
v-if peut implémenter le rendu conditionnel. Vue rendra les éléments en fonction des conditions vraies et fausses de l'expression. valeur. .
<div v-show="isShow">hello world</div>
Le code ci-dessus, si isShow est faux, le div est rendu, sinon il n'est pas rendu.
Remarque :
v-if doit être distingué de v-show. Les éléments de v-show seront toujours rendus et enregistrés dans le dom. Il change simplement l'attribut d'affichage de. css.
v-if a une surcharge de commutation plus élevée.
v-show a une surcharge de rendu initiale plus élevée.
Donc, si vous souhaitez changer très fréquemment, il est préférable d'utiliser v-show ; s'il est peu probable que les conditions changent au moment de l'exécution, il est préférable d'utiliser v-if ;
v-else
v-else s'utilise avec v-if, il doit suivre v-if ou v-else -if après , sinon cela n'a aucun effet.
Similaire à celui de JS if.. else.
<div v-if="isSow">值为true的时候显示的内容</div> <div v-else>值为false的时候显示的内容</div>
v-else-if
v-else-if agit comme le bloc else-if de v-if et peut être utilisé dans une chaîne à plusieurs reprises. Semblable à 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>
v-for
Utilisez l'instruction v-for pour effectuer le rendu en parcourant le tableau .
<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>v-on
Lier l'écouteur d'événement. Le type d'événement est spécifié par des paramètres. L'expression peut être le nom d'une méthode ou d'une instruction en ligne et peut être omise s'il n'y a aucun modificateur.
v-on peut également être abrégé en "@", tel que :
v-on="show" peut être abrégé en : @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>Vous pouvez également utiliser des modificateurs , comme suit :
.stop - appelle event.stopPropagation().
.prevent - appelle event.preventDefault().
.capture - Utilisez le mode capture lors de l'ajout d'écouteurs d'événements.
.self - Le rappel n'est déclenché que si l'événement est déclenché à partir de l'élément lui-même auquel l'auditeur est lié.
.{keyCode | keyAlias} - Le rappel n'est déclenché que lorsque l'événement est déclenché à partir d'une clé spécifique.
.native - écoute les événements natifs sur l'élément racine du composant.
.once - déclenche le rappel une seule fois.
.left - se déclenche uniquement lorsque le bouton gauche de la souris est cliqué.
.right - déclenché uniquement lorsque le bouton droit de la souris est cliqué.
.middle - déclenché uniquement lorsque le bouton central de la souris est cliqué.
.passive - ajouter un écouteur en mode {passif : true}
v-bind
Lier dynamiquement un ou plusieurs attributs, ou un accessoire de composant à une expression. Souvent utilisé pour lier dynamiquement des classes et des styles. Et href etc.
peut être abrégé en : " : ", tel que :
v-bind:class=" isActive : 'active' :' ' ", peut être abrégé en : :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>lie plusieurs classes, comme suit :
<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>Autres instances, voir le code ci-dessous pour plus de détails :
<!-- 绑定一个属性 -->
<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>v-model
crée une liaison bidirectionnelle sur les contrôles ou les composants de formulaire.
v-model ignorera les valeurs initiales des attributs value, vérifié et sélectionné de tous les éléments du formulaire. Parce qu'il sélectionne les données d'instance Vue comme valeur spécifique.
<div id="app">
<input v-model="somebody">
<p>hello {{somebody}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
somebody:'小明'
}
})
</script>Dans cet exemple, entrez un autre nom directement dans la saisie du navigateur, et le contenu du p ci-dessous changera directement en conséquence. Il s'agit d'une liaison de données bidirectionnelle.
Modificateurs disponibles :
.lazy - Par défaut, v-model synchronise la valeur et les données de la zone de saisie. Vous pouvez utiliser ce modificateur pour passer à la resynchronisation dans l'événement de changement.
.number - Convertit automatiquement la valeur saisie par l'utilisateur en un type numérique
.trim - Filtre automatiquement les espaces de début et de fin saisis par l'utilisateur
Utilisation des modificateurs : tels que :
<input v-model.trim="somebody">
v-pre
v-pre est principalement utilisé pour sauter le processus de compilation de cet élément et de ses sous-éléments. Peut être utilisé pour afficher l’étiquette Moustache originale. Ignorez un grand nombre de nœuds sans instructions pour accélérer la compilation.
<div id="app">
<span v-pre>{{message}}</span> //这条语句不进行编译
<span>{{message}}</span>
</div>Cette directive permet de rester sur l'élément jusqu'à la fin de l'instance associée pour compilation.
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script> Explication :
clignotera lorsque la page sera chargée. Elle affichera d'abord :
<div>
{{message}}
</div>puis compilera en :
<div> hello world! </div>
Le v-. La commande cloak peut résoudre le problème de scintillement de l'interpolation ci-dessus, comme suit : En fait, ce qui est utilisé est de masquer le contenu via l'attribut style lorsque l'interpolation n'est pas chargée.
<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>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>上面的例子中，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>在向具名插槽提供内容的时候，我们可以在一个父组件的 元素上使用 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>接下来，使用 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>使用 # 简写代替 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>相关推荐：
更多编程相关知识，请访问：编程教学！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Pourquoi vue.js signale-t-il une erreur ?
Quelles sont les utilisations des slots vue.js ?
Comment sauter avec des paramètres dans vue.js
Marché ondulation aujourd'hui
tu protèges le pilote
Comment exporter un projet dans phpstorm
Comment faire une image ronde en ppt
Que signifie l'accès au réseau refusé au wifi ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
