Looking for vue.js Answers? Try Ask4KnowledgeBase
Looking for vue.js Keywords? Try Ask4Keywords

Vue.jsKomma 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.

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.

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