Résumé de quelques instructions simples de Vue.js

Le contenu présenté dans cet article est un résumé de quelques instructions simples de Vue.js, qui ont une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

.

Page HTML :

<p id="app">{{message}}</p>

Les données de la page sont les données dans data

Commande Template : contrôler le contenu du module

v-text (Contrôler le contenu textuel de l'élément)

eg： <p  v-text="a"></p>   --> a 是data中的a

v-html (Contrôler le contenu de l'élément, y compris structure interne)

eg:<p v-html="a"></p>

Module de contrôle caché
v-if

 eg:<p v-if="isShow"></p>    -->isShow的值是布尔值，true：显示， false，隐藏

v-show

eg:<p v-if="isShow"></p>    -->isShow的值是布尔值，true：显示， false，隐藏

liste de boucles de rendu v-for

eg: 
<ul>　　　　　<li v-for="item in items">　　　　　　　　　<p v-text="item.label"></p>　　
　　　　-->item是items里的每一个对象，items是data里的数组

　　　　　</li></ul>

liaison d'événement Définir v-on

eg:<button v-on:click="doSomething"></button>  click 可以是hover，focus等事件

eg: <button @click="doSomething"></button>  简写形式

Liaison d'attribut

v-bind   eg：<img  v-bind:src="imageSrc">    src属性赋值 imgSrc

（简写）eg:  <p :class="{red:isRed}"></p>    isRed:true:加上类red，false：不加类red

eg:  <p :class="[classA, classB]"></p>  绑定多个类名

eg:  <p :class="[classA,{classB: isB, classC: isC}]"></p>

Exemple :

js：var app = new Vue({

　　el:"#app",

　　data:{ 这里填写数据，以键值对的形式

   　　a:"heollo",

　　   demo:1,         items:[{label:"vue1"},{label:"vue2"}]

 　　　　},

　　methods:{这里可以写自己定义的函数，

　　　　doSomething:function(){

 　　　　　　console.log(this.a);   --> this指代的是vue的对象， a 是data里的a　　　　   }

　　　},

　　watch:{ 监听，监听demo的变化， 参数是变化前后的值变化

　　　　'demo':function(val, oldVal){　　　　　　console.log(val,  oldVal);　　

　　　　}

　　  }

  });

Recommandations associées :

Utilisation et exemples d'instructions personnalisées Vue.js

Démarrer avec Vue.js - commande intégrée v-html

Résumé des connaissances de Vue.js - commande

Remarques sur l'utilisation de vue.js

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!