vue实现功能
Vue 功能实现方法
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是实现常见功能的几种方法：
数据绑定与响应式更新
在 Vue 中，数据绑定通过 v-model 指令实现双向绑定。例如，输入框与数据的同步更新：
<input v-model="message">
<p>{{ message }}</p>data() {
return {
message: ''
}
}条件渲染
使用 v-if 和 v-show 控制元素的显示与隐藏。v-if 是惰性的，v-show 总是渲染元素但切换 CSS 的 display 属性。
<div v-if="isVisible">显示内容</div>
<div v-show="isActive">激活状态</div>列表渲染
v-for 指令基于数组渲染列表，需要为每项提供唯一的 key 属性。
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.name }}
</li>
</ul>事件处理
通过 v-on 或 @ 简写监听 DOM 事件，执行方法或内联表达式。
<button @click="handleClick">点击</button>
<button @click="count++">计数: {{ count }}</button>组件通信
父组件通过 props 传递数据给子组件，子组件通过 $emit 触发事件通知父组件。
// 父组件
<ChildComponent :propData="data" @customEvent="handleEvent"/>
// 子组件
props: ['propData'],
methods: {
triggerEvent() {
this.$emit('customEvent', payload)
}
}状态管理（Vuex）
对于复杂应用状态，使用 Vuex 集中管理共享状态。
// store.js
const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) {
state.count++
}
}
})
// 组件中使用
this.$store.commit('increment')
console.log(this.$store.state.count)生命周期钩子
利用生命周期钩子执行特定阶段的逻辑，如 created 用于实例创建后，mounted 用于 DOM 挂载后。
export default {
created() {
// 数据初始化
},
mounted() {
// DOM 操作
}
}路由管理（Vue Router）
实现单页应用路由跳转和参数传递。
// 路由配置
const routes = [
{ path: '/home', component: Home },
{ path: '/user/:id', component: User }
]
// 组件内导航
this.$router.push('/home')
this.$router.push({ path: '/user', query: { id: 123 } })API 请求
通常使用 axios 进行 HTTP 请求，结合 async/await 处理异步逻辑。
methods: {
async fetchData() {
try {
const response = await axios.get('/api/data')
this.data = response.data
} catch (error) {
console.error(error)
}
}
}表单验证
可以使用 Vuelidate 或手动验证实现表单校验。
import { required, email } from 'vuelidate/lib/validators'
export default {
data() {
return { form: { email: '' } }
},
validations: {
form: { email: { required, email } }
}
}动画过渡
Vue 提供 <transition> 组件实现进入/离开动画。
<transition name="fade">
<p v-if="show">渐变内容</p>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>自定义指令
创建自定义指令处理 DOM 底层操作。
Vue.directive('focus', {
inserted(el) {
el.focus()
}
})
// 使用
<input v-focus>混入（Mixins）
复用组件选项逻辑，避免代码重复。
const myMixin = {
methods: {
sharedMethod() {
console.log('共享方法')
}
}
}
export default {
mixins: [myMixin],
created() {
this.sharedMethod()
}
}
