Master Uniapp Vue Core Directives in 5 Minutes – Hands‑On Guide

Key Operations (Must‑Read)

1. Core Vue Directives (Only Four Needed)

Data binding: {{ }} – renders variables.

Event binding: @click – handles click interactions.

Conditional rendering: v-if – shows or hides content based on a condition.

List rendering: v-for – iterates over arrays, e.g., a product list.

2. Hands‑On Scenario: Build a Simple Personal Info Page

Open the my.vue page created in the previous series.

Define data in the script section using a data() function.

Use the directives in the template to render data and bind events.

Run the project, observe the result, and modify the code with live debugging.

Core Code (Copy‑Paste Ready)

<template>
  <view class="my-container">
    <!-- 1. Data binding: render variables -->
    <view class="info">
      <text class="title">Personal Info</text>
      <view>Name: {{ name }}</view>
      <view>Age: {{ age }}</view>
    </view>

    <!-- 2. Event binding: click button to change age -->
    <button @click="changeAge">Change Age</button>

    <!-- 3. Conditional rendering: show adult if age >= 18 -->
    <view v-if="age >= 18" class="adult">Adult</view>
    <view v-else class="minor">Minor</view>

    <!-- 4. List rendering: iterate hobbies -->
    <view class="hobby">
      <text>My hobbies:</text>
      <view v-for="(item, index) in hobby" :key="index">
        {{ index+1 }}. {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: "Zhang San", // define variable
      age: 18,
      hobby: ["Uniapp development", "Frontend learning", "Food"] // define array
    };
  },
  methods: {
    // define click handler
    changeAge() {
      this.age += 1; // increment age variable
    }
  }
};
</script>

<style scoped>
.my-container { padding: 20rpx; }
.info { margin-bottom: 20rpx; }
.title { font-size: 32rpx; font-weight: bold; margin-bottom: 10rpx; display: block; }
button { width: 100%; height: 80rpx; background-color: #007aff; color: #fff; margin: 20rpx 0; }
.adult { color: green; }
.minor { color: red; }
.hobby { margin-top: 20rpx; }
</style>

Common Pitfalls

❌ Data binding not working: ensure the variable is defined in data() and the name inside {{ }} matches exactly.

❌ Click event not working: verify the method name matches the one defined in methods; using @click is preferred over v-on:click for simplicity.

❌ v-for errors: always provide a :key attribute (e.g., the index) to avoid rendering issues.

✅ Uniapp templates must have a single root view element; all content should be placed inside that root.