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

接上文 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

参考资料

Pro Vue.js 2

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue.js 1.0 Official Guide Note
    Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性：var data = { a:...
    云之外阅读 2,241评论 0赞 6
  • Vue.js学习
    一、了解Vue.js 1.1.1 Vue.js是什么？ 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,370评论 0赞 3
  • Vue.js学习笔记
    一、Vue 简介及安装 简介 Vue只关注视图层,采用自底向上的增量开发的设计 Vue的目标是通过尽可能简单的AP...
    ting723阅读 548评论 3赞 2
  • Vue.js基础手册
    Vue.js是什么 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其...
    鱼鱼吃猫猫阅读 3,282评论 1赞 12
  • Vue.js入门学习
    Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue...
    纯情_小火鸡阅读 485评论 1赞 2