如何介紹vue2.0

這篇文章給大家介紹如何介紹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還是比較好上手的

關于如何介紹vue2.0就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。