vue实现效果

Vue 实现常见效果的方法

数据绑定与响应式更新

Vue 的核心特性是数据绑定，通过 v-model 实现表单元素与数据的双向绑定。例如输入框与数据的实时同步：

<input v-model="message">
<p>{{ message }}</p>

数据变化会自动更新 DOM，无需手动操作。

条件渲染

使用 v-if 或 v-show 控制元素的显示隐藏：

<div v-if="isVisible">可见内容</div>
<div v-show="hasData">数据加载完成</div>

v-if 会销毁/重建 DOM 节点，v-show 仅切换 CSS 的 display 属性。

列表渲染

v-for 指令可渲染数组或对象数据：

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

:key 是必要的，帮助 Vue 高效更新虚拟 DOM。

事件处理

通过 v-on（简写 @）绑定事件：

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

方法定义在 methods 中：

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

动态样式与类名

:class 和 :style 实现动态样式：

<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

组件通信

父子组件通过 props 和 $emit 通信：

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

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

生命周期钩子

利用生命周期函数执行特定逻辑：

created() {
  // 实例创建后调用
},
mounted() {
  // DOM 挂载后调用
}

状态管理（Vuex）

复杂应用可使用 Vuex 管理全局状态：

// store.js
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

路由控制（Vue Router）

实现单页面应用路由：

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

动画过渡

<transition> 组件实现元素过渡效果：

<transition name="fade">
  <p v-if="show">淡入淡出效果</p>
</transition>

配合 CSS 定义过渡样式：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}