vue如何实现交互
Vue 实现交互的核心方法
数据绑定
Vue 通过 v-model 实现表单元素与数据的双向绑定，实时同步用户输入与数据状态。
<input v-model="message">
<p>{{ message }}</p>事件处理
使用 v-on（简写 @）监听 DOM 事件，触发方法或直接执行表达式。
<button @click="counter++">增加计数</button>
<button @click="resetCounter">重置</button>条件渲染
v-if 和 v-show 根据条件动态显示/隐藏元素，前者销毁节点，后者切换 CSS 显示属性。
<div v-if="isVisible">仅当条件为真时渲染</div>
<div v-show="hasError">始终存在但可能隐藏</div>列表渲染
v-for 基于数组或对象生成动态列表，需配合 :key 提升性能。
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.text }}
</li>计算属性
通过 computed 定义依赖其他属性的动态值，结果会被缓存。
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}侦听器
watch 监听数据变化，适合执行异步或复杂操作。
watch: {
question(newVal) {
this.fetchAnswer(newVal);
}
}组件通信
父子组件通过 props 传递数据，子组件用 $emit 触发父组件事件。
// 父组件
<Child :title="parentTitle" @update="handleUpdate"/>
// 子组件
props: ['title'],
methods: {
sendData() {
this.$emit('update', newData);
}
}状态管理
复杂应用可用 Vuex 集中管理状态，通过 mutations 修改数据。
// store.js
state: { count: 0 },
mutations: {
increment(state) {
state.count++;
}
}
// 组件中调用
this.$store.commit('increment');生命周期钩子
在特定阶段执行逻辑，如 mounted 用于 DOM 初始化完成后操作。
mounted() {
this.loadUserData();
}自定义指令
注册全局或局部指令扩展 DOM 功能。
// 全局指令
Vue.directive('focus', {
inserted(el) {
el.focus();
}
});
// 使用
<input v-focus>
