vue实现交互页面

Vue 实现交互页面的核心方法

数据绑定与响应式更新

使用 v-model 实现表单输入与数据的双向绑定：

<input v-model="message" placeholder="输入内容">
<p>当前内容：{{ message }}</p>

data() {
  return {
    message: ''
  }
}

事件处理

通过 v-on 或 @ 监听用户交互事件：

<button @click="handleClick">点击触发</button>

methods: {
  handleClick() {
    alert('按钮被点击');
  }
}

条件渲染

利用 v-if 或 v-show 动态控制元素显示：

<div v-if="isVisible">条件显示的内容</div>
<button @click="toggleVisible">切换显示</button>

data() {
  return {
    isVisible: true
  }
},
methods: {
  toggleVisible() {
    this.isVisible = !this.isVisible;
  }
}

列表渲染

使用 v-for 动态渲染列表数据：

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item.name }}
  </li>
</ul>

data() {
  return {
    items: [
      { name: '项目1' },
      { name: '项目2' }
    ]
  }
}

组件通信

父子组件通过 props 和 $emit 交互：

<!-- 父组件 -->
<child-component :title="parentTitle" @update="handleUpdate"/>

// 子组件
props: ['title'],
methods: {
  sendData() {
    this.$emit('update', '新数据');
  }
}

状态管理（Vuex）

复杂交互使用 Vuex 集中管理状态：

// store.js
state: { count: 0 },
mutations: {
  increment(state) {
    state.count++;
  }
}

<button @click="$store.commit('increment')">计数：{{ $store.state.count }}</button>

异步交互（Axios）

通过 Axios 实现数据请求：

methods: {
  fetchData() {
    axios.get('/api/data')
      .then(response => {
        this.data = response.data;
      });
  }
}

动态样式绑定

使用 :class 和 :style 实现交互样式变化：

<div :class="{ active: isActive }">动态类名</div>
<div :style="{ color: textColor }">动态样式</div>

路由交互（Vue Router）

通过路由实现页面跳转：

// 路由配置
const routes = [
  { path: '/detail/:id', component: Detail }
]

<router-link to="/detail/123">跳转详情页</router-link>