Vue.js Zelfstudie => Aan de slag met Vue.js

Opmerkingen

Vue.js is een snelgroeiend front-end framework voor JavaScript , geïnspireerd door Angular.js , Reactive.js en Rivets.js dat een simplistisch gebruikersinterfaceontwerp, manipulatie en diepe reactiviteit biedt.

Het wordt beschreven als een MVVM patroonkader, Model-View View-Model , dat is gebaseerd op het concept van tweerichtingsbindende gegevens aan componenten en aanzichten. Het is ongelooflijk snel, overtreft snelheden van andere topklasse JS frameworks en is zeer gebruiksvriendelijk voor eenvoudige integratie en prototyping.

versies

Versie	Publicatiedatum
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

"Hallo Wereld!" Programma

Zorg ervoor dat u het scriptbestand in uw HTML hebt opgenomen om Vue.js te gaan gebruiken. Voeg bijvoorbeeld het volgende toe aan uw HTML.

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

Eenvoudig voorbeeld

HTML-sjabloon

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

JavaScript

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

Bekijk een live demo van dit voorbeeld.

Misschien wilt u ook het voorbeeld "Hallo wereld" van Vue.js bekijken .

Hallo wereld in Vue 2 (op de JSX-manier)

JSX is niet bedoeld om door de browser te worden geïnterpreteerd. Het moet eerst worden omgezet in standaard Javascript. Om JSX te gebruiken, moet u de plug-in voor babel installeren babel-plugin-transform-vue-JSX

Voer het onderstaande commando uit:

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

en voeg het als volgt toe aan uw .babelrc :

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

Voorbeeldcode met 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>
    )
  }
})

Door JSX te gebruiken, kunt u beknopte HTML / XML-achtige structuren in hetzelfde bestand schrijven als u JavaScript-code schrijft.

Gefeliciteerd, je bent klaar :)

Omgaan met gebruikersinvoer

VueJS kan worden gebruikt om ook gemakkelijk gebruikersinvoer te verwerken, en de bidirectionele binding met behulp van v-model maakt het heel gemakkelijk om gegevens gemakkelijk te wijzigen.

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

Het is heel eenvoudig om een tweerichtingsbinding in VueJS te doen met behulp van de v-model modelrichtlijn.

Bekijk hier een live voorbeeld .

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

Vue.js Zelfstudie
Aan de slag met Vue.js

Zoeken…