Démarrer avec Vue.js

Téléchargez vue.js eBook

Remarques

Vue.js est un framework frontal en pleine expansion pour JavaScript , inspiré par Angular.js , Reactive.js et Rivets.js qui offre une conception, une manipulation et une réactivité approfondies de l'interface utilisateur.

Il est décrit comme une structure à Model-View View-Model MVVM , Model-View View-Model , qui repose sur le concept de liaison de données bidirectionnelle aux composants et aux vues. Il est incroyablement rapide, dépasse les vitesses des autres frameworks JS haut niveau et est très convivial pour faciliter l'intégration et le prototypage.

Versions

Version Date de sortie
2.4.1 2017-07-13
2.3.4 2017-06-08
2.3.3 2017-05-09
2.2.6 2017-03-26
2.0.0 2016-10-02
1.0.26 2016-06-28
1.0.0 2015-10-26
0.12.0 2015-06-12
0.11.0 2014-11-06

"Bonjour le monde!" Programme

Pour commencer à utiliser Vue.js , assurez-vous que le fichier de script est inclus dans votre code HTML. Par exemple, ajoutez ce qui suit à votre code HTML.

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
 

Exemple simple

Modèle HTML

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

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
 

Voir une démonstration en direct de cet exemple.


Vous voudrez peut-être aussi consulter l'exemple "Hello World" réalisé par Vue.js.

Gestion des entrées utilisateur

VueJS peut également être utilisé pour gérer facilement les entrées utilisateur, et la liaison bidirectionnelle à l'aide de v-model facilite grandement la modification des données.

HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    {{message}}
<input v-model="message"> 
</div>
 

JS:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
 

Il est très facile d'effectuer une liaison bidirectionnelle dans VueJS en utilisant la directive v-model .

Consultez un exemple en direct ici.

Bonjour tout le monde dans Vue 2 (la manière JSX)

JSX n'est pas destiné à être interprété par le navigateur. Il faut d'abord le transposer en Javascript standard. Pour utiliser JSX, vous devez installer le plugin pour babel babel-plugin-transform-vue-JSX

Exécutez la commande ci-dessous:

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
 

et l'ajouter à votre .babelrc comme ceci:

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}
 

Exemple de code avec VUE JSX:

import Vue from 'vue'  
import App from './App.vue'

new Vue({  
  el: '#app',
  methods: {
    handleClick () {
      alert('Hello!')
    }
  },
  render (h) {
    return (
      <div>
        <h1 on-click={this.handleClick}>Hello from JSX</h1>
        <p> Hello World </p>
      </div>
    )
  }
})
 

En utilisant JSX, vous pouvez écrire des structures HTML / XML concises dans le même fichier que vous écrivez du code JavaScript.

Félicitations, vous êtes fait :)

Stats

497 Contributors: 16
Wednesday, August 2, 2017
Sous licence: CC-BY-SA

Non affilié à Stack Overflow
Rip Tutorial: info@zzzprojects.com

Télécharger le eBook