Vue使用

Vue.js 教程


Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計。
Vue 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學(xué)習(xí)起來非常簡單，本教程基于 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 的官網(wǎng)上直接下載 vue.min.js 并用 <script> 標(biāo)簽引入。
下載 Vue.js

2、使用 CDN 方法

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

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

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

BootCDN（國內(nèi)）

<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 構(gòu)建大型應(yīng)用時推薦使用 NPM 安裝：
# 最新穩(wěn)定版$ cnpm install vue

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

# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 這里需要進行一些配置，默認(rèn)回車即可
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 目錄結(jié)構(gòu)

目錄解析

目錄/文件 說明
build 最終發(fā)布的代碼存放位置。
config 配置目錄，包括端口號等。我們初學(xué)可以使用默認(rèn)的。
dist 打包后發(fā)布時文件目錄
node_modules npm 加載的項目依賴模塊
src 這里是我們要開發(fā)的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件
assets 放置一些圖片，如logo等。
components 目錄里面放了一個組件文件，可以不用。
App.vue 項目入口文件，我們也可以直接將組建寫這里，而不使用 components 目錄。
main.js 項目的核心文件。
static 靜態(tài)資源目錄，如圖片、字體等。
test 初始測試目錄，可刪除
.xxxx文件 這些是一些配置文件，包括語法配置，git配置等。
index.html 首頁入口文件，你可以添加一些 meta 信息或同統(tǒng)計代碼啥的。
package.json 項目配置文件。
README.md 項目的說明文檔，markdown 格式

在前面我們打開 APP.vue 文件，代碼如下（解釋在注釋中）：
src/APP.vue

<!-- 展示模板 -->
<template>
  <div id="app">
    ![](./assets/logo.png)
    <hello></hello>
  </div>
</template>
 
<script>
// 導(dǎo)入組件
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 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。
Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng)。
結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應(yīng)用到 DOM 操作上。

插值

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

<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 屬性中的值應(yīng)使用 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- 前綴的特殊屬性。
指令用于在表達式的值改變時，將某些行為應(yīng)用到 DOM 上。如下例子：
實例

<div id="app">
    <p v-if="seen">現(xiàn)在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

參數(shù)

參數(shù)在指令后以冒號指明。例如， v-bind 指令被用來響應(yīng)地更新 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>

修飾符

修飾符是以半角句號 . 指明的特殊后綴，用于指出一個指定應(yīng)該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()：

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

用戶輸入

在 input 輸入框中我們可以使用 v-model 指令來實現(xiàn)雙向數(shù)據(jù)綁定：
字符串反轉(zhuǎn)

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

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

縮寫

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

構(gòu)造器

每個 Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個 Vue 的根實例來啟動的：

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

屬性與方法

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

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

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

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) {
  // 這個回調(diào)將在 `vm.a`  改變后調(diào)用
})

Vue.js 條件與循環(huán)

條件判斷

v-if
v-else
v-else-if

顯示

v-show

循環(huán)語句

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

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 可以通過一個對象的屬性來迭代數(shù)據(jù)
你也可以提供第二個的參數(shù)為鍵名：

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

第三個參數(shù)為索引：

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

v-for 迭代整數(shù)
v-for 也可以循環(huán)整數(shù)

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

Vue.js 計算屬性

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

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

computed vs methods

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

Vue.js 樣式綁定

Vue.js class

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

數(shù)組語法

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

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

Vue.js style(內(nèi)聯(lián)樣式)

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

<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 可以使用數(shù)組將多個樣式對象應(yīng)用到一個元素上：

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

Vue.js 事件處理器

事件監(jiān)聽可以使用 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>

除了直接綁定到一個方法，也可以用內(nèi)聯(lián) 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 事件細節(jié)，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通過由點(.)表示的指令后綴來調(diào)用修飾符。

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

<!-- click 事件至少觸發(fā)一次，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 表單

這節(jié)我們?yōu)榇蠹医榻B Vue.js 表單上的應(yīng)用。
你可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。
v-model 會根據(jù)控件類型自動選取正確的方法來更新元素。
輸入框
實例中演示了 input 和 textarea 元素中使用 v-model 實現(xiàn)雙向數(shù)據(jù)綁定：

<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

在默認(rèn)情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù)，但你可以添加一個修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步：

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

如果想自動將用戶的輸入值轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 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 元素，封裝可重用的代碼。
組件系統(tǒng)讓我們可以用獨立可復(fù)用的小組件來構(gòu)建大型應(yīng)用，幾乎任意類型的應(yīng)用的界面都可以抽象為一個組件樹：

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

Vue.component(tagName, options)

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

<tagName></tagName>

Prop

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

Vue.js 自定義指令

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

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

Vue.js 路由

本章節(jié)我們將為大家介紹 Vue.js 路由。
Vue.js 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。
通過 Vue.js 可以實現(xiàn)多視圖的單頁Web應(yīng)用（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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容