basic

1. 选项卡 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <button v-for="tab in tabs" :key="tab" @click="activeTab = tab">
        {{ tab }}
      </button>
    </div>
    <div v-if="activeTab === 'Tab 1'">
      Content of Tab 1
    </div>
    <div v-if="activeTab === 'Tab 2'">
      Content of Tab 2
    </div>
    <div v-if="activeTab === 'Tab 3'">
      Content of Tab 3
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
        activeTab: 'Tab 1'
      }
    })
  </script>
</body>
</html>

2.待办事项列表 #

项目描述： 在这个应用中，用户可以添加待办事项、标记完成以及删除待办事项。会使用到 v-for 来循环渲染待办事项，v-if 和 v-else 来控制待办事项是否显示为完成。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js To-Do List</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="newTask" @keyup.enter="addTask"/>
        <button @click="addTask">Add</button>
        <ul>
            <li v-for="(task, index) in tasks" :key="index">
                <span v-if="task.completed" @click="toggleCompletion(index)" style="text-decoration: line-through;">{{ task.name }}</span>
                <span v-else @click="toggleCompletion(index)">{{ task.name }}</span>
                <button @click="removeTask(index)">Delete</button>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                newTask: '',
                tasks: [
                    { name: 'Buy milk', completed: false },
                    { name: 'Go to the gym', completed: false },
                ]
            },
            methods: {
                addTask() {
                    if(this.newTask === '') return;
                    this.tasks.push({ name: this.newTask, completed: false });
                    this.newTask = '';
                },
                removeTask(index) {
                    this.tasks.splice(index, 1);
                },
                toggleCompletion(index) {
                    this.tasks[index].completed = !this.tasks[index].completed;
                }
            }
        });
    </script>
</body>
</html>

使用 v-model 绑定了一个新任务的输入字段。
使用 v-for 循环渲染每一个任务。
使用 v-if 和 v-else 控制任务显示为已完成或未完成。
使用 @click 和 `@keyup.enter` 添加了点击和键盘事件。

3. 购物车 #

项目描述： 用户可以选择产品添加到购物车。使用 v-for 渲染产品列表，使用 v-on 监听添加到购物车的操作。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Shopping Cart</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Product List</h1>
        <ul>
            <li v-for="(product, index) in products" :key="index">
                {{ product.name }} - ${{ product.price }}
                <button @click="addToCart(index)">Add to Cart</button>
            </li>
        </ul>
        <h1>Your Cart</h1>
        <ul>
            <li v-for="(item, index) in cart" :key="item.id">
                {{ item.name }} - ${{ item.price }} x {{ item.quantity }}
            </li>
        </ul>
        <p>Total: ${{ total }}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                products: [
                    { id: 1, name: 'Apple', price: 1.2 },
                    { id: 2, name: 'Banana', price: 0.9 },
                    { id: 3, name: 'Cherry', price: 2.5 }
                ],
                cart: []
            },
            computed: {
                total() {
                    return this.cart.reduce((acc, item) => acc + (item.price * item.quantity), 0).toFixed(2);
                }
            },
            methods: {
                addToCart(index) {
                    const product = this.products[index];
                    const found = this.cart.find(item => item.id === product.id);
                    if (found) {
                        found.quantity++;
                    } else {
                        this.cart.push({ ...product, quantity: 1 });
                    }
                }
            }
        });
    </script>
</body>
</html>

使用 v-for 来循环渲染产品列表和购物车列表。
使用 @click（这实际上是 v-on:click 的缩写）来监听“添加到购物车”的按钮点击事件。
在方法 addToCart 中，根据产品 ID 检查该产品是否已经在购物车中。如果在，就增加数量；如果不在，就添加到购物车。
使用一个计算属性 total 来计算购物车的总价。

4. 用户注册 #

4.1 表单修饰符 #

在 Vue 中，表单修饰符是一些特殊的指令后缀，用于帮助你以方便的方式处理用户输入。这些修饰符通常用于 v-model 指令中，并可以轻松处理用户输入的格式和行为。以下是 Vue 中常用的一些表单修饰符：

