一场跨界挑战的Vue之旅（二）：交互设计实践探索

2023-09-24 11:29:22

Vue.js：初学者交互设计实战

跨越语言藩篱，探索前端交互

作为一名久经沙场的 Java 开发者，我对前端世界的好奇心与日俱增。Vue.js，这个如星光般闪耀的前端框架，吸引着我踏上了一场跨界挑战之旅。在这段征途中，我将运用我熟稔的编程思维，深入探究 Vue.js 的奥妙，并亲身体验交互设计的魅力。

联动效果的舞步

交互设计的精髓之一，便是元素之间的联动。试想，当你在下拉菜单中切换省份时，城市选择器中的选项也会随之而变。这便是联动效果，它让用户操作更加便捷。

在 Vue.js 的世界里，实现联动效果轻而易举。通过巧妙地运用 v-model 指令和 computed 属性，我们可以轻松打造出这种灵动的交互。让我们用一个示例来揭开它的秘密：

<div>
  <select v-model="selectedProvince">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
  </select>
  <div v-if="selectedProvince === '北京'">
    北京的城市：
    <select v-model="selectedCity">
      <option value="东城区">东城区</option>
      <option value="西城区">西城区</option>
      <option value="朝阳区">朝阳区</option>
    </select>
  </div>
  <div v-else-if="selectedProvince === '上海'">
    上海的城市：
    <select v-model="selectedCity">
      <option value="黄浦区">黄浦区</option>
      <option value="徐汇区">徐汇区</option>
      <option value="长宁区">长宁区</option>
    </select>
  </div>
  <div v-else-if="selectedProvince === '广州'">
    广州的城市：
    <select v-model="selectedCity">
      <option value="越秀区">越秀区</option>
      <option value="荔湾区">荔湾区</option>
      <option value="海珠区">海珠区</option>
    </select>
  </div>
</div>

在这段代码中，v-model 指令将下拉菜单的选中项绑定到 selectedProvince 数据属性。当省份切换时，selectedProvince 的值也会随之改变。而 computed 属性 cities 则负责动态计算当前省份下的城市列表。最后，通过 v-if 和 v-else-if 指令，我们控制城市选择器的显示和隐藏，实现省份切换时的城市联动效果。

表单验证的关卡

交互设计的另一重要方面是表单验证。当用户在表单中输入数据时，我们需要确保其格式正确且符合要求。在 Vue.js 的怀抱中，Vuelidate 库成为了表单验证的得力助手。

import { required, email } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      name: '',
      email: '',
    };
  },
  validations: {
    name: {
      required,
    },
    email: {
      required,
      email,
    },
  },
  methods: {
    submitForm() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        // 表单验证失败
      } else {
        // 表单验证通过
      }
    },
  },
};