Vue.js入學教程

時間 2019-11-09

原文原文鏈接

Vue.js是什麼
Vue.js 是用於構建交互式的 Web 界面的庫。
Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統，具備簡單、靈活的 API。
Vue.js(相似於view)是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，
vue採用自底向上增量開發的設計。vue的核心只關注視圖層，它不只易於上手，還便於與
第三方庫或即有項目整合。另外一方面，當與單文件組件和vue生態系統支持的庫結合使用時，
vue也徹底可以爲複雜的但也應用程序提供驅動。html

Vue.js 特色

簡潔： HTML 模板 + JSON 數據，再建立一個 Vue 實例，就這麼簡單。
數據驅動： 自動追蹤依賴的模板表達式和計算屬性。
組件化： 用解耦、可複用的組件來構造界面。
輕量： ~24kb min+gzip，無依賴。
快速： 精確有效的異步批量 DOM 更新。
模塊友好： 經過 NPM 或 Bower 安裝，無縫融入你的工做流。

若是你喜歡下面這些，那你必定會喜歡 Vue.js：vue

可擴展的數據綁定機制
原生對象即模型
簡潔明瞭的 API
組件化 UI 構建
多個輕量庫搭配使用

Vue.js 安裝

獨立版本

直接下載並用 <script> 標籤引入，Vue 會被註冊爲一個全局變量。webpack

Vue.js 官網下載地址：http://vuejs.org/guide/installation.htmlweb

咱們能夠在官網上直接下載生產版本應用在咱們項目中。vuex

NPM 安裝

在用 Vue.js 構建大型應用時推薦使用 NPM 安裝:npm

# 最新穩定版本 $ npm install vue # 最新穩定 CSP 兼容版本 $ npm install vue@csp # 開發版本（直接從 GitHub 安裝） $ npm install vuejs/vue#dev

雙向數據綁定

接下來咱們建立一個 view 層 HTML 文件：vueapp.htm，以及 model 層文件：vueapp.js，而後經過 vue.js（使用v-model這個指令）完成中間的底層邏輯，實現綁定的效果。改變其中的任何一層，另一層都會改變。app

vueapp.htm 文件代碼：框架

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>

vueapp.js 文件代碼：less

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入門教程