Vue.js Tutoriel => Démarrer avec Vue.js

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.

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 :)

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.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

Vue.js Tutoriel
Démarrer avec Vue.js

Recherche…