Vue.js Samouczek => Rozpoczę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.

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

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.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

Vue.js Samouczek
Rozpoczęcie pracy z Vue.js

Szukaj…