接上文 Vue.js 学习笔记（一）数据绑定与指示器，环境搭建与配置等基础内容可前往参考
Events
用户与 HTML 元素的交互行为都会触发特定的事件。Vue.js 通过 v-on 指示器创建对事件的绑定。
<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 等）的内置指示器。它能够在表单元素与数据之间创建双向绑定，使得不管数据怎样变更，元素的行为与数据值总可以保持一致性。
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 中输入任意文本内容，与之关联的数据
dataValue 和 otherValue 的值都会同步发生改变。反过来，在控制台中手动修改
dataValue 和 otherValue 的值，checkbox 和 input 元素也会立即产生相应的变更。
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>
注意每个 radio 元素都需要配置一个 value 属性，它决定了 v-model 指示器怎样修改与之绑定的数据（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 设置 option 的 value 属性，因为等号后面的 n 是变量而不是某个具体的值。
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>
通过 computed property 将 checkbox 的 true 和 false 值转换为 <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
