- VueJS 教程
- VueJS - 首頁
- VueJS - 概述
- VueJS - 環境搭建
- VueJS - 簡介
- VueJS - 例項
- VueJS - 模板
- VueJS - 元件
- VueJS - 計算屬性
- VueJS - 偵聽器 (Watch Property)
- VueJS - 資料繫結
- VueJS - 事件
- VueJS - 渲染
- VueJS - 過渡與動畫
- VueJS - 指令
- VueJS - 路由
- VueJS - 混入 (Mixins)
- VueJS - 渲染函式
- VueJS - 響應式介面
- VueJS - 例子
- VueJS 有用資源
- VueJS 快速指南
- VueJS - 有用資源
- VueJS - 討論
VueJS 快速指南
VueJS - 概述
VueJS是一個開源的漸進式JavaScript框架，用於開發互動式網頁介面。它是簡化Web開發的著名框架之一。VueJS專注於檢視層。它可以輕鬆地整合到大型前端開發專案中，而不會出現任何問題。
VueJS 的安裝非常容易上手。任何開發者都可以輕鬆理解並快速構建互動式 Web 介面。VueJS 由前 Google 員工 Evan You 建立。VueJS 的第一個版本於 2014 年 2 月釋出。它最近在 GitHub 上獲得了 64,828 星，使其非常受歡迎。
特性
以下是 VueJS 提供的特性。
虛擬 DOM
VueJS 使用虛擬 DOM，其他框架（如 React、Ember 等）也使用虛擬 DOM。更改不會直接作用於 DOM，而是建立一個 DOM 的副本，該副本以 JavaScript 資料結構的形式存在。每當需要進行更改時，都會對 JavaScript 資料結構進行更改，然後將後者與原始資料結構進行比較。最終更改隨後將更新到真實的 DOM，使用者將看到這些更改。這在最佳化方面很好，成本更低，更改速度更快。
資料繫結
資料繫結特性有助於操作或為 HTML 屬性賦值、更改樣式、使用 VueJS 提供的稱為v-bind的繫結指令分配類。
元件
元件是 VueJS 的重要特性之一，它有助於建立可在 HTML 中重用的自定義元素。
事件處理
v-on是新增到 DOM 元素上的屬性，用於在 VueJS 中監聽事件。
動畫/過渡
VueJS 提供多種方法來為 HTML 元素應用過渡，當它們被新增到、更新到或從 DOM 中移除時。VueJS 有一個內建的過渡元件，需要將其包裝在元素周圍以實現過渡效果。我們可以輕鬆地新增第三方動畫庫，併為介面新增更多互動性。
計算屬性
這是 VueJS 的重要特性之一。它有助於監聽對 UI 元素所做的更改並執行必要的計算。無需為此編寫額外的程式碼。
模板
VueJS 提供基於 HTML 的模板，這些模板將 DOM 與 Vue 例項資料繫結。Vue 將模板編譯成虛擬 DOM 渲染函式。我們可以使用模板或渲染函式，為此，我們必須用渲染函式替換模板。
指令
VueJS 具有內建指令，例如 v-if、v-else、v-show、v-on、v-bind 和 v-model，這些指令用於在前端執行各種操作。
偵聽器 (Watchers)
偵聽器應用於發生變化的資料。例如，表單輸入元素。在這裡，我們不必新增任何額外的事件。偵聽器負責處理任何資料更改，使程式碼更簡潔、更快。
路由
頁面間的導航藉助 vue-router 完成。
輕量級
VueJS 指令碼非常輕量級，效能也很快。
Vue-CLI
可以使用 vue-cli 命令列介面在命令列中安裝 VueJS。它有助於使用 vue-cli 輕鬆構建和編譯專案。
與其他框架的比較
現在讓我們將 VueJS 與其他框架（如 React、Angular、Ember、Knockout 和 Polymer）進行比較。
VueJS 與 React
虛擬 DOM
虛擬 DOM 是 DOM 樹的虛擬表示。使用虛擬 DOM，會建立一個與真實 DOM 相同的 JavaScript 物件。任何時候都需要對 DOM 進行更改時，都會建立一個新的 JavaScript 物件並進行更改。之後，比較這兩個 JavaScript 物件，並將最終更改更新到真實的 DOM 中。
VueJS 和 React 都使用虛擬 DOM，這使得它們速度更快。
模板與 JSX
VueJS 將 html、js 和 css 分別使用。對於初學者來說，理解和採用 VueJS 風格非常容易。VueJS 的基於模板的方法非常簡單。
React 使用 jsx 方法。ReactJS 中的一切都是 JavaScript。HTML 和 CSS 都是 JavaScript 的一部分。
安裝工具
React 使用create react app，而 VueJS 使用vue-cli /CDN/npm。兩者都非常易於使用，並且專案已設定了所有基本要求。React 需要 webpack 進行構建，而 VueJS 不需要。我們可以在 jsfiddle 或 codepen 中使用 cdn 庫開始 VueJS 編碼。
流行度
React 比 VueJS 更流行。React 的就業機會比 VueJS 多。React 背後有一個大公司，即 Facebook，這使其更受歡迎。由於 React 使用 JavaScript 的核心概念，因此它使用了 JavaScript 的最佳實踐。使用 React 的人肯定對所有 JavaScript 概念都非常熟悉。
VueJS 正在發展。目前，與 React 相比，VueJS 的就業機會較少。根據一項調查，許多人正在採用 VueJS，這可能會使其比 React 和 Angular 更受歡迎。一個良好的社群正在開發 VueJS 的不同特性。vue-router 由這個社群維護，並定期更新。
VueJS 從 Angular 和 React 中汲取了優點，並構建了一個強大的庫。由於其輕量級庫，VueJS 比 React/Angular 快得多。
VueJS 與 Angular
相似之處
VueJS 與 Angular 有很多相似之處。諸如 v-if、v-for 之類的指令幾乎與 Angular 的 ngIf、ngFor 相同。它們都有一個命令列介面用於專案安裝和構建。VueJS 使用 Vue-cli，而 Angular 使用 angular-cli。兩者都提供雙向資料繫結、伺服器端渲染等。
複雜性
Vuejs 非常易於學習和上手。如前所述，初學者可以使用 VueJS 的 CDN 庫並在 codepen 和 jsfiddle 中開始使用。
對於 Angular，我們需要經歷一系列安裝步驟，對於初學者來說，開始使用 Angular 比較困難。它使用 TypeScript 進行編碼，對於來自核心 JavaScript 背景的人來說比較困難。但是，對於來自 Java 和 C# 背景的使用者來說，它更容易學習。
效能
要確定性能，取決於使用者。VueJS 檔案大小比 Angular 輕得多。框架效能比較見以下連結 http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
流行度
目前，Angular 比 VueJS 更受歡迎。許多組織使用 Angular，使其非常受歡迎。Angular 方面經驗豐富的候選人的就業機會也更多。然而，VueJS 正在佔據市場份額，可以被認為是 Angular 和 React 的有力競爭對手。
依賴項
Angular 提供了許多內建特性。我們必須匯入所需的模組並開始使用它，例如 @angular/animations、@angular/form。
VueJS 沒有像 Angular 那樣多的內建特性，需要依賴第三方庫才能執行。
靈活性
VueJS 可以輕鬆地與任何其他大型專案合併，而不會出現任何問題。Angular 很難與任何其他現有專案一起使用。
向後相容性
我們有 AngularJS、Angular2，現在是 Angular4。AngularJS 和 Angular2 有很大的區別。由於核心差異，使用 AngularJS 開發的專案應用程式無法轉換為 Angular2。
最新版本的 VueJS 是 2.0，並且具有良好的向後相容性。它提供了良好的文件，非常易於理解。
TypeScript
Angular 使用 TypeScript 進行編碼。使用者需要具備 TypeScript 知識才能開始使用 Angular。但是，我們可以在 jsfiddle 或 codepen 中使用 cdn 庫開始 VueJS 編碼。我們可以使用標準 JavaScript，這非常容易上手。
VueJS 與 Ember
相似之處
Ember 提供 Ember 命令列工具，即 ember-cli，用於輕鬆安裝和編譯 Ember 專案。
VueJS 也具有命令列工具 vue-cli 來啟動和構建專案。
它們都具有路由、模板和元件等特性，使其成為非常豐富的 UI 框架。
效能
VueJS 的效能比 Ember 好。Ember 添加了一個 glimmer 渲染引擎，旨在提高重新渲染效能，這與 VueJS 和 React 使用虛擬 DOM 的概念類似。但是，與 Ember 相比，VueJS 的效能更好。
VueJS 與 Knockout
Knockout 提供了良好的瀏覽器支援。它支援較低版本的 IE，而 VueJS 不支援 IE8 及以下版本。Knockout 的開發速度隨著時間的推移而減慢。最近它並沒有那麼流行。
另一方面，VueJS 已經開始流行起來，Vue 團隊提供了定期更新。
VueJS 與 Polymer
Polymer 庫由 Google 開發。它用於許多 Google 專案，例如 Google I/O、Google 地球、Google Play 音樂等。它提供與 VueJS 類似的資料繫結和計算屬性。
Polymer 自定義元素定義包含純 JavaScript/CSS、元素屬性、生命週期回撥和 JavaScript 方法。相比之下，VueJS 允許輕鬆使用 JavaScript/html 和 CSS。
Polymer 使用 Web 元件特性，需要為不支援這些特性的瀏覽器提供 polyfills。VueJS 沒有這種依賴性，並且在從 IE9+ 的所有瀏覽器中都能正常工作。
VueJS - 環境搭建
安裝 VueJS 的方法有很多種。接下來將討論如何進行安裝的一些方法。
直接在 HTML 檔案中使用<script>標籤
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body></body>
</html>
訪問VueJS的官方網站https://vuejs.tw/v2/guide/installation.html，根據需要下載vue.js檔案。它有兩個版本可供使用：生產版本和開發版本。開發版本未壓縮，而生產版本已壓縮，如下圖所示。開發版本在專案開發過程中有助於顯示警告資訊和啟用除錯模式。
使用CDN
我們也可以從CDN庫中使用VueJS檔案。連結https://unpkg.com/vue將提供最新版本的VueJS。VueJS也可在jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js)和cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js)上獲得。
如果需要，我們也可以自行託管檔案並開始VueJS開發。
使用NPM
對於大型VueJS應用程式，建議使用npm包管理器安裝。它包含Browserify和Webpack以及其他必要的工具，有助於開發。以下是使用npm安裝的命令。
npm install vue
使用CLI命令列
VueJS還提供CLI來安裝vue並啟動伺服器。要使用CLI安裝，我們需要先安裝CLI，可以使用以下命令完成。
npm install --global vue-cli
完成後，它將顯示VueJS的CLI版本。安裝需要幾分鐘時間。
+ vue-cli@2.8.2 added 965 packages in 355.414s
以下是使用Webpack建立專案的命令。
vue init webpack myproject
要開始使用，請使用以下命令。
cd myproject npm install npm run dev
執行npm run dev後，它將啟動伺服器並提供可在瀏覽器中檢視的URL，如下圖所示。
使用CLI建立的專案結構如下所示。
VueJS - 簡介
Vue是一個用於構建使用者介面的JavaScript框架。其核心部分主要關注檢視層，非常易於理解。本教程中將使用的Vue版本為2.0。
由於Vue主要用於前端開發，在接下來的章節中我們將處理大量的HTML、JavaScript和CSS檔案。為了理解細節，讓我們從一個簡單的例子開始。
在這個例子中，我們將使用vuejs的開發版本。
示例
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>
輸出
這是我們使用VueJS建立的第一個應用程式。如上程式碼所示，我們在.html檔案的開頭包含了vue.js。
<script type = "text/javascript" src = "js/vue.js"></script>
在body中添加了一個div，它在瀏覽器中列印“My first VueJS Task”。
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
我們還在插值中添加了一條訊息，即{{}}。它與VueJS互動並在瀏覽器中列印資料。為了在DOM中獲取訊息的值，我們建立了一個vuejs例項，如下所示：
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})
在上段程式碼中，我們呼叫了Vue例項，它接收DOM元素的ID，即e1:’#intro’，這是div的ID。資料中包含分配了值‘My first VueJS Task’的訊息。VueJS與DOM互動並使用’My first VueJS Task’更改DOM {{message}}中的值。
如果我們在控制檯中更改訊息的值，瀏覽器中的內容也會立即更新。例如：
控制檯詳情
在上面的控制檯中，我們列印了vue_det物件，它是Vue的一個例項。我們將訊息更新為“VueJs is interesting”，瀏覽器中的內容也立即更改，如上圖所示。
這只是一個基本的例子，展示了VueJS與DOM的連結以及如何操作它。在接下來的幾章中，我們將學習指令、元件、條件迴圈等。
VueJS - 例項
要開始使用VueJS，我們需要建立一個Vue例項，稱為根Vue例項。
語法
var app = new Vue({
// options
})
讓我們來看一個例子，瞭解Vue建構函式需要包含哪些內容。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>
vue_instance.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})
對於Vue，有一個名為el的引數。它接收DOM元素的ID。在上例中，我們有ID#vue_det。它是div元素的ID，存在於.html檔案中。
<div id = "vue_det"></div>
現在，我們所做的任何操作都會影響div元素，而不會影響其外部。
接下來，我們定義了data物件。它包含firstname、lastname和address的值。
這些值在div內部被賦值。例如：
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>
Firstname : {{firstname}}的值將在插值{{}}內被data物件中賦值的值Ria替換。lastname也是如此。
接下來，我們有methods，其中我們定義了一個函式mydetails和一個返回值。它在div內部被賦值為
<h1>{{mydetails()}}</h1>
因此，在{{}}內呼叫了函式mydetails。Vue例項中返回的值將列印在{{}}內。請檢視輸出以作參考。
輸出
現在，我們需要將選項傳遞給Vue建構函式，主要包括資料、模板、要掛載的元素、方法、回撥函式等。
讓我們來看看要傳遞給Vue的選項。
#data - 此型別的資料可以是物件或函式。Vue將其屬性轉換為getter/setter以使其具有反應性。
讓我們看看如何在選項中傳遞資料。
示例
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"}
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
</script>
</body>
</html>
輸出
console.log(vm.fname); // 列印 Raj
console.log(vm.$data); 列印完整的物件，如上所示
console.log(vm.$data.fname); // 列印 Raj
如果存在元件，則必須從函式中引用data物件，如下面的程式碼所示。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"};
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
return _obj
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
</script>
</body>
</html>
在元件的情況下，資料是一個函式，它與Vue.extend一起使用，如上所示。資料是一個函式。例如：
data: function () {
return _obj
}
要從元件引用資料，我們需要建立一個它的例項。例如：
var myComponentInstance = new Component();
要從資料中獲取詳細資訊，我們需要執行與上面父元件相同的操作。例如：
console.log(myComponentInstance.lname); console.log(myComponentInstance.$data);
以下是瀏覽器中顯示的詳細資訊。
Props - props的型別是字串或物件的陣列。它採用基於陣列或基於物件的語法。它們被稱為用於接收來自父元件資料的屬性。
示例1
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
示例2
Vue.component('props-demo-advanced', {
props: {
// just type check
height: Number,
// type check plus other validations
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
propsData - 這用於單元測試。
Type - 字串陣列。例如，{ [key: string]: any }。它需要在建立Vue例項期間傳遞。
示例
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
Computed - 型別：{ [key: string]: Function | { get: Function, set: Function } }
示例
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 2 },
computed: {
// get only, just need a function
aSum: function () {
return this.a + 2;
},
// both get and set
aSquare: {
get: function () {
return this.a*this.a;
},
set: function (v) {
this.a = v*2;
}
}
}
})
console.log(vm.aSquare); // -> 4
vm.aSquare = 3;
console.log(vm.a); // -> 6
console.log(vm.aSum); // -> 8
</script>
</body>
</html>
Computed有兩個函式aSum和aSquare。
函式aSum只返回this.a+2。函式aSquare有兩個函式get和set。
變數vm是Vue的一個例項，它呼叫aSquare和aSum。同時vm.aSquare = 3呼叫aSquare的set函式，vm.aSquare呼叫get函式。我們可以在瀏覽器中檢查輸出，它看起來像下面的截圖。
Methods - 方法需要包含在Vue例項中，如下面的程式碼所示。我們可以使用Vue物件訪問該函式。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 5 },
methods: {
asquare: function () {
this.a *= this.a;
}
}
})
vm.asquare();
console.log(vm.a); // 25
</script>
</body>
</html>
方法是Vue建構函式的一部分。讓我們使用Vue物件vm.asquare ()呼叫該方法，屬性a的值在asquare函式中更新。a的值從1變為25，這在下面的瀏覽器控制檯中可以看到。
VueJS - 模板
在前面的章節中，我們學習瞭如何在螢幕上以文字內容的形式獲取輸出。在本節中，我們將學習如何在螢幕上以HTML模板的形式獲取輸出。
為了理解這一點，讓我們考慮一個例子，並在瀏覽器中檢視輸出。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div>{{htmlcontent}}</div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>
vue_template.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})
現在，假設我們想在頁面上顯示html內容。如果我們碰巧使用插值（即使用雙大括號），我們將在瀏覽器中得到以下內容。
如果我們看到html內容與我們在變數htmlcontent中給出的內容相同，這不是我們想要的，我們希望它在瀏覽器上以正確的HTML內容顯示。
為此，我們將不得不使用v-html指令。當我們將v-html指令賦給html元素時，VueJS就知道它必須將其作為HTML內容輸出。讓我們在.html檔案中新增v-html指令，看看有什麼不同。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>
現在，我們不需要雙大括號來顯示HTML內容，而是使用了v-html = ”htmlcontent”，其中htmlcontent在js檔案中定義如下：
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})
瀏覽器中的輸出如下：
如果我們檢查瀏覽器，我們將看到內容與在.js檔案中定義的變數htmlcontent : "<div><h1>Vue Js Template</h1></div>"相同。
讓我們檢視瀏覽器中的檢查元素。
我們已經看到了如何將HTML模板新增到DOM。現在，我們將看到如何向現有的HTML元素新增屬性。
假設我們在HTML檔案中有一個img標籤，我們想為其賦值src，它是Vue的一部分。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
<img src = "" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/vue_template1.js"></script>
</body>
</html>
檢視上面的img標籤，src是空的。我們需要從vue js中為其新增src。讓我們看看如何做到這一點。我們將img src儲存在.js檔案中的data物件中，如下所示：
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>",
imgsrc : "images/img.jpg"
}
})
如果我們如下所示分配src，瀏覽器中的輸出將如下圖所示。
<img src = "{{imgsrc}}" width = "300" height = "250" />
我們會看到一個損壞的影像。要將任何屬性分配給HTML標籤，我們需要使用v-bind指令。讓我們使用v-bind指令將src新增到影像。
這就是它在.html檔案中分配的方式。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
<img v-bind:src = "imgsrc" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/vue_template1.js"></script>
</body>
</html>
我們需要在src前新增字首v-bind:src = ”imgsrc”和帶有src的變數名稱。
以下是瀏覽器中的輸出。
讓我們檢查並檢視使用v-bind的src是什麼樣的。
如上圖所示，src分配時沒有任何vuejs屬性。
VueJS - 元件
Vue元件是VueJS的重要特性之一，它建立可重用的自定義HTML元素。
讓我們使用一個示例並建立一個元件，這將更好地理解元件如何與VueJS一起工作。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>
vue_component.js
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
在 .html 檔案中，我們建立了兩個 div，id 分別為 component_test 和 component_test1。在上方的 .js 檔案中，我們使用這兩個 div 的 id 建立了兩個 Vue 例項。我們建立了一個公共元件，用於這兩個檢視例項。
建立元件的語法如下所示。
Vue.component('nameofthecomponent',{ // options});
建立元件後，元件名稱將成為自定義元素，可以在建立的 Vue 例項元素中使用，即在 id 為 component_test 和 component_test1 的 div 內使用。
在 .js 檔案中，我們使用了 test 元件作為元件名稱，並在 div 內將其作為自定義元素使用。
示例
<div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> <testcomponent></testcomponent> </div>
在 .js 檔案中建立的元件中，我們添加了一個模板，併為其分配了 HTML 程式碼。這是一種註冊全域性元件的方法，可以將其作為任何 Vue 例項的一部分，如下面的指令碼所示。
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
執行後，結果將反映在瀏覽器中。
元件被賦予了自定義元素標籤，即 <testcomponent></testcomponent>。但是，當我們在瀏覽器中檢查時，不會在模板中看到普通的 HTML 中的自定義標籤，如下圖所示。
我們還將元件直接作為 Vue 例項的一部分，如下面的指令碼所示。
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});
這稱為區域性註冊，元件將僅是建立的 Vue 例項的一部分。
到目前為止，我們已經看到了帶有基本選項的基本元件。現在，讓我們新增更多選項，例如資料和方法。就像 Vue 例項具有資料和方法一樣，元件也共享相同的內容。因此，我們將擴充套件我們已經看到的帶有資料和方法的程式碼。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>
vue_component.js
Vue.component('testcomponent',{
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
data: function() {
return {
name : "Ria"
}
},
methods:{
changename : function() {
this.name = "Ben";
},
originalname: function() {
this.name = "Ria";
}
}
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
在上方的 .js 檔案中，我們添加了資料，它是一個函式，返回一個物件。該物件具有一個 name 屬性，其值為“Ria”。這在下面的模板中使用。
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
儘管元件中的資料是一個函式，但我們可以像使用直接 Vue 例項一樣使用其屬性。此外，還添加了兩個方法，changename 和 originalname。在 changename 中，我們更改了 name 屬性，在 originalname 中，我們將它重置回原始名稱。
我們還在 div 上添加了兩個事件，mouseover 和 mouseout。事件的詳細資訊將在事件章節中討論。所以現在，mouseover 呼叫changename 方法，mouseout 呼叫originalname 方法。
結果顯示在下面的瀏覽器中。
如上面的瀏覽器所示，它顯示了在 data 屬性中分配的名稱，即相同的名稱。我們還在 div 上分配了一個 mouseover 事件和一個 mouseout 事件。讓我們看看當我們滑鼠懸停和移出時會發生什麼。
滑鼠懸停時，我們看到第一個元件的名稱更改為 Ben，但是第二個元件保持不變。這是因為 data 元件是一個函式，它返回一個物件。因此，當在一個地方更改它時，在其他地方不會被覆蓋。
動態元件
動態元件是使用關鍵字 <component></component> 建立的，並使用屬性繫結，如下例所示。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<component v-bind:is = "view"></component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
</script>
</body>
</html>
輸出
動態元件使用以下語法建立。
<component v-bind:is = "view"></component>
它有 v-bind:is = ”view”，併為其分配了一個值 view。view 在 Vue 例項中定義如下。
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
執行後，模板 動態元件將顯示在瀏覽器中。
VueJS - 計算屬性
我們已經看到了 Vue 例項和元件的方法。計算屬性類似於方法，但與我們將在此章節討論的方法相比有一些區別。
在本節結束時，我們將能夠決定何時使用方法以及何時使用計算屬性。
讓我們透過一個例子來理解計算屬性。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
<h1>My name is {{firstname}} {{lastname}}</h1>
<h1>Using computed method : {{getfullname}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_computedprops.js"></script>
</body>
</html>
vue_computeprops.js
var vm = new Vue({
el: '#computed_props',
data: {
firstname :"",
lastname :"",
birthyear : ""
},
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
})
在這裡，我們建立了一個帶有 firstname 和 lastname 的.html 檔案。Firstname 和 Lastname 是使用屬性 firstname 和 lastname 繫結的文字框。
我們呼叫計算方法 getfullname，它返回輸入的 firstname 和 lastname。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
當我們在文字框中輸入內容時，當屬性 firstname 或 lastname 更改時，該函式會返回相同的內容。因此，藉助計算屬性，我們不必執行任何特定操作，例如記住呼叫函式。使用計算屬性，它會自行呼叫，因為內部使用的屬性會更改，即 firstname 和 lastname。
結果顯示在下面的瀏覽器中。在文字框中輸入內容，並將使用計算函式更新相同的內容。
現在，讓我們嘗試瞭解方法和計算屬性之間的區別。兩者都是物件。內部定義了返回值的函式。
對於方法，我們將其作為函式呼叫，對於計算屬性，將其作為屬性呼叫。透過以下示例，讓我們瞭解方法和計算屬性之間的區別。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method : {{getrandomno1()}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed
property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
name : "helloworld"
},
methods: {
getrandomno1 : function() {
return Math.random();
}
},
computed :{
getrandomno : function(){
return Math.random();
}
}
});
</script>
</body>
</html>
在上面的程式碼中，我們建立了一個名為 getrandomno1 的方法和一個帶有函式 getrandomno 的計算屬性。兩者都使用 Math.random() 返回隨機數。
它在瀏覽器中顯示如下。該方法和計算屬性被多次呼叫以顯示差異。
如果我們檢視上面的值，我們將看到從計算屬性返回的隨機數保持不變，無論呼叫多少次。這意味著每次呼叫它時，都會更新所有內容的最後一個值。而對於方法，它是一個函式，因此每次呼叫它時都會返回不同的值。
計算屬性中的 Get/Set
在本節中，我們將透過一個示例學習計算屬性中的 get/set 函式。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
}
}
}
});
</script>
</body>
</html>
我們定義了一個繫結到fullname 的輸入框，這是一個計算屬性。它返回一個名為get 的函式，該函式提供 fullname，即名字和姓氏。此外，我們還顯示了名字和姓氏，如下所示：
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
讓我們在瀏覽器中檢查一下。
現在，如果我們更改文字框中的名稱，我們將看到在以下螢幕截圖中顯示的名稱不會反映出來。
讓我們在 fullname 計算屬性中新增 setter 函式。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
});
</script>
</body>
</html>
我們在 fullname 計算屬性中添加了 set 函式。
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
它將名稱作為引數，這只是文字框中的 fullname。稍後，它將在空格處拆分，並更新名字和姓氏。現在，當我們執行程式碼並編輯文字框時，瀏覽器中將顯示相同的內容。由於 set 函式，名字和姓氏將被更新。get 函式返回名字和姓氏，而 set 函式在編輯任何內容時會更新它。
現在，文字框中輸入的任何內容都與上面螢幕截圖中顯示的內容匹配。
VueJS - 偵聽器 (Watch Property)
在本節中，我們將學習 Watch 屬性。透過一個示例，我們將看到如何在 VueJS 中使用 Watch 屬性。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
Kilometers : <input type = "text" v-model = "kilometers">
Meters : <input type = "text" v-model = "meters">
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
</script>
</body>
</html>
在上面的程式碼中，我們建立了兩個文字框，一個帶有kilometers，另一個帶有meters。在 data 屬性中，kilometers 和 meters 初始化為 0。建立了一個 watch 物件，其中包含兩個函式kilometers 和meters。在這兩個函式中，都進行了從公里到米和從米到公里的轉換。
當我們在任何文字框中輸入值時，無論更改哪個文字框，Watch 都負責更新這兩個文字框。我們不必專門分配任何事件並等待它更改並執行驗證的額外工作。Watch 負責使用各個函式中完成的計算來更新文字框。
讓我們看一下瀏覽器中的輸出。
讓我們在 kilometers 文字框中輸入一些值，並檢視它在 meters 文字框中的變化，反之亦然。
現在讓我們在 meters 文字框中輸入內容，並檢視它在 kilometers 文字框中的變化。這是在瀏覽器中看到的顯示。
VueJS - 資料繫結
在本節中，我們將學習如何使用 VueJS 提供的稱為v-bind 的繫結指令來操作或為 HTML 屬性賦值、更改樣式以及分配類。
讓我們考慮一個示例來了解為什麼我們需要以及何時使用 v-bind 指令進行資料繫結。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
{{title}}<br/>
<a href = "hreflink" target = "_blank"> Click Me </a> <br/>
<a href = "{{hreflink}}" target = "_blank">Click Me </a> <br/>
<a v-bind:href = "hreflink" target = "_blank">Click Me </a> <br/>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "DATA BINDING",
hreflink : "http://www.google.com"
}
});
</script>
</body>
</html>
在上面的示例中，我們顯示了一個 title 變數和三個錨點連結。我們還從 data 物件為 href 分配了一個值。
現在，如果我們在瀏覽器中檢查輸出並進行檢查，我們將看到前兩個錨點連結沒有正確顯示 href，如下圖所示。
第一個 clickme 將 href 顯示為 hreflink，第二個顯示為 {{hreflink}}，而最後一個顯示了我們所需的正確 url。
因此，要為 HTML 屬性賦值，我們需要使用指令 v-bind 繫結它，如下所示。
<a v-bind:href = "hreflink" target = "_blank">Click Me </a>
VueJS 還為 v-bind 提供瞭如下所示的簡寫。
<a :href = "hreflink" target = "_blank">Click Me </a>
如果我們在瀏覽器中檢視檢查元素，錨點標籤不會顯示 v-bind 屬性，但是，它會顯示普通的 HTML。當我們檢查 DOM 時，不會看到任何 VueJS 屬性。
繫結 HTML 類
要繫結 HTML 類，我們需要使用v-bind: class。讓我們考慮一個示例並在其中繫結類。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.active {
background: red;
}
</style>
<div id = "classbinding">
<div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "CLASS BINDING",
isactive : true
}
});
</script>
</body>
</html>
這裡建立了一個帶有 v-bind: class=” {active: isactive}” 的 div。
這裡，isactive 是一個基於 true 或 false 的變數。它將 active 類應用於 div。在 data 物件中，我們將 isactive 變數設定為 true。在樣式.active 中定義了一個類，其背景顏色為紅色。
如果變數 isactive 為 true，則將應用顏色，否則不應用。瀏覽器中的輸出如下所示。
在上圖中，我們可以看到背景顏色為紅色。類 = ”active” 應用於 div。
現在，讓我們將變數的值更改為 false 並檢視輸出。isactive 變數更改為 false，如下面的程式碼所示。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.active {
background: red;
}
</style>
<div id = "classbinding">
<div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "CLASS BINDING",
isactive : false
}
});
</script>
</body>
</html>
在上圖中，我們可以看到 active 類沒有應用於 div。
我們還可以使用 v-bind 屬性為 HTML 標籤分配多個類。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<div class = "info" v-bind:class = "{ active: isActive, 'displayError': hasError }">
{{title}}
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
isActive : false,
hasError : false
}
});
</script>
</body>
</html>
對於上面的程式碼中的 div，我們應用了一個普通的類，例如 class = ”info”。基於 isActive 和 hasError 變數，其他類將應用於 div。
輸出
這是一個應用的普通類。這兩個變數現在都是 false。讓我們將isActive 變數設定為 true 並檢視輸出。
在上圖中，在 DOM 中，我們可以看到分配給 div 的兩個類，info 和 active。讓我們將 hasError 變數設定為 true，並將 isActive 設定為 false。
現在，當我們在上圖中看到時，info 和 displayError 類應用於 div。這就是我們如何根據條件應用多個類。
我們還可以將類作為陣列傳遞。讓我們舉個例子來理解這一點。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError'
}
});
</script>
</body>
</html>
輸出
正如我們上面看到的，這兩個類都應用於 div。讓我們使用一個變數，並根據變數的值分配類。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError',
isActive : true,
haserror : false
}
});
</script>
</body>
</html>
我們使用了兩個變數isActive和haserror，並在 div 的 class 繫結中也使用了相同的變數，如下面的 div 標籤所示。
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
如果 isActive 為 true，則 infoclass 將被賦予它。haserror 同理，如果它為 true，則只有 errorClass 將被應用於它。
現在，讓我們將 haserror 變數設定為 true，並將 isActive 變數設定為 false。
我們現在將在元件中新增 v-bind 用於類。在下面的示例中，我們在元件模板和元件中都添加了一個類。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<new_component class = "active"></new_component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError',
isActive : false,
haserror : true
},
components:{
'new_component' : {
template : '<div class = "info">Class Binding for component</div>'
}
}
});
</script>
</body>
</html>
以下是瀏覽器中的輸出。它將這兩個類都應用於最終的 div。
<div class = ”info active”></div>
在元件部分新增一個變數來顯示，基於 true/false。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<new_component v-bind:class = "{active:isActive}"></new_component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError',
isActive : false,
haserror : true
},
components:{
'new_component' : {
template : '<div class = "info">Class Binding for component</div>'
}
}
});
</script>
</body>
</html>
由於變數為 false，因此未應用 active 類，而是應用了 info 類，如下面的螢幕截圖所示。
繫結內聯樣式
物件語法
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding",
activeColor: 'red',
fontSize :'30'
}
});
</script>
</body>
</html>
輸出
在上面的示例中，對於 div，應用了樣式，並從 data 物件中獲取資料。
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
title : "Inline style Binding",
activeColor: 'red',
fontSize :'30'
}
我們也可以透過將所有值賦給一個變數，然後將該變數賦給 div 來做同樣的事情。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "styleobj">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding",
styleobj : {
color: 'red',
fontSize :'40px'
}
}
});
</script>
</body>
</html>
顏色和 fontSize 被賦給名為 styleobj 的物件，並將該物件賦給 div。
<div v-bind:style = "styleobj">{{title}}</div>
輸出
表單輸入繫結
到目前為止，在我們建立的示例中，我們已經看到了 v-model 繫結輸入文字元素並將值繫結到已分配的變數。讓我們在本節中瞭解更多相關資訊。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3>TEXTBOX</h3>
<input v-model = "name" placeholder = "Enter Name" />
<h3>Name entered is : {{name}}</h3>
<hr/>
<h3>Textarea</h3>
<textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
<h1><p>{{textmessage}}</p></h1>
<hr/>
<h3>Checkbox</h3>
<input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
textmessage:'',
checked : false
}
});
</script>
</body>
</html>
我們在文字框中輸入的任何內容都將顯示在下方。v-model 被賦值為 name，並且 name 顯示在 {{name}} 中，它顯示文字框中輸入的任何內容。
輸出
讓我們檢視更多示例以及如何使用它。
單選按鈕和下拉列表
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3>Radio</h3>
<input type = "radio" id = "black" value = "Black" v-model = "picked">Black
<input type = "radio" id = "white" value = "White" v-model = "picked">White
<h3>Radio element clicked : {{picked}} </h3>
<hr/>
<h3>Select</h3>
<select v-model = "languages">
<option disabled value = "">Please select one</option>
<option>Java</option>
<option>Javascript</option>
<option>Php</option>
<option>C</option>
<option>C++</option>
</select>
<h3>Languages Selected is : {{ languages }}</h3>
<hr/>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
picked : 'White',
languages : "Java"
}
});
</script>
</body>
</html>
輸出
修飾符
我們在示例中使用了三個修飾符——trim、number 和 lazy。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
<br/>
<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
<h3>Display Message : {{msg}}</h3>
<br/>
<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
<h3>Display Message : {{message}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
age : 0,
msg: '',
message : ''
}
});
</script>
</body>
</html>
輸出
Number 修飾符只允許輸入數字。它除了數字之外不會接受任何其他輸入。
<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
Lazy 修飾符將在完全輸入內容並且使用者離開文字框後顯示文字框中的內容。
<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
Trim 修飾符將刪除開頭和結尾處輸入的任何空格。
<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
VueJS - 事件
v-on是新增到 DOM 元素上的屬性，用於在 VueJS 中監聽事件。
點選事件
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "displaynumbers">Click ME</button>
<h2> Add Number 100 + 200 = {{total}}</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
num1: 100,
num2 : 200,
total : ''
},
methods : {
displaynumbers : function(event) {
console.log(event);
return this.total = this.num1+ this.num2;
}
},
});
</script>
</body>
</html>
輸出
以下程式碼用於為 DOM 元素分配點選事件。
<button v-on:click = "displaynumbers">Click ME</button>
v-on 有一個簡寫，這意味著我們也可以如下呼叫事件：
<button @click = "displaynumbers">Click ME</button>
點選按鈕時，它將呼叫方法“displaynumbers”，該方法接收事件，我們已經在瀏覽器中輸出了該事件，如上所示。
我們現在將檢查另一個事件 mouseover mouseout。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
num1: 100,
num2 : 200,
total : '',
styleobj : {
width:"100px",
height:"100px",
backgroundColor:"red"
}
},
methods : {
changebgcolor : function() {
this.styleobj.backgroundColor = "green";
},
originalcolor : function() {
this.styleobj.backgroundColor = "red";
}
},
});
</script>
</body>
</html>
在上面的示例中，我們建立了一個寬度和高度為 100px 的 div。它被賦予了紅色背景顏色。在滑鼠懸停時，我們將顏色更改為綠色，在滑鼠移出時，我們將顏色改回紅色。
因此，在滑鼠懸停期間，將呼叫方法changebgcolor，一旦我們將滑鼠移出 div，將呼叫方法originalcolor。
操作如下：
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
將兩個事件——mouseover 和 mouseout——分配給 div，如上所示。我們建立了一個 styleobj 變數，並給出了要分配給 div 的所需樣式。相同的變數使用 v-bind:style = ”styleobj” 繫結到 div。
在 changebgcolor 中，我們使用以下程式碼將顏色更改為綠色。
changebgcolor : function() {
this.styleobj.backgroundColor = "green";
}
使用 stylobj 變數，我們將顏色更改為綠色。
類似地，以下程式碼用於將其改回原色。
originalcolor : function() {
this.styleobj.backgroundColor = "red";
}
這就是我們在瀏覽器中看到的。
當我們滑鼠懸停時，顏色將變為綠色，如下面的螢幕截圖所示。
事件修飾符
Vue 提供了可在 v-on 屬性上使用的事件修飾符。以下是可用的修飾符：
.once
允許事件只執行一次。
語法
<button v-on:click.once = "buttonclicked">Click Once</button>
我們在呼叫修飾符時需要新增點運算子，如上面的語法所示。讓我們在一個例子中使用它並瞭解 once 修飾符的工作原理。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
Output:{{clicknum}}
<br/><br/>
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button>
Output:{{clicknum1}}
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
}
});
</script>
</body>
</html>
輸出
在上面的示例中，我們建立了兩個按鈕。“單擊一次”標籤的按鈕添加了 once 修飾符，另一個按鈕沒有任何修飾符。這就是按鈕的定義方式。
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button> <button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button>
第一個按鈕呼叫方法“buttonclickedonce”，第二個按鈕呼叫方法“buttonclicked”。
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
在 clicknum 和 clicknum1 中定義了兩個變數。當單擊按鈕時，這兩個變數都會遞增。這兩個變數都初始化為 0，並且顯示在上面的輸出中。
單擊第一個按鈕時，變數 clicknum 遞增 1。第二次單擊時，數字不會遞增，因為修飾符阻止它執行或執行單擊按鈕時分配的任何操作項。
單擊第二個按鈕時，將執行相同的操作，即變數遞增。每次單擊時，值都會遞增並顯示。
以下是我們在瀏覽器中獲得的輸出。
.prevent
語法
<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("Anchor tag is clicked");
}
}
});
</script>
</body>
</html>
輸出
如果我們單擊 clickme 連結，它將傳送一個警報“已單擊錨標記”，並將在新標籤頁中開啟連結https://www.google.com，如下面的螢幕截圖所示。
現在，這以正常方式工作，即連結按我們想要的方式開啟。如果我們不想開啟連結，我們需要向事件新增一個修飾符“prevent”，如下面的程式碼所示。
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
新增後，如果我們單擊按鈕，它將傳送一條警報訊息，並且不會再開啟連結。prevent 修飾符阻止連結開啟，只執行分配給標籤的方法。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("Anchor tag is clicked");
}
}
});
</script>
</body>
</html>
輸出
單擊連結時，它將顯示警報訊息，並且不再開啟 url。
事件 - 鍵修飾符
VueJS 提供基於我們可以在其中控制事件處理的鍵修飾符。假設我們有一個文字框，我們希望僅在按 Enter 鍵時呼叫該方法。我們可以透過向事件新增鍵修飾符來做到這一點。
語法
<input type = "text" v-on:keyup.enter = "showinputvalue"/>
我們想要應用於事件的鍵是V-on.eventname.keyname（如上所示）
我們可以使用多個 keyname。例如，V-on.keyup.ctrl.enter
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
<h3> {{name}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.name=event.target.value;
}
}
});
</script>
</body>
</html>
輸出
在文字框中輸入一些內容，我們只會在按下 Enter 鍵時看到它被顯示。
自定義事件
父元件可以使用 prop 屬性向其元件傳遞資料，但是，我們需要在子元件發生更改時告訴父元件。為此，我們可以使用自定義事件。
父元件可以使用v-on屬性監聽子元件事件。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div id = "counter-event-example">
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp"></button-counter>
</div>
</div>
<script type = "text/javascript">
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
</script>
</body>
</html>
輸出
上面的程式碼顯示了父元件和子元件之間的資料傳輸。
元件使用以下程式碼建立。
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
有一個v-for屬性，它將迴圈遍歷 languages 陣列。該陣列包含一個語言列表。我們需要將詳細資訊傳送到子元件。陣列的值儲存在 item 和 index 中。
v-bind:item = "item" v-bind:index = "index"
要引用陣列的值，我們需要先將其繫結到一個變數，然後使用 props 屬性引用該變數，如下所示。
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
props 屬性以陣列形式包含 item。我們也可以參考索引，如下所示：
props:[‘item’, ‘index’]
還在元件中添加了一個事件，如下所示：
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
事件的名稱是showlanguage，它呼叫一個名為languagedisp的方法，該方法在 Vue 例項中定義。
在元件中，模板定義如下：
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
建立了一個按鈕。將根據語言陣列中的計數建立儘可能多的按鈕。單擊按鈕時，將呼叫一個名為 displayLanguage 的方法，並將單擊的按鈕項作為引數傳遞給該函式。現在，元件需要將單擊的元素髮送到父元件以進行顯示，操作如下：
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
方法displayLanguage呼叫this.$emit(‘showlanguage’, lng);
$emit用於呼叫父元件方法。showlanguage 方法是在帶有 v-on 的元件上給出的事件名稱。
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
我們正在傳遞一個引數，即單擊的語言名稱到主父 Vue 例項的方法，該方法定義如下。
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
在這裡，emit 觸發 showlanguage，這反過來又從 Vue 例項方法呼叫languagedisp。它將單擊的語言值分配給變數languageclicked，並在瀏覽器中顯示，如下面的螢幕截圖所示。
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
以下是我們在瀏覽器中獲得的輸出。
VueJS - 渲染
在本章中，我們將學習條件渲染和列表渲染。在條件渲染中，我們將討論使用 if、if-else、if-else-if、show 等。在列表渲染中，我們將討論如何使用 for 迴圈。
條件渲染
讓我們開始並首先做一個示例來解釋條件渲染的細節。透過條件渲染，我們只想在滿足條件時輸出，並且條件檢查是在 if、if-else、if-else-if、show 等的幫助下完成的。
v-if
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>
輸出
在上面的示例中，我們建立了一個按鈕和兩個帶有訊息的 h1 標籤。
宣告一個名為 show 的變數並將其初始化為 true 值。它顯示在按鈕附近。單擊按鈕時，我們呼叫一個方法showdata，該方法切換變數 show 的值。這意味著單擊按鈕時，變數 show 的值將從 true 變為 false，從 false 變為 true。
我們將 if 分配給 h1 標籤，如下面的程式碼片段所示。
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button> <h1 v-if = "show">This is h1 tag</h1>
現在它將做什麼，它將檢查變數 show 的值，如果為 true，則將顯示 h1 標籤。單擊按鈕並在瀏覽器中檢視，由於變數 show 的值更改為 false，因此 h1 標籤不會在瀏覽器中顯示。只有當 show 變數為 true 時才會顯示。
以下是瀏覽器中的顯示。
如果我們在瀏覽器中檢查，這就是當 show 為 false 時我們得到的結果。
當變數 show 設定為 false 時，h1 標籤將從 DOM 中移除。
這就是當變數為 true 時我們看到的。當變數 show 設定為 true 時，h1 標籤將被添加回 DOM。
v-else
在下面的示例中，我們在第二個 h1 標籤中添加了 v-else。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>
v-else 使用以下程式碼片段新增。
<h1 v-if = "show">This is h1 tag</h1> <h2 v-else>This is h2 tag</h2>
現在，如果 show 為 true，將顯示“這是 h1 標籤”，如果為 false，則將顯示“這是 h2 標籤”。這就是我們在瀏覽器中將獲得的結果。
上面的顯示是當 show 變數為 true 時。由於我們添加了 v-else，因此第二個語句不存在。現在，當我們單擊按鈕時，show 變數將變為 false，並且將顯示第二個語句，如下面的螢幕截圖所示。
v-show
v-show 的行為與 v-if 相同。它還會根據分配給它的條件顯示和隱藏元素。v-if 和 v-show 之間的區別在於，如果條件為 false，v-if 會從 DOM 中刪除 HTML 元素，如果條件為 true，則會將其添加回來。而 v-show 使用 display:none 隱藏元素，如果條件為 false。如果條件為 true，它將顯示元素。因此，該元素始終存在於 dom 中。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
<div v-show = "show">
<b>V-Show:</b>
<img src = "images/img.jpg" width = "100" height = "100" />
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>
v-show 使用以下程式碼片段分配給 HTML 元素。
<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>
我們使用了相同的變數 show，並根據其真/假值來決定影像是否顯示在瀏覽器中。
現在，由於變數 show 為真，影像如上圖所示。讓我們點選按鈕並檢視顯示效果。
變數 show 為假，因此影像隱藏。如果我們檢查並檢視元素，則 div 以及影像仍然是 DOM 的一部分，其樣式屬性為 display: none，如上圖所示。
列表渲染
v-for
現在讓我們討論使用 v-for 指令進行列表渲染。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>
一個名為 items 的變數被宣告為一個數組。在 methods 中，有一個名為 **showinputvalue** 的方法，該方法被分配給輸入框，用於接收水果的名稱。在該方法中，使用以下程式碼片段將輸入文字框中輸入的水果新增到陣列中。
showinputvalue : function(event) {
this.items.push(event.target.value);
}
我們使用了 v-for 來顯示輸入的水果，如下面的程式碼片段所示。V-for 幫助迭代陣列中存在的數值。
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
要使用 for 迴圈迭代陣列，我們必須使用 v-for = ”a in items”，其中 a 儲存陣列中的值，並將顯示所有專案完成。
輸出
以下是瀏覽器中的輸出。
檢查 items 後，瀏覽器中顯示的內容如下。在 DOM 中，我們沒有看到任何應用於 li 元素的 v-for 指令。它顯示了沒有任何 VueJS 指令的 DOM。
如果我們希望顯示陣列的索引，則可以使用以下程式碼。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>
為了獲取索引，我們在括號中添加了另一個變數，如下面的程式碼片段所示。
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
在 (a, index) 中，**a** 是值，**index** 是鍵。瀏覽器的顯示效果將如以下螢幕截圖所示。因此，藉助索引，可以顯示任何特定值。
VueJS - 過渡和動畫
本章將討論 VueJS 中可用的過渡和動畫功能。
過渡
VueJS 提供了多種方法來將過渡應用於 HTML 元素，當它們新增到 DOM 或在 DOM 中更新時。VueJS 有一個內建的過渡元件，需要將其包裝在需要過渡的元素周圍。
語法
<transition name = "nameoftransition"> <div></div> </transition>
讓我們考慮一個例子來理解過渡的工作原理。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
});
</script>
</body>
</html>
有一個名為 clickme 的按鈕，我們可以使用它將變數 show 的值更改為真或假，反之亦然。有一個 **p 標籤**，只有當變數為真時才顯示文字元素。我們已將 p 標籤用過渡元素包裝，如下面的程式碼片段所示。
<transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">Animation Example</p> </transition>
過渡的名稱是 **fade**。VueJS 提供了一些標準的過渡類，這些類的名稱以過渡名稱為字首。
以下是過渡的一些標準類：
**v-enter** - 此類最初在元素更新/新增之前呼叫。這是起始狀態。
**v-enter-active** - 此類用於定義進入過渡階段的延遲、持續時間和緩動曲線。這是整個階段的活動狀態，並且在整個進入階段都可用。
**v-leave** - 離開過渡觸發時新增，移除。
**v-leave-active** - 在離開階段應用。過渡完成後將其移除。此類用於在離開階段應用延遲、持續時間和緩動曲線。
每個類都將以過渡名稱為字首。我們已將過渡名稱指定為 fade，因此類的名稱變為 **.fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active**。
它們在以下程式碼中定義。
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
</style>
`.fade_enter_active` 和 `.fade_leave_active` 是在一起定義的，它在開始和離開階段應用過渡。不透明度屬性在 2 秒內更改為 0。
持續時間在 `.fade_enter_active` 和 `.fade_leave_active` 中定義。最終階段在 `.fade_enter`，`.fade_leave_to` 中定義。
瀏覽器中的顯示如下。
單擊按鈕後，文字將在兩秒鐘內淡出。
兩秒鐘後，文字將完全消失。
讓我們考慮另一個示例，其中有一個影像，單擊按鈕時會在 x 軸上移動。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform : translateX(100px);
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>
過渡的名稱是 **shiftx**。使用變換屬性，使用以下程式碼片段在 x 軸上將影像移動 100 畫素。
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform : translateX(100px);
}
</style>
以下是輸出。
單擊按鈕後，影像將向右移動 100 畫素，如下面的螢幕截圖所示。
動畫
動畫的應用方式與過渡相同。動畫也有一些類需要宣告才能生效。
讓我們考慮一個例子來看看動畫是如何工作的。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>
要應用動畫，可以使用與過渡相同的類。在上面的程式碼中，我們有一個用 p 標籤包圍的影像，如下面的程式碼片段所示。
<transition name = "shiftx"> <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p> </transition>
過渡的名稱是 **shiftx**。應用的類如下：
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>
該類以過渡名稱為字首，即 `shiftx-enter-active` 和 `.shiftx-leave-active`。動畫使用關鍵幀從 0% 到 100% 定義。在每個關鍵幀中都定義了一個變換，如下面的程式碼片段所示。
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
以下是輸出。
單擊按鈕後，它會從 0 旋轉到 360 度然後消失。
自定義過渡類
VueJS 提供了一系列自定義類，可以將其作為屬性新增到過渡元素。
- enter-class
- enter-active-class
- leave-class
- leave-active-class
當我們想要使用外部 CSS 庫（例如 animate.css）時，自定義類基本上就會發揮作用。
示例
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
<transition
name = "custom-classes-transition"
enter-active-class = "animated swing"
leave-active-class = "animated bounceIn">
<p v-if = "show"><span style = "font-size:25px;">Example</span></p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>
輸出
輸出
輸出
上面的程式碼中應用了兩個動畫。一個是 `enter-active-class = “animated swing”`，另一個是 `leave-active-class = ”animated bounceIn"`。我們正在使用自定義動畫類來應用來自第三方庫的動畫。
顯式過渡持續時間
我們可以使用 VueJS 在元素上應用過渡和動畫。Vue 等待 `transionend` 和 `animationend` 事件來檢測動畫或過渡是否完成。
有時過渡可能會導致延遲。在這種情況下，我們可以顯式地應用持續時間，如下所示。
<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>
我們可以使用 `duration` 屬性和 `:` 在過渡元素上，如上所示。如果需要分別為進入和離開指定持續時間，可以按照上面的程式碼片段所示進行操作。
JavaScript 鉤子
可以使用 JavaScript 事件將過渡類呼叫為方法。讓我們考慮一個示例以更好地理解。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id = "example-4">
<button @click = "show = !show">
<span style = "font-size:25px;">Toggle</span>
</button>
<transition v-on:before-enter = "beforeEnter"
v-on:enter = "enter"
v-on:leave = "leave"
v-bind:css = "false">
<p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
Velocity(el, { fontSize: '10px' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
});
</script>
</body>
</html>
輸出
在上面的示例中，我們正在使用過渡元素上的 js 方法執行動畫。
過渡上的方法應用如下：
<transition v-on:before-enter = "beforeEnter" v-on:enter = "enter" v-on:leave = "leave" v-bind:css = "false"> <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p> </transition>
添加了一個字首 **v-on** 和方法呼叫的事件名稱。這些方法在 Vue 例項中定義如下：
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
Velocity(el, { fontSize: '10px' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
在每個方法中都應用了所需的過渡。單擊按鈕時以及動畫完成時都應用了不透明度動畫。第三方庫用於動畫。
在過渡上添加了一個屬性 `v-bind:css = "false"`，這是為了讓 Vue 理解這是一個 JavaScript 過渡。
初始渲染時的過渡
為了在開始時新增動畫，我們需要將 `appear` 屬性新增到過渡元素。
讓我們來看一個例子來更好地理解它。
示例
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated bounceIn">
<h1>BounceIn - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated swing">
<h1>Swing - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated rubberBand">
<h1>RubberBand - Animation Example</h1>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>
在上面的示例中，我們使用了來自 animate.css 庫的三個不同的動畫。我們將 `appear` 新增到過渡元素。
執行上述程式碼後，瀏覽器中的輸出將如下所示。
元件上的動畫
我們可以使用以下程式碼包裝元件的過渡。我們在這裡使用了動態元件。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
</head>
<body>
<div id = "databinding" style = "text-align:center;">
<transition appear
appear-class = "custom-appear-class"
appear-active-class = "animated wobble">
<component v-bind:is = "view"></component>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-
size:25;color:red;">Animation on Components</span></div>'
}
}
});
</script>
</body>
</html>
輸出
VueJS - 指令
指令是 VueJS 的指令，用於以某種方式執行操作。我們已經看到了諸如 v-if、v-show、v-else、v-for、v-bind、v-model、v-on 等指令。
在本章中，我們將瞭解自定義指令。我們將建立全域性指令，類似於我們對元件所做的操作。
語法
Vue.directive('nameofthedirective', {
bind(e1, binding, vnode) {
}
})
我們需要使用 `Vue.directive` 建立一個指令。它接受指令的名稱，如上所示。讓我們考慮一個例子來展示指令工作原理的細節。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-changestyle>VueJS Directive</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>
在這個例子中，我們建立了一個自定義指令 **changestyle**，如下面的程式碼片段所示。
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "30px";
}
});
我們將以下 changestyle 分配給一個 div。
<div v-changestyle>VueJS Directive</div>
如果我們在瀏覽器中檢視，它將以紅色顯示文字 VueJs 指令，並且字型大小增加到 30 畫素。
輸出
我們使用了 bind 方法，它是指令的一部分。它接受三個引數 **el**，需要應用自定義指令的元素。繫結就像傳遞給自定義指令的引數一樣，例如 `v-changestyle = ”{color:’green’}”`，其中 green 將在繫結引數中讀取，vnode 是元素，即節點名。
在下一個示例中，我們輸出了所有引數，它顯示了每個引數提供的詳細資訊。
以下是一個將值傳遞給自定義指令的示例。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-changestyle = "{color:'green'}">VueJS Directive</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
console.log(binding.value.color);
console.log(vnode);
e1.style.color=binding.value.color;
e1.style.fontSize = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>
輸出
文字的顏色更改為綠色。值使用以下程式碼片段傳遞。
<div v-changestyle = "{color:'green'}">VueJS Directive</div>
And it is accessed using the following piece of code.
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
console.log(binding.value.color);
console.log(vnode);
e1.style.color=binding.value.color;
e1.style.fontSize = "30px";
}
});
過濾器
VueJS 支援有助於文字格式化的過濾器。它與 v-bind 和插值 ({{}}) 一起使用。我們需要在 JavaScript 表示式的末尾使用管道符號 | 來使用過濾器。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input v-model = "name" placeholder = "Enter Name" /><br/>
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name : ""
},
filters : {
countletters : function(value) {
return value.length;
}
}
});
</script>
</body>
</html>
在上面的示例中，我們建立了一個簡單的過濾器 countletters。Countletters 過濾器計算文字框中輸入的字元數。為了使用過濾器，我們需要使用 filter 屬性並定義使用的過濾器，如下面的程式碼片段所示。
filters : {
countletters : function(value) {
return value.length;
}
}
我們正在定義方法 **countletters** 並返回輸入字串的長度。
為了在顯示中使用過濾器，我們使用了管道運算子和過濾器的名稱，即countletters。
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
以下是瀏覽器中的顯示。
我們也可以使用以下程式碼片段向過濾器傳遞引數。
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>
現在，countletters 將有三個引數，即 message、a1 和 a2。
我們還可以使用以下程式碼片段向插值傳遞多個過濾器。
<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>
在過濾器屬性中，countlettersA 和 countlettersB 將是兩個方法，而 countlettersA 將把詳細資訊傳遞給 countlettersB。
VueJS - 路由
VueJS 沒有內建的路由器功能。我們需要遵循一些額外的步驟來安裝它。
從 CDN 直接下載
最新版本的 vue-router 可在 https://unpkg.com/vue-router/dist/vue-router.js 獲取
Unpkg.com 提供基於 npm 的 cdn 連結。上述連結始終更新為最新版本。我們可以下載並託管它，並像下面這樣使用 script 標籤以及 vue.js：
<script src = "/path/to/vue.js"></script> <script src = "/path/to/vue-router.js"></script>
使用NPM
執行以下命令來安裝 vue-router。
npm install vue-router
使用 GitHub
我們可以按照如下方式從 GitHub 克隆儲存庫：
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install npm run build
讓我們從一個使用 vue-router.js 的簡單示例開始。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
</head>
<body>
<div id = "app">
<h1>Routing Example</h1>
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>
輸出
要開始路由，我們需要新增 vue-router.js 檔案。從 https://unpkg.com/vue-router/dist/vue-router.js 獲取程式碼並將其儲存到檔案 vue-router.js 中。
該指令碼在 vue.js 之後新增，如下所示：
<script type = "text/javascript" src = "js/vue.js"></script> <script type = "text/javascript" src = "js/vue-router.js"></script>
在 body 部分，定義了一個路由連結，如下所示：
<p> <router-link to = "/route1">Router Link 1</router-link> <router-link to = "/route2">Router Link 2</router-link> </p>
<router-link> 是一個元件，用於導航到要顯示給使用者的 HTML 內容。to 屬性是目標，即選擇要顯示內容的原始檔。
在上面的程式碼片段中，我們建立了兩個路由連結。
看一下指令碼部分，其中初始化了路由器。建立了兩個常量，如下所示：
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
它們具有模板，當單擊路由連結時需要顯示這些模板。
接下來是 routes 常量，它定義了要在 URL 中顯示的路徑。
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
Routes 定義路徑和元件。當用戶單擊路由連結時，路徑（即/route1）將顯示在 URL 中。
Component 獲取要顯示的模板名稱。routes 中的路徑需要與路由連結的 to 屬性匹配。
例如，<router-link to = ”path here”></router-link>
接下來，使用以下程式碼片段建立 VueRouter 例項。
const router = new VueRouter({
routes // short for `routes: routes`
});
VueRouter 建構函式將 routes 作為引數。路由物件使用以下程式碼片段分配給主 vue 例項：
var vm = new Vue({
el: '#app',
router
});
執行示例並在瀏覽器中檢視顯示。在檢查和檢查路由連結時，我們會發現它會向活動元素新增類，如下面的螢幕截圖所示。
新增的類是class = “router-link-exact-active router-link-active”。活動連結獲得如上圖所示的類。需要注意的另一件事是，<router-link> 呈現為一個 a 標籤。
路由連結的屬性
讓我們看看要傳遞給<router-link> 的更多屬性。
to
這是給定給 <router-link> 的目標路徑。單擊後，to 的值將內部傳遞給 router.push()。該值需要是字串或位置物件。使用物件時，我們需要像示例 2 中那樣繫結它。
e.g. 1: <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
"{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.
以下是示例 3 的輸出。
在 URL 路徑中，name = Tery 是查詢字串的一部分。例如：https:///vueexamples/vue_router.html#/route1?name = Tery
replace
向路由連結新增 replace 將呼叫 router.replace() 而不是 router.push()。使用 replace，不會儲存導航歷史記錄。
示例
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>
append
向 <router-link><router-link> 新增 append 將使路徑相對。
如果我們想從路徑為 /route1 的路由連結跳轉到路徑為 /route2 的路由連結，它將在瀏覽器中顯示路徑 /route1/route2。
示例
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>
tag
目前 <router-link> 呈現為 a 標籤。如果我們想將其呈現為其他標籤，我們需要使用 tag = ”tagname” 指定。
示例
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
我們已將標籤指定為 span，這就是在瀏覽器中顯示的內容。
現在顯示的標籤是 span 標籤。當我們單擊路由連結進行導航時，我們仍然會看到點選跳轉。
active-class
預設情況下，當路由連結處於活動狀態時新增的活動類是 router-link-active。我們可以透過設定相同的類來覆蓋它，如下面的程式碼所示。
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
使用的類是 active_class = ”_active”。這是在瀏覽器中顯示的輸出。
exact-active-class
應用的預設 exactactive 類是 router-link-exact-active。我們可以使用 exact-active-class 來覆蓋它。
示例
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
這就是在瀏覽器中顯示的內容。
event
目前，router-link 的預設事件是 click 事件。我們可以使用 event 屬性更改它。
示例
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
現在，當我們滑鼠懸停在路由連結上時，它將進行導航，如下面的瀏覽器所示。將滑鼠懸停在路由連結 1 上，我們將看到導航發生變化。
VueJS - 混入 (Mixins)
Mixin 主要用於元件。它們在元件之間共享可重用的程式碼。當元件使用 mixin 時，mixin 的所有選項都成為元件選項的一部分。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
alert("Welcome to mixin example");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>
輸出
當 mixin 和元件包含重疊的選項時，它們將合併，如下面的示例所示。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var mixin = {
created: function () {
console.log('mixin called')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('component called')
}
});
</script>
</body>
</html>
現在 mixin 和 vue 例項具有相同的方法 created。這是我們在控制檯中看到的輸出。如您所見，vue 和 mixin 的選項將合併。
如果我們在 methods 中碰巧具有相同的函式名稱，則主 vue 例項將具有優先順序。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var mixin = {
methods: {
hellworld: function () {
console.log('In HelloWorld');
},
samemethod: function () {
console.log('Mixin:Same Method');
}
}
};
var vm = new Vue({
mixins: [mixin],
methods: {
start: function () {
console.log('start method');
},
samemethod: function () {
console.log('Main: same method');
}
}
});
vm.hellworld();
vm.start();
vm.samemethod();
</script>
</body>
</html>
我們將看到 mixin 具有一個 methods 屬性，其中定義了 helloworld 和 samemethod 函式。同樣，vue 例項具有一個 methods 屬性，其中再次定義了兩個方法 start 和 samemethod。
呼叫每個以下方法。
vm.hellworld(); // In HelloWorld vm.start(); // start method vm.samemethod(); // Main: same method
如上所示，我們呼叫了 helloworld、start 和 samemethod 函式。samemethod 也存在於 mixin 中，但是，將優先考慮主例項，如下面的控制檯所示。
VueJS - 渲染函式
我們已經看到了元件及其用法。例如，我們有一些需要在整個專案中重用的內容。我們可以將其轉換為元件並使用它。
讓我們來看一個簡單元件的示例，並瞭解其 render 函式需要做什麼。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1>Hello World</h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>
考慮上面列印“Hello World”的簡單元件示例，如下面的螢幕截圖所示。
現在，如果我們想重用該元件，我們可以透過再次列印它來實現。例如，
<div id = "component_test"> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> </div>
輸出將如下所示。
但是，現在我們需要對元件進行一些更改。我們不想列印相同的文字。我們該如何更改它？如果我們在元件內部鍵入一些內容，它是否會被考慮？
讓我們考慮下面的示例，看看會發生什麼。
<div id = "component_test"> <testcomponent>Hello Jai</testcomponent> <testcomponent>Hello Roy</testcomponent> <testcomponent>Hello Ria</testcomponent> <testcomponent>Hello Ben</testcomponent> </div>
輸出與我們之前看到的一樣。它不會像我們想要的那樣更改文字。
元件確實提供了一些稱為插槽 (slots) 的東西。讓我們使用它，看看是否能得到想要的結果。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1><slot></slot></h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>
如上面的程式碼所示，我們在模板中添加了插槽，因此它現在採用要傳送到元件中的值，如下面的螢幕截圖所示。
現在，讓我們考慮一下我們想要更改顏色和大小。例如，目前我們使用的是 h1 標籤，我們想將同一個元件的 HTML 標籤更改為 p 標籤或 div 標籤。我們如何才能靈活地進行如此多的更改？
我們可以透過 render 函式來實現。render 函式有助於使元件動態化，並透過保持通用性和幫助使用同一個元件傳遞引數來使用它。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>
在上面的程式碼中，我們更改了元件並使用以下程式碼片段添加了帶有 props 屬性的 render 函式。
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});
props 看起來像這樣。
props:{
elementtype:{
attributes:String,
required:true
}
}
我們定義了一個名為 elementtype 的屬性，它採用字串型別的屬性欄位。另一個必需欄位，它提到該欄位是必需的。
在 render 函式中，我們使用了 elementtype 屬性，如下面的程式碼片段所示。
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
}
render 函式採用 createElement 作為引數並返回相同的引數。createElement 建立 DOM 元素的方式與 JavaScript 中相同。我們還使用 attrs 欄位中的值以逗號分隔 elementtype。
createElement 將第一個引數作為要建立的 elementtag。它使用以下程式碼片段傳遞給元件。
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
元件需要採用 props 欄位，如上所示。它以 : 開頭，後面是 props 的名稱。在這裡，我們傳遞元素標籤、顏色、字型大小和元素的 id。
在 render 函式中，在 createElement 中，我們以逗號分隔，因此第一個元素是 elementtag，它被傳遞給 createElemet，如下面的程式碼片段所示。
return createElement(
a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
a[0] 是 html 元素標籤。下一個引數是元素標籤的屬性。它們在以下程式碼片段的 attr 欄位中定義。
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
我們為元素標籤定義了兩個屬性 - id 和 style。對於 id，我們傳遞 a[3]，這是我們在以逗號分隔後得到的值。使用 style，我們定義了顏色和字型大小。
最後一個是插槽，即我們在以下程式碼片段的元件中給出的訊息。
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
我們使用以下程式碼片段在 createElement 中定義了要列印的文字。
this.$slots.default
它採用元件欄位中分配的預設值。
以下是我們在瀏覽器中獲得的輸出。
這些元素也顯示了結構。這些是我們定義的元件：
<div id = "component_test"> <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent> <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent> <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent> <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent> </div>
VueJS - 響應式介面
VueJS 提供了選項，可以為動態新增的屬性新增反應性。假設我們已經建立了 vue 例項，並且需要新增 watch 屬性。可以按如下方式完成：
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
setTimeout(
function(){
vm.counter = 20;
},2000
);
</script>
</body>
</html>
在 data 物件中定義了一個屬性 counter 為 1。當我們單擊按鈕時，counter 會遞增。
Vue 例項已建立。要向其中新增 watch，我們需要按如下方式進行：
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
我們需要使用 $watch 在 vue 例項之外新增 watch。添加了一個 alert，它顯示 counter 屬性的值變化。還添加了一個 timer 函式，即 setTimeout，它將 counter 值設定為 20。
setTimeout(
function(){
vm.counter = 20;
},2000
);
每當 counter 更改時，watch 方法中的 alert 將被觸發，如下面的螢幕截圖所示。
VueJS 無法檢測屬性的新增和刪除。最好的方法是在 Vue 例項中預先宣告需要反應性的屬性。如果我們需要在執行時新增屬性，我們可以使用 Vue 全域性方法 Vue.set 和 Vue.delete。
Vue.set
此方法有助於在物件上設定屬性。它用於解決 Vue 無法檢測屬性新增的限制。
語法
Vue.set( target, key, value )
其中，
target：可以是物件或陣列
key：可以是字串或數字
value：可以是任何型別
讓我們來看一個例子。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
在上面的示例中，一開始使用以下程式碼片段建立了一個變數 myproduct。
var myproduct = {"id":1, name:"book", "price":"20.00"};
它按如下方式賦給 Vue 例項中的 data 物件：
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
假設我們想在建立 Vue 例項後向 myproduct 陣列新增另一個屬性。可以按如下方式完成：
vm.products.qty = "1";
讓我們在控制檯中檢視輸出。
如上所示，在 products 中添加了數量。get/set 方法（基本上添加了反應性）可用於 id、name 和 price，而不可用於 qty。
我們不能僅透過新增 vue 物件來實現反應性。VueJS 大多希望其所有屬性在一開始就建立。但是，如果我們需要稍後新增它，我們可以使用 Vue.set。為此，我們需要使用 vue 全域性方法，即 Vue.set。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
我們使用 Vue.set 透過以下程式碼片段將 qty 新增到陣列中。
Vue.set(myproduct, 'qty', 1);
我們已在控制檯中列印 Vue 物件，以下是輸出結果。
現在，我們可以看到使用 Vue.set 新增的 qty 的 get/set 方法。
Vue.delete
此函式用於動態刪除屬性。
示例
Vue.delete( target, key )
其中，
target：可以是物件或陣列
鍵：可以是字串或數字
要刪除任何屬性，我們可以使用 Vue.delete，如下面的程式碼所示。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
在上面的示例中，我們使用 Vue.delete 透過以下程式碼片段從陣列中刪除 price。
Vue.delete(myproduct, 'price');
以下是我們在控制檯中看到的輸出。
刪除後，我們只能看到 id 和 name，因為 price 已被刪除。我們還可以注意到 get/set 方法也被刪除了。
VueJS - 例子
示例 1：貨幣轉換器
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
#databinding{
padding: 20px 15px 15px 15px;
margin: 0 0 25px 0;
width: auto;
background-color: #e7e7e7;
}
span, option, input {
font-size:25px;
}
</style>
<div id = "databinding" style = "">
<h1>Currency Converter</h1>
<span>Enter Amount:</span><input type = "number" v-model.number = "amount" placeholder = "Enter Amount" /><br/><br/>
<span>Convert From:</span>
<select v-model = "convertfrom" style = "width:300px;font-size:25px;">
<option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
</select>
<span>Convert To:</span>
<select v-model = "convertto" style = "width:300px;font-size:25px;">
<option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
</select><br/><br/>
<span> {{amount}} {{convertfrom}} equals {{finalamount}} {{convertto}}</span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
currencyfrom : [
{name : "USD", desc:"US Dollar"},
{name:"EUR", desc:"Euro"},
{name:"INR", desc:"Indian Rupee"},
{name:"BHD", desc:"Bahraini Dinar"}
],
convertfrom: "INR",
convertto:"USD",
amount :""
},
computed :{
finalamount:function() {
var to = this.convertto;
var from = this.convertfrom;
var final;
switch(from) {
case "INR":
if (to == "USD") {
final = this.amount * 0.016;
}
if (to == "EUR") {
final = this.amount * 0.013;
}
if (to == "INR") {
final = this.amount;
}
if (to == "BHD") {
final = this.amount * 0.0059;
}
break;
case "USD":
if (to == "INR") {
final = this.amount * 63.88;
}
if (to == "EUR") {
final = this.amount * 0.84;
}
if (to == "USD") {
final = this.amount;
}
if (to == "BHD") {
final = this.amount * 0.38;
}
break;
case "EUR":
if (to == "INR") {
final = this.amount * 76.22;
}
if (to == "USD") {
final = this.amount * 1.19;
}
if (to == "EUR") {
final = this.amount;
}
if (to == "BHD") {
final = this.amount * 0.45;
}
break;
case "BHD":
if (to == "INR") {
final = this.amount *169.44;
}
if (to == "USD") {
final = this.amount * 2.65;
}
if (to == "EUR") {
final = this.amount * 2.22;
}
if (to == "BHD") {
final = this.amount;
}
break
}
return final;
}
}
});
</script>
</body>
</html>
輸出（轉換為美元）
輸出：轉換為巴林第納爾
說明 − 在上面的示例中，我們建立了一個貨幣轉換器，用於將一種貨幣的值轉換為另一種貨幣的選定值。我們建立了兩個貨幣下拉選單。當我們在文字框中輸入要轉換的金額時，轉換後的相同金額將顯示在下方。我們使用計算屬性來執行必要的貨幣轉換計算。
示例 2：客戶詳情
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
#databinding{
padding: 20px 15px 15px 15px;
margin: 0 0 25px 0;
width: auto;
}
span, option, input {
font-size:20px;
}
.Table{
display: table;
width:80%;
}
.Title{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row{
display: table-row;
}
.Cell{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
width:30%;
}
</style>
<div id = "databinding" style = "">
<h1>Customer Details</h1>
<span>First Name</span>
<input type = "text" placeholder = "Enter First Name" v-model = "fname"/>
<span>Last Name</span>
<input type = "text" placeholder = "Enter Last Name" v-model = "lname"/>
<span>Address</span>
<input type = "text" placeholder = "Enter Address" v-model = "addr"/>
<button v-on:click = "showdata" v-bind:style = "styleobj">Add</button>
<br/>
<br/>
<customercomponent
v-for = "(item, index) in custdet"
v-bind:item = "item"
v-bind:index = "index"
v-bind:itr = "item"
v-bind:key = "item.fname"
v-on:removeelement = "custdet.splice(index, 1)">
</customercomponent>
</div>
<script type = "text/javascript">
Vue.component('customercomponent',{
template : '<div class = "Table"><div class = "Row" v-bind:style = "styleobj"><div class = "Cell"><p>{{itr.fname}}</p></div><div class = "Cell"><p>{{itr.lname}}</p></div><div class = "Cell"><p>{{itr.addr}}</p></div><div class = "Cell"><p><button v-on:click = "$emit(\'removeelement\')">X</button></p></div></div></div>',
props: ['itr', 'index'],
data: function() {
return {
styleobj : {
backgroundColor:this.getcolor(),
fontSize : 20
}
}
},
methods:{
getcolor : function() {
if (this.index % 2) {
return "#FFE633";
} else {
return "#D4CA87";
}
}
}
});
var vm = new Vue({
el: '#databinding',
data: {
fname:'',
lname:'',
addr : '',
custdet:[],
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods :{
showdata : function() {
this.custdet.push({
fname: this.fname,
lname: this.lname,
addr : this.addr
});
this.fname = "";
this.lname = "";
this.addr = "";
}
}
});
</script>
</body>
</html>
輸出
刪除後的輸出
說明 − 在上面的示例中，我們有三個文字框用於輸入 - 名字、姓氏和地址。有一個新增按鈕，它將文字框中輸入的值以表格格式新增到表中，並帶有一個刪除按鈕。
表格格式是使用元件建立的。點選按鈕使用 emit 事件與父元件互動，以從陣列中刪除元素。輸入的值儲存在陣列中，並使用prop屬性與子元件共享。