vue的表单数据收集案例之基本指令和自定义指令详解

Vue的表单数据收集是Vue.js中的一个重要的知识点，它可以帮助我们快速收集表单数据并进行处理。而在实际开发中，我们将会经常使用到Vue中的指令来帮助我们实现表单数据收集。其中，基本指令包括v-model、v-bind等，自定义指令主要指基于v-model进行二次封装的自定义指令。下面，我们将具体讲解关于Vue的表单数据收集案例之基本指令和自定义指令的攻略：

基本指令

v-model

v-model是Vue中最基本的指令之一，它可以轻松实现表单数据的双向绑定，即将表单中的数据绑定到Vue实例中的数据属性上，并将Vue实例中的数据属性的值更新到表单中。

示例1

假设我们有一个简单的表单，包含输入框和复选框，那么我们可以使用v-model指令来实现表单数据的双向绑定：

<div id="app">
  <input type="text" v-model="name">
  <br>
  <label><input type="checkbox" v-model="checked"> Are you agreed?</label>
  <br>
  <p>Name: {{ name }}</p>
  <p>Checked: {{ checked }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
      name: '',
      checked: false
  }
});
</script>

在上面的示例中，我们使用了v-model指令来分别绑定了name和checked这两个数据属性和表单中的输入框和复选框。这样，当用户在输入框或复选框中输入或选择数据时，Vue实例中的数据属性也会随之更新，进而渲染到页面的相关区域中。

v-bind

v-bind指令可以将Vue实例中的数据属性绑定到HTML元素的属性上，从而实现数据驱动视图的效果。

示例2

以下示例中，我们将Vue实例中的url属性的值绑定到了<a>标签的href属性上：

<div id="app">
  <a v-bind:href="url">Vue.js official website</a>
</div>

<script>
new Vue({
  el: '#app',
  data: {
      url: 'https://cn.vuejs.org/'
  }
});
</script>

在这个示例中，我们使用了v-bind指令将Vue实例中的url属性绑定到了<a>标签的href属性上，这样当我们修改Vue实例中的url属性时，<a>标签的href属性也会随之自动更新。

自定义指令

自定义指令是Vue.js中的一个重要特性，它可以帮助我们将Vue中的逻辑与DOM元素进行分离，从而实现更加灵活和复杂的界面实现。自定义指令主要是基于v-model指令进行二次封装的。

自定义双向绑定指令

自定义双向绑定指令v-two-way可以将输入框的数据与Vue实例中的数据双向绑定，具体实现如下：

<div id="app">
  <input type="text" v-two-way:value="name">
  <p>Name: {{ name }}</p>
</div>

<script>
// 注册自定义指令 v-two-way
Vue.directive('two-way', {
  bind: function (el, binding, vnode) {
    el.value = binding.value // 将输入框的value设为属性值
    el.addEventListener('input', function () {
      vnode.context[binding.expression] = el.value // 将输入框的值设为实例数据的值
    })
  },
  update: function (el, binding) {
    el.value = binding.value // 更新输入框的值
  }
})

new Vue({
  el: '#app',
  data: {
    name: ''
  }
})
</script>

在这个示例中，我们使用自定义指令v-two-way来将输入框的数据与Vue实例中的数据双向绑定。在自定义指令的实现中，我们通过bind方法来初始化输入框的value属性，并为输入框绑定了input事件。当输入框的值发生变化时，我们使用vnode.context来访问Vue实例，并将输入框的值设为实例数据的值，进而实现对Vue实例中数据属性的双向绑定。

自定义表单验证指令

自定义表单验证指令v-validate可以根据用户的输入，实时验证表单数据是否合法，具体实现如下：

<div id="app">
  <form v-validate>
    <input type="text" v-model="name" name="name" placeholder="请输入用户名" required>
    <br>
    <input type="email" v-model="email" name="email" placeholder="请输入邮箱" required>
    <br>
    <button type="submit">提交</button>
  </form>
</div>

<script>
// 定义表单验证规则
const rules = {
  name: {
    required: true,
    minlength: 2,
    maxlength: 20
  },
  email: {
    required: true,
    email: true
  }
}

// 注册自定义指令 v-validate
Vue.directive('validate', {
  inserted: function (el, binding, vnode) {
    const inputs = el.querySelectorAll('input, textarea, select')
    for (let i = 0; i < inputs.length; i++) {
      inputs[i].addEventListener('blur', function () {
        const input = this
        const name = input.name
        const value = input.value
        const $error = document.createElement('span')
        $error.className = 'error'
        for (let rule in rules[name]) {
          switch (rule) {
            case 'required':
              if (!value) {
                $error.innerHTML = '不能为空'
                input.parentNode.appendChild($error)
              } else {
                removeError(input)
              }
              break
            case 'minlength':
              if (value.length < rules[name][rule]) {
                $error.innerHTML = `至少${rules[name][rule]}个字符`
                input.parentNode.appendChild($error)
              } else {
                removeError(input)
              }
              break
            case 'maxlength':
              if (value.length > rules[name][rule]) {
                $error.innerHTML = `最多${rules[name][rule]}个字符`
                input.parentNode.appendChild($error)
              } else {
                removeError(input)
              }
              break
            case 'email':
              if (!value.match(/^\w+@[a-z0-9]+(\.[a-z]+){1,2}$/i)) {
                $error.innerHTML = '邮箱格式错误'
                input.parentNode.appendChild($error)
              } else {
                removeError(input)
              }
              break
          }
        }

        function removeError (input) {
          const $error = input.parentNode.querySelector('.error')
          if ($error) {
            input.parentNode.removeChild($error)
          }
        }
      })
    }

    el.addEventListener('submit', function (e) {
      const isValid = []
      for (let i = 0; i < inputs.length; i++) {
        inputs[i].dispatchEvent(new Event('blur'))
        isValid.push(!inputs[i].parentNode.querySelector('.error'))
      }
      if (!isValid.includes(false)) {
        alert(JSON.stringify(vnode.context))
        e.preventDefault()
      }
    })
  }
})

new Vue({
  el: '#app',
  data: {
    name: '',
    email: ''
  }
})
</script>

在上面的示例中，我们使用了自定义指令v-validate来实现表单输入验证。在自定义指令的实现中，我们首先定义了表单验证规则rules，它是一个对象，其中包含多个属性，每个属性代表一个表单项的验证规则。在自定义指令的inserted方法中，我们为表单中的所有输入框添加了blur事件，并进行相应的表单验证规则处理。当输入框的值不符合规则时，我们添加了一个error的span元素用于提示用户；当输入框的值符合规则时，我们则将该元素从DOM树中移除。最后，在表单提交时，我们依次触发表单各个输入框的blur事件，并检查是否存在未通过验证的输入框。如果存在，则阻止表单的默认提交行为，否则我们输出表单数据，并将其存入Vue实例中。