Vue.jsIniziare con Vue.js


Osservazioni

Vue.js è un framework front-end in crescita rapida per JavaScript , ispirato ad Angular.js , Reactive.js e Rivets.js che offre una progettazione semplicistica dell'interfaccia utente, manipolazione e reattività profonda.

È descritto come un framework modellato MVVM , Model-View View-Model , che si basa sul concetto di associazione dei dati di binding a componenti e viste. È incredibilmente veloce, supera la velocità di altri framework JS alto livello e è molto intuitivo per una facile integrazione e prototipazione.

Versioni

Versione Data di rilascio
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

"Ciao mondo!" Programma

Per iniziare a utilizzare Vue.js , assicurati di avere il file di script incluso nel codice HTML. Ad esempio, aggiungi quanto segue al tuo codice HTML.

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

Semplice esempio

Modello HTML

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

JavaScript

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

Guarda una demo dal vivo di questo esempio.


Potresti anche voler controllare l'esempio "Hello World" creato da Vue.js.

Gestire l'input dell'utente

VueJS può essere utilizzato per gestire facilmente anche l'input dell'utente, e l'associazione bidirezionale con v-model rende davvero facile cambiare i dati facilmente.

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!'
  }
})
 

È molto facile eseguire un binding a due vie in VueJS usando la direttiva v-model .

Guarda un esempio dal vivo qui.

Hello World in Vue 2 (The JSX way)

JSX non è pensato per essere interpretato dal browser. Deve essere prima trasposto in Javascript standard. Per usare JSX devi installare il plugin per babel-plugin-transform-vue-JSX

Esegui il comando qui sotto:

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

e aggiungilo al tuo .babelrc questo modo:

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

Codice di esempio con 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>
    )
  }
})
 

Usando JSX puoi scrivere concise strutture HTML / XML nello stesso file di cui scrivi il codice JavaScript.

Congratulazioni, hai fatto :)