Préface
Vue.js est une bibliothèque d'interface Web basée sur les données. Vue.js se concentre uniquement sur les calques de vue et peut être facilement intégré à d'autres bibliothèques. Le code n'est que 24 Ko après la compression.
Le code suivant est l'exemple le plus simple de Vue.js. Lorsque le contenu dans l'entrée change, le contenu du nœud P changera en conséquence.
<! - html -> <div id = "Demo"> <p> {{message}} </p> <input v-model = "message"> </ div> new Vue ({el: '#demo', data: {message: 'bonjour vue.js!'}})Syntaxe de base de Vue.js
Insérer le texte
<span> Message: {{text}} </span>Insérez du texte au format HTML et affichez-le au format HTML sur la page
<span> Message: {{{html}}} </span>Le contenu ne suit pas les changements de données
<span> Message: {{* text}} </span>Lier les données sur les propriétés
<div id = "item - {{id}}"> </div>En utilisant des expressions JS dans {{}}
{{nombre + 1}} {{ok? 'Oui': 'Non'}} {{message.split (''). Reverse (). JOIN ('')}}En utilisant des instructions JS dans {{}}
{{var a = 1}} {{if (ok) {return message}}}Si commande
<p V-if = "Greeting"> Bonjour! </p> Ici, la directive V-IF supprimera / inséra l'élément <p> en fonction de l'authenticité de la valeur de salutation d'expression.
Directive HREF
<a V-Bind: href = "url"> </a> ou <a href = "{{url}}"> </a>Cliquez sur la commande
<a v-on: click = "dosomething">
Entrez la commande
<entrée v-model = "newtodo" v-on: keyup.enter = "addtodo">
Abréviation
en V
<! - Syntaxe complète -> <A V-Bind: href = "url"> </a> <! - Abréviation -> <a: href = "url"> </a> <! - Syntaxe complète -> <Button V-Bind: Disabled - SomeDamicCondition "> Button </ / bouton> <! : Disabled = "SomedynAmicCondition"> Button </fontificateur>
V-on
<! - Syntaxe complète -> <a v-on: click = "dosomething"> </a> <! - Abréviation -> <a @ click = "Dosomething"> </a>
Résumer
Les expressions dans les modèles sont très pratiques, mais elles ne sont en fait utilisées que pour des opérations simples. Le modèle consiste à décrire la structure de la vue. Mettre trop de logique dans un modèle peut rendre le modèle trop lourd et difficile à maintenir. C'est pourquoi Vue.js restreint les expressions de liaison à une expression. Si plusieurs expression sont nécessaires, les propriétés calculées doivent être utilisées. L'éditeur mettra à jour comment utiliser les attributs calculés plus tard. Amis intéressés, veuillez continuer à faire attention à wulin.com.