vue原生实现
Vue 原生实现方法
Vue.js 提供了多种原生方式实现功能，无需依赖第三方库。以下是常见需求的实现方法：
数据绑定与响应式
Vue 的核心特性是数据绑定，通过 v-model 指令实现双向绑定：
<input v-model="message">
<p>{{ message }}</p>data() {
return {
message: ''
}
}条件渲染
使用 v-if 和 v-show 控制元素显示：
<div v-if="isVisible">条件渲染内容</div>
<div v-show="isActive">显示状态控制</div>列表渲染
v-for 指令实现列表渲染：
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.text }}
</li>
</ul>事件处理
通过 v-on 或 @ 简写绑定事件：
<button @click="handleClick">点击事件</button>methods: {
handleClick() {
console.log('按钮被点击');
}
}计算属性
对于复杂逻辑，使用计算属性：
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}组件通信
父子组件通过 props 和 events 通信：
// 父组件
<child-component :propData="parentData" @custom-event="handleEvent"></child-component>
// 子组件
props: ['propData'],
methods: {
triggerEvent() {
this.$emit('custom-event', payload);
}
}生命周期钩子
利用生命周期函数控制组件行为：
created() {
// 组件实例创建后调用
},
mounted() {
// DOM挂载后调用
}动态组件
通过 :is 实现动态组件切换：
<component :is="currentComponent"></component>插槽
使用插槽实现内容分发：
<!-- 父组件 -->
<child-component>
<template v-slot:header>
<h1>标题内容</h1>
</template>
</child-component>
<!-- 子组件 -->
<div>
<slot name="header"></slot>
</div>自定义指令
创建自定义指令扩展功能：
Vue.directive('focus', {
inserted: function(el) {
el.focus();
}
});混入 (Mixins)
复用组件选项：
const myMixin = {
created() {
this.hello();
},
methods: {
hello() {
console.log('混入方法');
}
}
};
Vue.mixin(myMixin);过滤器
格式化文本显示：
Vue.filter('capitalize', function(value) {
if (!value) return '';
return value.toString().charAt(0).toUpperCase() + value.slice(1);
});过渡动画
使用内置过渡系统：
<transition name="fade">
<p v-if="show">过渡效果</p>
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}状态管理
小型应用可使用简单 store 模式：
const store = {
state: {
count: 0
},
increment() {
this.state.count++;
}
};路由
简单路由实现：
const routes = {
'/': Home,
'/about': About
};
window.addEventListener('popstate', () => {
app.currentRoute = window.location.pathname;
});表单验证
原生验证实现：
methods: {
validateForm() {
this.errors = {};
if (!this.form.name) this.errors.name = '姓名必填';
if (!this.form.email.includes('@')) this.errors.email = '邮箱格式错误';
return Object.keys(this.errors).length === 0;
}
}
