vuejs2Aan de slag met vuejs2


Opmerkingen

Vue.js 2.X is een snel, lichtgewicht framework voor het bouwen van gebruikersinterfaces in Javascript. Het is in veel opzichten vergelijkbaar met Angular en React, en net zoals die bibliotheken kunnen worden gebruikt om alleen de view-laag (de V in MVC) te bieden voor een grotere toepassing, of (in combinatie met andere tools) om een complete single te maken -pagina webapplicaties.

Vue hanteert echter een meer minimale benadering dan Angular of React; het is meer afhankelijk van traditionele webtechnologieën (het maakt bijvoorbeeld JSX mogelijk, maar stimuleert templating in HTML) en het gebruik van externe bibliotheken als aanvulling op de kernfunctionaliteit. Dit geeft het een snellere leercurve dan veel andere frameworks, en stelt ontwikkelaars in staat hun voorkeurstools te blijven gebruiken om taken binnen Vue te volbrengen.

Webontwikkelaars die bekend zijn met andere front-end frameworks, zullen veel bekende functies in Vue vinden, van een componentgebaseerd paradigma en de virtuele DOM tot voorwaardelijke weergave met richtlijnen zoals v-if , v-show en v-hide . Deze functies worden gecombineerd met innovaties zoals sjablonen voor één pagina en berekende componenteigenschappen.

Vue 2.X behoudt 90% van de API van 1.X, met als belangrijkste wijzigingen het hernoemen van componentlevenscyclushaken en het verwijderen van ondersteuning voor instanties van fragmentcomponenten. Een migratiehulp is beschikbaar voor ontwikkelaars die willen upgraden van eerdere versies van Vue.

"Hallo Wereld!" Programma

Het is vergelijkbaar met Vue.js versie 1, versie 2 kan rechtstreeks worden ingesloten in een enkel HTML-bestand.
Zorg ervoor dat u het scriptbestand in de HTML hebt opgenomen om Vue.js2 in het html-bestand op te nemen. Gebruik bijvoorbeeld de volgende HTML. Het moet het Hello-bericht correct weergeven.

<div id="app">{{message}}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js2'
      }
    })
</script>
 

Zie een jsfiddle- demo voor dit voorbeeld.

Hallo wereld: Aan de slag met vue-cli

  1. Vue-cli installeren:

    npm install -g vue-cli
     
  2. start een project zoals:

     vue init <template> <project-name>
     

    waar <template> :

    1. webpack - Een complete Webpack + vue-loader setup met hot reload, linting, testen & css extractie.

    2. webpack-simple - Een eenvoudige Webpack + vue-loader setup voor snelle prototyping.

    3. browserify - Een complete Browserify + vueify-installatie met hot-reload, linting & unit-testen.

    4. browserify-simple - Een eenvoudige Browserify + vueify-instelling voor snelle prototyping.

    5. eenvoudig - De eenvoudigst mogelijke Vue-instelling in een enkel HTML-bestand

    Voor dit voorbeeld zal ik webpack

  3. De vue-cli laat je een reeks ja / nee-vragen doorlopen waarna je een project met steigers klaar hebt staan.

  4. cd in de projectmap, dit is de <project-name> in vue init <template> <project-name> en voer npm install .

  5. Na de installatie voert u npm run dev .

Uw hallo wereld applicatie is klaar!