簡單介紹一下vue2.0

Vue

Vue是用於構建用戶界面的漸進框架。做者尤雨熙特別強調它與其餘的框架不一樣，Vue是漸進式的框架，能夠逐步採用，沒必要一下就經過框架去重構項目。 另外Vue的核心庫只專一於視圖層，這樣就更容易與其餘庫或現有項目進行集成，也更靈活。

Vue在兼容性上不支持IE8如下版本的瀏覽器，用到了ECMAScript 5的功能，全部支持ECMAScript 5的瀏覽器都沒問題，像這些：

安裝

• 若是你已經熟悉並安裝webpack那能夠直接裝一個CLI版即命令行工具，快速方便。

$ npm install --global vue-cli  # 安裝 vue-cli。
$ vue init webpack my-project # 使用 "webpack" 模版建一個新項目。
$ cd my-project   
$ npm install   # 安裝依賴庫。
$ npm run dev   # 運行。

• 若是你想要最新的源碼本身編譯能夠到github上下載：

$ git clone https://github.com/vuejs/vue.git node_modules/vue
$ cd node_modules/vue
$ npm install
$ npm run build

• 若是隻是先學習一下，那推薦用npm安裝最新的穩定版本：

$ npm install vue

Hello World

vue的使用比較簡單，咱們能夠看幾個小例子，例如來個hello vue.js，經過構造函數建立一個實例：

<script>
var vm = new Vue({
  el: '#demo',
  data: {
    msg:'Hello vue.js!'
  }
})
</script>

在html文件中，經過簡單的模版語法作一個引用就能夠獲取數據了。

<div id="demo" >
  { { msg } }
</div>

效果是這樣的：

爲了讓用戶與咱們的應用程序進行交互，能夠經過使用v-on指令，處理用戶輸入。在vue.js中**v-**做爲指令的前綴,例如v-on(事件)、v-for(循環)、v-bind(綁定屬性)等。

html：

<div id="demo">
  <p>{{ msg }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

js：

var vm = new Vue({
  el: '#demo',
  data: {
    msg: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.msg = this.msg.split('').reverse().join('')
    }
  }
})

效果以下：

Vue還提供了v-model指令，使表單輸入和WEB應用之間的雙向綁定變得十分簡單：

html：

<div id="demo">
  <p>{{ msg }}</p>
  <input v-model="msg">
</div>

js：

var vm = new Vue({
  el: '#demo',
  data: {
    msg: 'Hello Vue!'
  }
})

效果以下：

vue仍是比較好上手的，更多關於vue的內容：

vue.js

vue實例渲染

Vue.js渲染模版

Vue.js內部實現了響應式計算框架

vuex 2.x

vuerouter 2.x