Vue.js入學教程
Vue.js是什麽
Vue.js 是用於構建交互式的 Web 界面的庫。
Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。
Vue.js(類似於view)是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，
vue采用自底向上增量開發的設計。vue的核心只關註視圖層，它不僅易於上手，還便於與
第三方庫或即有項目整合。另一方面，當與單文件組件和vue生態系統支持的庫結合使用時，
vue也完全能夠為復雜的但也應用程序提供驅動。
Vue.js 特點
- 簡潔： HTML 模板 + JSON 數據，再創建一個 Vue 實例，就這麽簡單。
- 數據驅動： 自動追蹤依賴的模板表達式和計算屬性。
- 組件化： 用解耦、可復用的組件來構造界面。
- 輕量： ~24kb min+gzip，無依賴。
- 快速： 精確有效的異步批量 DOM 更新。
- 模塊友好： 通過 NPM 或 Bower 安裝，無縫融入你的工作流。
如果你喜歡下面這些，那你一定會喜歡 Vue.js：
- 可擴展的數據綁定機制
- 原生對象即模型
- 簡潔明了的 API
- 組件化 UI 構建
- 多個輕量庫搭配使用
Vue.js 安裝
獨立版本
直接下載並用 <script> 標簽引入，Vue 會被註冊為一個全局變量。
Vue.js 官網下載地址：http://vuejs.org/guide/installation.html
我們可以在官網上直接下載生產版本應用在我們項目中。
NPM 安裝
在用 Vue.js 構建大型應用時推薦使用 NPM 安裝:
# 最新穩定版本
$ npm install vue
# 最新穩定 CSP 兼容版本
$ npm install [email protected]
# 開發版本（直接從 GitHub 安裝）
$ npm install vuejs/vue#dev
雙向數據綁定
接下來我們創建一個 view 層 HTML 文件：vueapp.htm，以及 model 層文件：vueapp.js，然後通過 vue.js（使用v-model這個指令）完成中間的底層邏輯，實現綁定的效果。改變其中的任何一層，另外一層都會改變。
vueapp.htm 文件代碼：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
vueapp.js 文件代碼：
new Vue({
el: ‘#app‘,
data: {
message: ‘菜鳥教程!‘
}
})
以上實例中 {{message}} 會根據輸入框 input 的改變而改變，如果你不想讓其變化可以修改為：
{{* message }}
同時還支持一些簡單的表達式：
<!-- 字符串連接 --> {{ message + ‘官網地址：www.runoob.com‘ }} <!-- 字符串反轉 --> {{ message.split(‘‘).reverse().join(‘‘) }}
列表輸出
列表輸出使用 v-for(v-for取代了1.0以前版本中的v-repeat) 這個指令就能完成:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> </div> <script> new Vue({ el: ‘#app‘, data: { todos: [ { text: ‘Learn JavaScript‘ }, { text: ‘Learn Vue.js‘ }, { text: ‘Build Something Awesome‘ } ] } }) </script> </body> </html>
條件判斷
在字符串模板中，如 Handlebars，我們得像這樣寫一個條件塊：
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}
在 Vue.js，我們使用 v-if 指令實現同樣的功能：
<h1 v-if="ok">Yes</h1>
也可以用 v-else 添加一個 "else" 塊：
<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
過濾器
與Linux中的管道類似，vue.js也使用的是|:
{{message | uppercase}}
這樣就能輸出message的大寫了,過濾器也能串聯在一起使用:
{{message | reverse | uppercase}}
這裏reverse並不是內建的過濾器，我們可以用Vue.filter自定義:
Vue.filter(‘reverse‘, function (value) {
return value.split(‘‘).reverse().join(‘‘)
})
補充
bulid--webpack的整個開發框架
config--webpack構建開發、測試、發布環境配置
dist--prod 發布之後的文件
src--當前所有項目文件都在其中
--assets-- 當前項目所有靜態文件(img字體less等)
--use-- 當前項目路由/use/以及其子路由頁面的展示
--components--當前項目所有組件(基礎組件、form組件、功能組件等)
--vuex-- 當前項目 所有組件 通信相關
Code
組件實現的代碼(其中包括了html、less、js)
轉載自Vue.js入門教程
Vue.js入學教程