Vue使用

Vue.js 教程

Vue.js（讀音 /vju?/, 類似于 view）是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層，采用自底向上增量開發的設計。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue 學習起來非常簡單，本教程基于 Vue 2.1.8 版本測試。

第一個HelloWord

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
?
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

Vue.js 安裝

1、獨立版本

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

2、使用 CDN 方法

以下推薦國外比較穩定的兩個 CDN，國內還沒發現哪一家比較好，目前還是建議下載到本地。
BootCDN（國內） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

BootCDN（國內）

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

嘗試一下 ?
unpkg（推薦）

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

嘗試一下 ?
cdnjs

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

嘗試一下 ?

3、NPM 方法

由于 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。

npm 版本需要大于 3.0，如果低于此版本需要升級它：
# 查看版本$ npm -v2.3.0#升級 npmcnpm install npm -g
在用 Vue.js 構建大型應用時推薦使用 NPM 安裝：
# 最新穩定版$ cnpm install vue

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

# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 這里需要進行一些配置，默認回車即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

進入項目，安裝并運行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

注意：Vue.js 不支持 IE8 及其以下 IE 版本

Vue.js 目錄結構

目錄解析

目錄/文件	說明
build	最終發布的代碼存放位置。
config	配置目錄，包括端口號等。我們初學可以使用默認的。
dist	打包后發布時文件目錄
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 文件，代碼如下（解釋在注釋中）：
src/APP.vue

<!-- 展示模板 -->
<template>
  <div id="app">
    ![](./assets/logo.png)
    <hello></hello>
  </div>
</template>
 
<script>
// 導入組件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 樣式代碼 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

接下來我們可以嘗試修改下初始化的項目，將 Hello.vue 修改為以下代碼：

src/commponents/Hello.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '歡迎來到菜鳥教程！'
    }
  }
}
</script>

Vue.js 模板語法

Vue.js 使用了基于 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。
Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。
結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。

插值

文本
數據綁定最常見的形式就是使用 {{...}}（雙大括號）的文本插值：
文本插值

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

Html

使用 v-html 指令用于輸出 html 代碼：

v-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 類的樣式，否則不使用該類：

表達式

Vue.js 都提供了完全的 JavaScript 表達式支持。

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-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>

修飾符

修飾符是以半角句號 . 指明的特殊后綴，用于指出一個指定應該以特殊方式綁定。例如，.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>

過濾器

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

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

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

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

縮寫

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>

Vue 實例

構造器

每個 Vue.js 應用都是通過構造函數 Vue 創建一個 Vue 的根實例來啟動的：

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

屬性與方法

每個 Vue 實例都會代理其 data 對象里所有的屬性：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 設置屬性也會影響到原始數據
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個回調將在 `vm.a`  改變后調用
})

Vue.js 條件與循環

條件判斷

v-if
v-else
v-else-if

顯示

v-show

循環語句

循環使用 v-for 指令。
v-for 指令需要以 item in items 形式的特殊語法， items 是源數據數組并且 item 是數組元素迭代的別名。
v-for 可以綁定數據到數組來渲染一個列表：

v-for 指令
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

v-for 迭代對象
v-for 可以通過一個對象的屬性來迭代數據
你也可以提供第二個的參數為鍵名：

v-for
<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

第三個參數為索引：

v-for
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

v-for 迭代整數
v-for 也可以循環整數

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

Vue.js 計算屬性

計算屬性關鍵詞: computed。
計算屬性在處理一些復雜邏輯時是很有用的。
可以看下以下反轉字符串的例子：

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

computed vs methods

我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基于它的依賴緩存，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。

Vue.js 樣式綁定

Vue.js class

class 與 style 是 HTML 元素的屬性，用于設置元素的樣式，我們可以用 v-bind 來設置樣式屬性。
Vue.js v-bind 在處理 class 和 style 時，專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。

數組語法

我們可以把一個數組傳給 v-bind:class ，實例如下：

<div v-bind:class="[activeClass, errorClass]"></div>

Vue.js style(內聯樣式)

1、我們可以在 v-bind:style 直接設置樣式：

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello</div>
</div>

2、也可以直接綁定到一個樣式對象，讓模板更清晰：

<div id="app"> <div v-bind:style="styleObject">hello</div</div>

3、v-bind:style 可以使用數組將多個樣式對象應用到一個元素上：

<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">hello</div></div>

Vue.js 事件處理器

事件監聽可以使用 v-on 指令：

v-on
<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>這個按鈕被點擊了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

除了直接綁定到一個方法，也可以用內聯 JavaScript 語句：

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
 
<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通過由點(.)表示的指令后綴來調用修飾符。

.stop
.prevent
.capture
.self
.once

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件至少觸發一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

全部的按鍵別名：

.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

Vue.js 表單

這節我們為大家介紹 Vue.js 表單上的應用。
你可以用 v-model 指令在表單控件元素上創建雙向數據綁定。
v-model 會根據控件類型自動選取正確的方法來更新元素。
輸入框
實例中演示了 input 和 textarea 元素中使用 v-model 實現雙向數據綁定：

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="編輯我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本輸入……"></textarea>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鳥教程\r\nhttp://www.runoob.com'
  }
})
</script>

修飾符

.lazy

在默認情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：

<input v-model.number="age" type="number">

這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型。

.trim

如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：

<input v-model.trim="msg">

Vue.js 組件

組件（Component）是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素，封裝可重用的代碼。
組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹：

注冊一個全局組語法格式如下：

Vue.component(tagName, options)

tagName 為組件名，options 為配置選項。注冊后，我們可以使用以下方式來調用組件：

<tagName></tagName>

Prop

prop 是父組件用來傳遞數據的一個自定義屬性。
父組件的數據需要通過 props 把數據傳給子組件，子組件需要顯式地用 props 選項聲明 "prop"：

Vue.js 自定義指令

除了默認設置的核心指令( v-model 和 v-show ), Vue 也允許注冊自定義指令。
下面我們注冊一個全局指令 v-focus, 該指令的功能是在頁面加載時，元素獲得焦點：

<div id="app">
    <p>頁面載入時，input 元素自動獲取焦點：</p>
    <input v-focus>
</div>
 
<script>
// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
  // 當綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 創建根實例
new Vue({
  el: '#app'
})
</script>

Vue.js 路由

本章節我們將為大家介紹 Vue.js 路由。
Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。
通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。
Vue.js 路由需要載入 vue-router 庫
中文文檔地址：vue-router文檔。

參考鏈接

菜鳥教程
官方文檔：http://vuejs.org/v2/guide/syntax.html
中文文檔: https://cn.vuejs.org/v2/guide/syntax.html

最后編輯于：2018.07.19 11:53:11

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 229,460評論 6贊 538
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,067評論 3贊 423
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 177,467評論 0贊 382
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,468評論 1贊 316
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,184評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,582評論 1贊 325
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,616評論 3贊 444
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,794評論 0贊 289
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,343評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,096評論 3贊 356
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,291評論 1贊 371
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,863評論 5贊 362
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,513評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,941評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,190評論 1贊 291
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,026評論 3贊 396
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,253評論 2贊 375

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频