Vue.js Tutorial => Iniziare 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.

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

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.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

Vue.js Tutorial
Iniziare con Vue.js

Ricerca…