Maison > interface Web > js tutoriel > Résumé de quelques instructions simples de Vue.js

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

零到壹度
Libérer: 2018-04-21 11:16:49
original
1371 Les gens l'ont consulté

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>
Copier après la connexion

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
Copier après la connexion

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

eg:<p v-html="a"></p>
Copier après la connexion

Module de contrôle caché
v-if

 eg:<p v-if="isShow"></p>    -->isShow的值是布尔值,true:显示, false,隐藏
Copier après la connexion

v-show

eg:<p v-if="isShow"></p>    -->isShow的值是布尔值,true:显示, false,隐藏
Copier après la connexion

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>
Copier après la connexion

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

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

eg: <button @click="doSomething"></button>  简写形式
Copier après la connexion

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>
Copier après la connexion

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的变化, 参数是变化前后的值变化

    &#39;demo&#39;:function(val, oldVal){      console.log(val,  oldVal);  

    }

    }

  });
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal