Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建使用者介面的漸進式框架。

Vue 只關注檢視層， 採用自底向上增量開發的設計。

Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

Vue 學習起來非常簡單，本教程基於 Vue 2.1.8 版本測試。

Vue.js 安裝

1、獨立版本

我們可以在 Vue.js 的官網上直接下載 vue.min.js 並用 <script> 標籤引入。

https://vuejs.org/js/vue.min.js

3、NPM 方法

# 檢視版本
$ npm -v
2.3.0

#升級 npm
cnpm install npm -g


# 升級或安裝 cnpm
npm install cnpm -g
 

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

# 最新穩定版
$ cnpm install vue

命令列工具

Vue.js 提供一個官方命令列工具，可用於快速搭建大型單頁應用。

# 全域性安裝 vue-cli
$ cnpm install --global vue-cli

[[email protected]] link /usr/local/Cellar/node/11.2.0/bin/[email protected] -> /usr/local/Cellar/node/11.2.0/lib/node_modules/vue-cli/bin/vue

[[email protected]

] link /usr/local/Cellar/node/11.2.0/bin/[email protected] -> /usr/local/Cellar/node/11.2.0/lib/node_modules/vue-cli/bin/vue-init

[[email protected]] link /usr/local/Cellar/node/11.2.0/bin/[email protected] -> /usr/local/Cellar/node/11.2.0/lib/node_modules/vue-cli/bin/vue-list

# 建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
 

進入專案，安裝並執行：

$ cd my-project
$ cnpm install
$ cnpm run dev

npm run dev 報錯：getaddrinfo ENOTFOUND localhost和解決方法

sudo vim /private/etc/hosts

127.0.0.1 localhost

cnpm run dev

step6：點選最右側的【訪問連結】選項卡，在訪問連結面板中填寫埠號為：8080（和剛才配置檔案中的埠號一致），點選建立連結，即可點選生成的連結訪問我們剛剛編寫的程式碼，檢視 Vue.js 效果

目錄解析 

build  專案構建(webpack)相關程式碼

config  配置目錄，包括埠號等。我們初學可以使用預設的。

node_modules    npm 載入的專案依賴模組

src     這裡是我們要開發的目錄，基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案：

• assets: 放置一些圖片，如logo等。
• components: 目錄裡面放了一個元件檔案，可以不用。
• App.vue: 專案入口檔案，我們也可以直接將元件寫這裡，而不使用 components 目錄。
• main.js: 專案的核心檔案。

static 靜態資源目錄，如圖片、字型等。

test    初始測試目錄，可刪除

.xxxx檔案     這些是一些配置檔案，包括語法配置，git配置等。

index.html   首頁入口檔案，你可以新增一些 meta 資訊或統計程式碼啥的。

package.json  專案配置檔案。

README.md   專案的說明文件，markdown 格式

在前面我們開啟 APP.vue 檔案，程式碼如下（解釋在註釋中）：

 

vue 常見報錯問題

情況一：http://eslint.org/docs/rules/no-tabs  Unexpected tab character

解決方案：縮排是4個空格，而不是tab,設定indent

情況二 : $ npm run dev 執行報錯 

 解決方案：該問題是因為腳手架工具預設監聽的是8080埠，此時是8080埠被佔用情況導致的。

A.找出8080端口占用程序然後殺死

執行 $ lsof -i :8080

COMMAND PID  USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
httpd    79  root    6u  IPv6 0x16935b8002e27567      0t0  TCP *:http-alt (LISTEN)

執行sudo kill -9 79 

再執行 npm run dev,然後搭建成功.

B.修改config 配置

情況三： http://eslint.org/docs/rules/eol-last Newline required at end of file but not found

解決方案：結尾 需要空一行

情況四： http://eslint.org/docs/rules/no-tabs  Unexpected tab character

解決方案： 刪除行前空格

情況五： eslint-disable-next-line to ignore the next line

空多了一行就會報錯。直接把行刪除掉，最多隻能空一行

 

Vue.js 起步

每個 Vue 應用都需要通過例項化 Vue 來實現。

語法格式如下：

var vm = new Vue({
  // 選項
})

這意味著我們接下來的改動全部在以上指定的 div 內，div 外部不受影響。

接下來我們看看如何定義資料物件。

data 用於定義屬性，例項中有三個屬性分別為：site、url、alexa。

methods 用於定義的函式，可以通過 return 來返回函式值。

{{ }} 用於輸出物件屬性和函式返回值。

Vue.js 模板語法

插值

文字

資料繫結最常見的形式就是使用 {{...}}（雙大括號）的文字插值：

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

Html

使用 v-html 指令用於輸出 html 程式碼：

<div id="app"> <div v-html="message"></div> </div>

<script>

    new Vue({ el: '#app', data: { message: '<h1>菜鳥教程</h1>' } })

</script>

屬性

HTML 屬性中的值應使用 v-bind 指令。

以下例項判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：

<div id="app"> <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">

<br><br>

<div v-bind:class="{'class1': class1}"> v-bind:class 指令 </div> </div>

<script> new Vue({ el: '#app', data:{ class1: false } }); </script>

表示式

Vue.js 都提供了完全的 JavaScript 表示式支援。

<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">菜鳥教程</div> </div>

<script> new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } }) </script>

指令

指令是帶有 v- 字首的特殊屬性。

指令用於在表示式的值改變時，將某些行為應用到 DOM 上。如下例子：

<div id="app"> <p v-if="seen">現在你看到我了</p> </div>

<script> new Vue({ el: '#app', data: { seen: true } }) </script>

這裡， v-if 指令將根據表示式 seen 的值(true 或 false )來決定是否插入 p 元素。

 

引數

引數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：

<div id="app"> <pre><a v-bind:href="url">菜鳥教程</a></pre> </div>

<script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script>

 

在這裡 href 是引數，告知 v-bind 指令將該元素的 href 屬性與表示式 url 的值繫結。

另一個例子是 v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">

在這裡引數是監聽的事件名。

修飾符

修飾符是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

使用者輸入

在 input 輸入框中我們可以使用 v-model 指令來實現雙向資料繫結：

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

<script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試例項 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
</body>
</html>

 

按鈕的事件我們可以使用 v-on 監聽事件，並對使用者的輸入進行響應。

以下例項在使用者點選按鈕後對字串進行反轉操作：

<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反轉字串</button> </div>

<script> new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>

 

過濾器

Vue.js 允許你自定義過濾器，被用作一些常見的文字格式化。由"管道符"指示, 格式如下：

<!-- 在兩個大括號中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

過濾器函式接受表示式的值作為第一個引數。

以下例項對輸入的字串第一個字母轉為大寫：

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

<script>

new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })

</script>

過濾器可以串聯：

{{ message | filterA | filterB }}

過濾器是 JavaScript 函式，因此可以接受引數：

{{ message | filterA('arg1', arg2) }}

這裡，message 是第一個引數，字串 'arg1' 將傳給過濾器作為第二個引數， arg2 表示式的值將被求值然後傳給過濾器作為第三個引數。

縮寫

v-bind 縮寫

Vue.js 為兩個最為常用的指令提供了特別的縮寫：

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>