Vue.jsRozpoczęcie pracy z Vue.js


Uwagi

Vue.js to szybko rozwijająca się platforma JavaScript , inspirowana Angular.js , Reactive.js i Rivets.js która oferuje uproszczone projektowanie interfejsu użytkownika, manipulację i głęboką reaktywność.

Jest opisany jako struktura MVVM , Model-View View-Model , który jest oparty na koncepcji dwukierunkowego wiązania danych do komponentów i widoków. Jest niesamowicie szybki, przewyższa prędkości innych frameworków JS najwyższej klasy i jest bardzo przyjazny dla użytkownika w celu łatwej integracji i prototypowania.

Wersje

Wersja Data wydania
2.4.1 2017-07-13
2.3.4 2017-06-08
2.3.3 2017-05-09
2.2.6 26.03.2017
2.0.0 02.10.2016
1.0.26 28.06.2016
1.0.0 26.10.2015
0.12.0 2015-06-12
0.11.0 06.11.2014

"Witaj świecie!" Program

Aby rozpocząć korzystanie z Vue.js , upewnij się, że plik skryptu znajduje się w kodzie HTML. Na przykład dodaj następujące elementy do kodu HTML.

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

Prosty przykład

Szablon HTML

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

JavaScript

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

Zobacz prezentację na żywo tego przykładu.


Warto również zapoznać się z przykładem „Hello World” autorstwa Vue.js.

Obsługa danych wejściowych użytkownika

VueJS może być również używany do łatwej obsługi danych wejściowych użytkownika, a dwukierunkowe wiązanie za pomocą modelu v sprawia, że zmiana danych jest naprawdę łatwa.

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

Bardzo łatwo jest wykonać dwukierunkowe wiązanie w VueJS za pomocą dyrektywy v-model .

Sprawdź przykład na żywo tutaj.

Hello World in Vue 2 (The JSX way)

JSX nie powinien być interpretowany przez przeglądarkę. Najpierw należy go przetłumaczyć do standardowego Javascript. Aby korzystać z JSX, musisz zainstalować wtyczkę dla babel babel-plugin-transform-vue-JSX

Uruchom poniższe polecenie:

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

i dodaj go do swojego .babelrc następujący sposób:

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

Przykładowy kod z 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>
    )
  }
})
 

Za pomocą JSX możesz pisać zwięzłe struktury podobne do HTML / XML w tym samym pliku, w którym piszesz kod JavaScript.

Gratulacje, gotowe :)