133 lines
4.2 KiB
JavaScript
133 lines
4.2 KiB
JavaScript
// Vue 3 应用配置
|
||
const { createApp } = Vue;
|
||
|
||
createApp({
|
||
// 数据定义
|
||
data() {
|
||
return {
|
||
title: 'Vue个人资料卡片学习示例',
|
||
isDarkTheme: false,
|
||
isEditing: false,
|
||
|
||
// 个人资料数据
|
||
profile: {
|
||
name: '张小明',
|
||
title: '前端开发工程师',
|
||
age: 25,
|
||
city: '北京',
|
||
email: 'zhangxiaoming@example.com',
|
||
avatar: 'https://via.placeholder.com/120x120/4A90E2/FFFFFF?text=张小明',
|
||
bio: '热爱编程，专注于Vue.js和现代前端技术。喜欢学习新技术，分享技术心得。',
|
||
skills: ['Vue.js', 'JavaScript', 'HTML/CSS', 'Node.js', 'Git']
|
||
},
|
||
|
||
// 编辑时的临时数据
|
||
editProfile: {}
|
||
}
|
||
},
|
||
|
||
// 方法定义
|
||
methods: {
|
||
// 切换编辑模式
|
||
toggleEdit() {
|
||
if (this.isEditing) {
|
||
// 保存编辑的数据
|
||
this.saveProfile();
|
||
} else {
|
||
// 进入编辑模式，复制当前数据到编辑对象
|
||
this.editProfile = { ...this.profile };
|
||
}
|
||
this.isEditing = !this.isEditing;
|
||
},
|
||
|
||
// 保存个人资料
|
||
saveProfile() {
|
||
// 验证数据
|
||
if (this.editProfile.name && this.editProfile.title) {
|
||
this.profile = { ...this.editProfile };
|
||
this.showMessage('个人资料已更新！', 'success');
|
||
} else {
|
||
this.showMessage('请填写姓名和职位！', 'error');
|
||
return;
|
||
}
|
||
},
|
||
|
||
// 切换主题
|
||
toggleTheme() {
|
||
this.isDarkTheme = !this.isDarkTheme;
|
||
this.showMessage(
|
||
`已切换到${this.isDarkTheme ? '深色' : '浅色'}主题`,
|
||
'info'
|
||
);
|
||
},
|
||
|
||
// 显示消息提示
|
||
showMessage(message, type = 'info') {
|
||
// 创建消息元素
|
||
const messageEl = document.createElement('div');
|
||
messageEl.className = `message message-${type}`;
|
||
messageEl.textContent = message;
|
||
|
||
// 添加到页面
|
||
document.body.appendChild(messageEl);
|
||
|
||
// 3秒后自动移除
|
||
setTimeout(() => {
|
||
if (messageEl.parentNode) {
|
||
messageEl.parentNode.removeChild(messageEl);
|
||
}
|
||
}, 3000);
|
||
},
|
||
|
||
// 重置资料到默认值
|
||
resetProfile() {
|
||
this.profile = {
|
||
name: '张小明',
|
||
title: '前端开发工程师',
|
||
age: 25,
|
||
city: '北京',
|
||
email: 'zhangxiaoming@example.com',
|
||
avatar: 'https://via.placeholder.com/120x120/4A90E2/FFFFFF?text=张小明',
|
||
bio: '热爱编程，专注于Vue.js和现代前端技术。喜欢学习新技术，分享技术心得。',
|
||
skills: ['Vue.js', 'JavaScript', 'HTML/CSS', 'Node.js', 'Git']
|
||
};
|
||
this.showMessage('已重置为默认资料', 'info');
|
||
}
|
||
},
|
||
|
||
// 计算属性
|
||
computed: {
|
||
// 计算年龄段
|
||
ageGroup() {
|
||
if (this.profile.age < 25) return '年轻有为';
|
||
if (this.profile.age < 35) return '正值壮年';
|
||
return '经验丰富';
|
||
},
|
||
|
||
// 技能数量
|
||
skillCount() {
|
||
return this.profile.skills.length;
|
||
}
|
||
},
|
||
|
||
// 生命周期钩子
|
||
mounted() {
|
||
console.log('Vue应用已挂载！');
|
||
this.showMessage('欢迎使用Vue个人资料卡片！', 'success');
|
||
|
||
// 从localStorage加载保存的主题设置
|
||
const savedTheme = localStorage.getItem('isDarkTheme');
|
||
if (savedTheme !== null) {
|
||
this.isDarkTheme = JSON.parse(savedTheme);
|
||
}
|
||
},
|
||
|
||
// 监听器
|
||
watch: {
|
||
// 监听主题变化，保存到localStorage
|
||
isDarkTheme(newValue) {
|
||
localStorage.setItem('isDarkTheme', JSON.stringify(newValue));
|
||
}
|
||
}
|
||
}).mount('#app');
|