接上文 Vue.js 學(xué)習(xí)筆記（一）數(shù)據(jù)綁定與指示器，環(huán)境搭建與配置等基礎(chǔ)內(nèi)容可前往參考
Events
用戶與 HTML 元素的交互行為都會(huì)觸發(fā)特定的事件。Vue.js 通過(guò) v-on 指示器創(chuàng)建對(duì)事件的綁定。
<template>
<div class="container-fluid">
<div class="bg-primary text-white m-2 p-3 text-center">
<h3 v-on:click="name = 'Clicked'">{{ name }}</h3>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
name: "Lifejacket"
}
},
}
</script>
events
click
click2
Methods & Events
<template>
<div class="container-fluid">
<div class="bg-primary text-white m-2 p-3 text-center">
<h3 v-on:click="handleEvent('Soccer Ball', $event)">{{ name }}</h3>
</div>
<div class="bg-primary text-white m-2 p-3 text-center">
<h3 v-on:click="handleEvent('Stadium', $event)">{{ name }}</h3>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
name: "Lifejacket"
}
},
methods: {
handleEvent(name, $event) {
this.name = `${name} - ${$event.type}`;
}
}
}
</script>
methods
methods2
綜合示例
<template>
<div class="container-fluid">
<h3 class="bg=primary text-white text-center mt-2 p-2">{{ message }}</h3>
<table class="table table-sm table-striped table-bordered">
<tr><th>Index</th><th>Name</th><th>Actions</th></tr>
<tr v-for="(name, index) in names" v-bind:key="name">
<td>{{ index }}</td>
<td>{{ name }}</td>
<td>
<button class="btn btn-sm bg-primary text-white"
v-on:click="handleClick(name)">
Select
</button>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data: function () {
return {
message: "Ready",
names: ["Kayak", "Lifejacket", "Soccer Ball", "Stadium"]
}
},
methods: {
handleClick(name) {
this.message = `Select: ${name}`;
}
}
}
</script>
v-for & events
Keyboard Events
<template>
<div class="container-fluid">
<div class="bg-primary p-4 text-white h3">
{{ message }}
</div>
<input class="form-control bg-light" placeholder="Type here..."
v-on:keydown.ctrl="handleKey" />
</div>
</template>
<script>
export default {
data: function () {
return {
message: "Ready",
}
},
methods: {
handleKey($event) {
this.message = $event.key;
}
}
}
</script>
keyboard
keyboard2
Form Elements
v-model 是 Vue.js 中用于 HTML 表單元素（input、select、textarea 等）的內(nèi)置指示器。它能夠在表單元素與數(shù)據(jù)之間創(chuàng)建雙向綁定，使得不管數(shù)據(jù)怎樣變更，元素的行為與數(shù)據(jù)值總可以保持一致性。
Two-Way Binding
<template>
<div class="container-fluid">
<div class="bg-info m-2 p-2 text-white">
<div>Data Value: {{ dataValue }}</div>
<div>Other Value: {{ otherValue || "(Empty)" }}</div>
</div>
<div class="bg-primary m-2 p-2 text-white">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"
v-model="dataValue" />
Data Value
</label>
</div>
</div>
<div class="bg-primary m-2 p-2">
<input type="text" class="form-control" v-model="otherValue" />
</div>
<div class="text-center m-2">
<button class="btn btn-secondary" v-on:click="reset">
Reset
</button>
</div>
</div>
</template>
<script>
export default {
name: "app",
data: function () {
return {
dataValue: false,
otherValue: ""
}
},
methods: {
reset() {
this.dataValue = false;
this.otherValue = "";
}
}
}
</script>
two-way binding
two-way binding 2
在上面的示例中，選中或取消 checkbox，在 input 中輸入任意文本內(nèi)容，與之關(guān)聯(lián)的數(shù)據(jù)
dataValue 和 otherValue 的值都會(huì)同步發(fā)生改變。反過(guò)來(lái)，在控制臺(tái)中手動(dòng)修改
dataValue 和 otherValue 的值，checkbox 和 input 元素也會(huì)立即產(chǎn)生相應(yīng)的變更。
Binding Text Fields
<template>
<div class="container-fluid">
<div class="bg-info m-2 p-2 text-white">
<div>Name: {{ name }}</div>
<div>Password: {{ password }}</div>
<div>Details: {{ details }}</div>
</div>
<div class="bg-primary m-2 p-2 text-white">
<div class="form-group">
<label>Name</label>
<input class="form-control" v-model="name" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" v-model="password" />
</div>
<div class="form-group">
<label>Detials</label>
<textarea class="form-control" v-model="details" />
</div>
</div>
</div>
</template>
<script>
export default {
name: "app",
data: function () {
return {
name: "Bob",
password: "secret",
details: "Has admin access"
}
}
}
</script>
image.png
Radio & Checkbox
<template>
<div class="container-fluid">
<div class="bg-info m-2 p-2 text-white">
<div>Name: {{ name }}</div>
<div>Has Admin Access: {{ hasAdminAccess }}</div>
</div>
<div class="bg-primary m-2 p-2 text-white">
<div class="form-check">
<input class="form-check-input" type="radio"
v-model="name" value="Bob" />
<label class="form-check-label">Bob</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
v-model="name" value="Alice" />
<label class="form-check-label">Alice</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox"
v-model="hasAdminAccess" />
<label class="form-check-label">Has Admin Access?</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: "app",
data: function () {
return {
name: "Bob",
hasAdminAccess: true
}
}
}
</script>
注意每個(gè) radio 元素都需要配置一個(gè) value 屬性，它決定了 v-model 指示器怎樣修改與之綁定的數(shù)據(jù)（name）的值。
radio & checkbox
Bind Select
<template>
<div class="container-fluid">
<div class="bg-info m-2 p-2 text-white">
<div>Name: {{ name }}</div>
</div>
<div class="bg-primary m-2 p-2 text-white">
<div class="form-group">
<label>Selected Names</label>
<select class="form-control" v-model="name">
<option value="all">Everyone</option>
<option v-for="n in allNames" v-bind:key="n"
v-bind:value="n">Just {{ n }}</option>
</select>
</div>
</div>
</div>
</template>
<script>
export default {
name: "app",
data: function () {
return {
allNames: ["Bob", "Alice", "Joe"],
name: "Bob"
}
}
}
</script>
注意代碼中 v-bind 指示器的使用。這里必須使用 v-bind 設(shè)置 option 的 value 屬性，因?yàn)榈忍?hào)后面的 n 是變量而不是某個(gè)具體的值。
bind select
Bind Array
<template>
<div class="container-fluid">
<div class="bg-info m-2 p-2 text-white">
<div>Selected Cities: {{ cities }}</div>
</div>
<div class="form-check m-2" v-for="city in cityNames" v-bind:key="city">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
v-model="cities" v-bind:value="city" />
{{ city }}
</label>
</div>
<div class="text-center">
<button v-on:click="reset" class="btn btn-info">Reset</button>
</div>
</div>
</template>
<script>
export default {
name: "app",
data: function () {
return {
cityNames: ["London", "New York", "Paris", "Berlin"],
cities: []
}
},
methods: {
reset() {
this.cities = [];
}
}
}
</script>
image.png
Form 元素自定義值
<template>
<div class="container-fluid">
<div class="m-2 p-2 text-white" v-bind:class="elemClass">
<div>Value: {{ elemClass }}</div>
</div>
<div class="form-check m-2">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
v-model="dataValue" />
Dark Color
</label>
</div>
</div>
</template>
<script>
export default {
name: "app",
data: function () {
return {
dataValue: false,
}
},
computed: {
elemClass() {
return this.dataValue ? "bg-primary" : "bg-info";
}
}
}
</script>
通過(guò) computed property 將 checkbox 的 true 和 false 值轉(zhuǎn)換為 <div> 元素的 bg-primary 和 bg-info class 屬性。
form element
form element 2
綜合示例
<template>
<div class="container-fluid">
<div class="m-2 p-2 text-white" v-bind:class="dataValue">
<div>Value: {{ dataValue }}</div>
</div>
<div class="form-check m-2">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
v-model="dataValue" v-bind:true-value="darkColor"
v-bind:false-value="lightColor" />
Dark Color
</label>
</div>
<div class="form-group m-2 p-2 bg-secondary">
<label>Color</label>
<select v-model="dataValue" class="form-control">
<option v-bind:value="darkColor">Dark Color</option>
<option v-bind:value="lightColor">Light Color</option>
</select>
</div>
<div class="form-check-inline m-2">
<label class="form-check-label">
<input type="radio" class="form-check-input"
v-model="dataValue" v-bind:value="darkColor" />
Dark Color
</label>
</div>
<div class="form-check-inline m-2">
<label class="form-check-lable">
<input type="radio" class="form-check-input"
v-model="dataValue" v-bind:value="lightColor" />
Light Color
</label>
</div>
</div>
</template>
<script>
export default {
name: "app",
data: function () {
return {
darkColor: "bg-primary",
lightColor: "bg-info",
dataValue: "bg-info"
}
},
}
</script>
radio & select
radio & select
