Vue.js 学习笔记（二）事件与表单元素

发表于 | 分类于 | | 阅读次数:
字数统计: 14k | 阅读时长 ≈ 0:14

接上文 Vue.js 学习笔记（一）数据绑定与指示器，环境搭建与配置等基础内容可前往参考

Events

用户与 HTML 元素的交互行为都会触发特定的事件。Vue.js 通过 v-on 指示器创建对事件的绑定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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

综合示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 元素自定义值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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

综合示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<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

参考资料

Pro Vue.js 2