Répertoire d'articles
1. Interpolation de texte
1.1 Syntaxe de Moustache (doubles accolades { {}})
La forme la plus courante de liaison de données. HTMLLorsque le document est analysé, Vue Mustacheremplace automatiquement le nom de l'attribut dans la balise par la propertyvaleur attribute ( ) dans l'objet de données correspondant . Tant que la valeur de l'attribut ( property) dans l'objet de données est modifiée, le contenu au point d'interpolation sera mis à jour.
<div id="app">
<div>{
{
msg}}</div>
</div>
let vm = new Vue({
el:"#app",
data:{
msg:"hello world!"
}
})
1.2 texte v
L'étiquette ne sera pas reconnue et sera affichée sous forme de texte normal, par rapport aux v-htmlinstructions de la section suivante .
<div id="app">
<div>{
{
msg}}</div>
<div v-text='msg'></div>
<div v-text='html'></div>
</div>
let vm = new Vue({
el:"#app",
data:{
msg:"hello world!",
html:`<h1>这是一个HTML代码片段</h1>`
}
})
1,3 v-une fois
Ne chargez qu'une seule fois, lorsque les données changent, le contenu de l'interpolation ne sera pas mis à jour. Regardez la démo de l'animation:
<div id="app">
<div>{
{
msg}}</div>
<div v-text='msg'></div>
<div v-text='html'></div>
<div v-once>{
{
msg}}</div>
</div>
let vm = new Vue({
el:"#app",
data:{
msg:"hello world!",
html:`<h1>这是一个HTML代码片段</h1>`
}
})
2. Fragment HTML
La v-textcommande précédente HTMLaffichera le fragment sous forme de texte normal. Pour insérer réellement le HTMLfragment , vous devez utiliser la v-htmlcommande, qui peut reconnaître l' HTMLétiquette.
<div id="app">
<div v-text='html'></div>
<div v-html='html'></div>
</div>
let vm = new Vue({
el:"#app",
data:{
html:`<h1>这是一个HTML代码片段</h1>`
}
})
3. Attribut
3.1 Instruction v-bind
Chaque HTMLétiquette peut avoir class, id, styleet d' autres attributs de base, mais aussi notre fréquence relativement élevée de fonctionnement. Dans Vue, nous v-bindimplémentons la liaison de propriété via des instructions.
La méthode d'écriture spécifique est :, un exemple v-bind:属性="表达式"simple id:
<div v-bind:id="app"></div>
Surtout pour classet style, Vue.js a apporté des améliorations spéciales. En plus des chaînes, le type de résultat de l'expression peut également être un objet ou un tableau.
3.2 liaison de classe
Les éléments d'exploitation de classla liste et du style en ligne sont une demande courante pour la liaison de données. Pour classla liaison du nom de classe , nous espérons souvent qu'il est dynamiquement modifiable. La façon la plus simple de l'écrire est:
<div id="app">
<div v-bind:class="{title:isTitle,import:isImport}">重点标题</div>
</div>
let vm = new Vue({
el:'#app',
data:{
isTitle:true,
isImport:true
}
})
title, importLa prise d'effet des deux noms de classe dépend datades variables respectivement dans isTitleet isImport. Le nom de classe peut être ajouté dynamiquement en contrôlant la valeur booléenne de la variable.
Lorsqu'il classy a de nombreux noms de classes qui doivent être basculés dynamiquement dans la liste, Vue prend en charge l'encapsulation dans un objet à utiliser:
<div id="app">
<div v-bind:class="classObject">重点标题</div>
</div>
let vm = new Vue({
el:'#app',
data:{
classObject:{
title:true,
import:true
}
}
})
Le résultat du rendu est le même qu'avant. Il prend même en charge plusieurs de ces classobjets pour former un tableau:
<div id="app">
<div v-bind:class="[classObject,errorClass]">重点标题</div>
</div>
let vm = new Vue({
el:'#app',
data:{
classObject:{
title:true,
import:true
},
errorClass:{
errorText:true
}
}
})
3.3 reliure de style
La liaison de l'attribut de style d'étiquette est la même que celle du nom de classe et prend également en charge la forme d'objets ou de tableaux. Il convient de noter que la méthode d'écriture ici est très similaire à l'attribut de style CSS, mais ici vous devez utiliser camelCase (camelCase —— fontSize) ou une séparation en pointillé (kebab-case, n'oubliez pas de le mettre entre guillemets—— "font-size") pour nommer:
<div id="app">
<div v-bind:style='{color:textColor,fontSize: fontSize + "px"}'>一级目录</div>
</div>
let vm = new Vue({
el:'#app',
data:{
textColor:'red',
fontSize:28
}
})
L'opération la plus courante consiste à se lier directement à un objet de style:
<div class="app">
<div v-bind:style='{color:textColor,fontSize: fontSize + "px"}'>一级目录</div>
<div v-bind:style='firstTitle'>二级目录</div>
</div>
let vm = new Vue({
el:'#app',
data:{
textColor:'red',
fontSize:28,
firstTitle:{
color:"gray",
fontSize:"24px"
}
}
})
Vous pouvez également ajouter plusieurs objets de style à un tableau:
<div class="app">
<div v-bind:style='{color:textColor,fontSize: fontSize + "px"}'>一级目录</div>
<div :style='firstTitle'>二级目录</div>
<div :style='[firstTitle,secondTitle]'>三级目录</div>
</div>
new Vue({
el:'.app',
data:{
textColor:'red',
fontSize:28,
firstTitle:{
color:"#333",
fontSize:"24px"
},
secondTitle :{
color:"gray",
fontSize:"18px"
}
}
})
4. Expressions JavaScript simples
Nous avons toujours rendu une certaine valeur d'attribut directement entre les doubles accolades et, bien sûr, nous prenons également en charge les JavaScriptexpressions simples . Telles que les opérations numériques, les opérateurs ternaires ou les méthodes API simples:
{
{
number + 1 }}
{
{
ok ? 'YES' : 'NO' }}
{
{
message.split('').reverse().join('') }}
Peu importe la complexité du code, comme les instructions if-else, etc.:
{
{
if (true) {
return message } }}