.lazy

在默认情况下，v-model 会在每次 input 事件触发后立即更新值。如果你使用 .lazy 修饰符，那么它会在 change 事件上而不是 input 事件上进行同步。

<!-- 使用 .lazy 修饰符 -->
<input v-model.lazy="message" />

.number

该修饰符会尝试将用户的输入值转换为数值类型。这是有用的，因为 HTML 表单字段的值通常都是字符串。

<!-- 使用 .number 修饰符 -->
<input v-model.number="age" type="number">

.trim

该修饰符会去除用户输入的前后空格。

<!-- 使用 .trim 修饰符 -->
<input v-model.trim="username" />

多个修饰符

你也可以组合使用多个修饰符。

<!-- 使用多个修饰符 -->
<input v-model.trim.lazy="email" />

自定义修饰符

Vue 不支持直接创建自定义的表单修饰符，但你通常可以通过计算属性或者方法实现同样的效果。

使用这些修饰符可以让你的表单处理逻辑更为简单和清晰。需要注意的是，这些修饰符只影响 v-model 的行为，不会改变其他指令或原生 DOM 事件的行为。

4.2 用户注册表单 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <style>
    #app {
      display: flex;
      justify-content: center;
      flex: 1;
    }
  </style>
</head>
<body>
  <div id="app">
    <form @submit.prevent="submitForm" style="width:15%">
      <label>全名:</label>
      <input type="text" v-model.lazy.trim="form.name"><br/>
      <label>邮箱:</label>
      <input type="email" v-model.trim="form.email"><br/>
      <label>密码:</label>
      <input type="password" v-model="form.password"><br/>
      <label>年龄:</label>
      <input type="number" v-model.number="form.age"><br/>
      <label>性别:</label>
      <input type="radio" id="man" value="man" v-model="form.gender">
      <label for="man">男</label>
      <input type="radio" id="female" value="female" v-model="form.gender">
      <label for="female">女</label><br/>
      <label>国家:</label>
      <select v-model="form.country">
        <option v-for="country in COUNTRIES" :value="country.value" :key="country.value">{{ country.title }}</option>
      </select><br/>
      <label>爱好:</label>
      <template v-for="hobby in HOBBIES" :key="hobby.value">
        <input type="checkbox" :id="hobby.value" :value="hobby.value" v-model="form.hobbies">
        <label :for="hobby.value">{{hobby.title}}</label>
      </template><br/>
      <label>简介:</label>
      <textarea v-model="form.bio"></textarea><br/>
      <button type="submit">注册</button>
    </form>
    <div style="width:15%">
      <p>全名: {{ form.name }}</p>
      <p>邮箱: {{ form.email }}</p>
      <p>密码: {{ form.password }}</p>
      <p>年龄: {{ form.age }}</p>
      <p>性别: {{ form.gender }}</p>
      <p>国家: {{ form.country }}</p>
      <p>爱好: {{ form.hobbies.join(', ') }}</p>
      <p>简介: {{ form.bio }}</p>
    </div>
  </div>
  <script>
    const COUNTRIES = [
      { value: 'cn', title: '中国' },
      { value: 'us', title: '美国' },
      { value: 'uk', title: '英国' }
    ];
    const HOBBIES = [
      { value: 'football', title: '足球' },
      { value: 'basketball', title: '篮球' },
      { value: 'baseball', title: '棒球' }
    ]
    new Vue({
      el: '#app',
      data: function
      () {
        return {
          HOBBIES,
          COUNTRIES,
          form: {
            name: '',
            email: '',
            password: '',
            gender: 'man',
            country: 'cn',
            hobbies: [],
            bio: '',
            age: 18,
          },
          checkAll: false,
          isIndeterminate: true,
        }
      },
      methods: {
        submitForm() {
          console.log(this.form);
        }
      }
    })
  </script>
</body>
</html>