Vue.js Handledning => Komma igång med Vue.js

Anmärkningar

Vue.js är ett snabbt växande ramverk för JavaScript , inspirerat av Angular.js , Reactive.js och Rivets.js som erbjuder en förenklad design av användargränssnittet, manipulering och djup reaktivitet.

Det beskrivs som en MVVM mönstrad ram, Model-View View-Model , som är baserad på begreppet tvåvägs bindande data till komponenter och vyer. Det är otroligt snabbt, överstiger hastigheterna för andra JS ramar i toppnivå och mycket användarvänlig för enkel integration och prototyper.

versioner

Version	Utgivningsdatum
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

"Hej världen!" Program

För att börja använda Vue.js , se till att skriptfilen ingår i din HTML. Lägg till exempel följande till din HTML.

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

Enkelt exempel

HTML-mall

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

JavaScript

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

Se en live-demo av detta exempel.

Du kanske också vill kolla in "Hello World" -exemplet från Vue.js.

Hello World in Vue 2 (JSX-sättet)

JSX är inte avsett att tolkas av webbläsaren. Det måste först transpileras till standard Javascript. För att använda JSX måste du installera plugin för babel babel-plugin-transform-vue-JSX

Kör kommandot nedan:

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

och lägg till den till din .babelrc så här:

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

Provkod med 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>
    )
  }
})

Genom att använda JSX kan du skriva kortfattade HTML / XML-liknande strukturer i samma fil som du skriver JavaScript-kod.

Grattis, du är klar :)

Hantering av användarinmatning

VueJS kan användas för att enkelt hantera användarinmatning också, och tvåvägsbindningen med v-modell gör det verkligen enkelt att ändra data enkelt.

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

Det är väldigt lätt att göra en tvåvägsbindning i VueJS med v-model modelldirektiv.

Kolla in ett liveexempel här.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

Vue.js Handledning
Komma igång med Vue.js

Sök…