Vue.js 教程
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-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>