Vue.js開始使用Vue.js

Download Vue.js for free

備註

Vue.js是一個快速發展的JavaScript前端框架,受Angular.jsReactive.jsRivets.js ,提供簡單的用戶界面設計,操作和深度反應。

它被描述為MVVM圖案化框架, Model-View View-Model ,它基於對組件和視圖的雙向綁定數據的概念。它速度極快,超出了其他頂級JS框架的速度,並且非常易於用戶使用,易於集成和原型設計。

版本

發布日期
2.4.1 2017年7月13日
2.3.4 2017年6月8日
2.3.3 2017年5月9日
2.2.6 2017年3月26日
2.0.0 2016年10月2日
1.0.26 2016年6月28日
1.0.0 2015年10月26日
0.12.0 2015年6月12日
0.11.0 2014年11月6日

“你好,世界!”程序

要開始使用Vue.js ,請確保HTML中包含腳本文件。例如,將以下內容添加到HTML中。

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

簡單的例子

HTML模板

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

JavaScript的

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

查看此示例的實時演示


您可能還想查看Vue.js製作的“Hello World”示例

處理用戶輸入

VueJS也可用於輕鬆處理用戶輸入,使用v-model進行雙向綁定使得輕鬆更改數據變得非常容易。

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

使用v-model 指令在VueJS中進行雙向綁定非常容易。

在這裡查看一個實例

Vue 2中的Hello World(JSX方式)

JSX並不打算由瀏覽器解釋。它必須首先轉換為標準的Javascript。要使用JSX,您需要安裝babel babel-plugin-transform-vue-JSX

運行以下命令:

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

並將其添加到.babelrc 如下所示:

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

使用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>
    )
  }
})
 

通過使用JSX,您可以在編寫JavaScript代碼的同一文件中編寫簡潔的HTML / XML結構。

恭喜你,你做完了:)

Polyfill“webpack”模板