Vue.js 代码示例
Vue 组件示例 - 用户列表
Vue Component
<template>
<div class="user-list">
<h3>用户列表</h3>
<div v-for="user in users" :key="user.id" class="user-card">
<img :src="user.avatar" :alt="user.name" class="avatar">
<div class="user-info">
<h4>{{ user.name }}</h4>
<p>{{ user.email }}</p>
<button @click="editUser(user)" class="edit-btn">编辑</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'UserList',
data() {
return {
users: [
{ id: 1, name: '张三', email: 'zhangsan@example.com', avatar: 'avatar1.jpg' },
{ id: 2, name: '李四', email: 'lisi@example.com', avatar: 'avatar2.jpg' },
{ id: 3, name: '王五', email: 'wangwu@example.com', avatar: 'avatar3.jpg' }
]
}
},
methods: {
editUser(user) {
this.$emit('edit-user', user)
}
}
}
</script>
<style scoped>
.user-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.user-card {
display: flex;
align-items: center;
padding: 15px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: white;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
}
.edit-btn {
background: #667eea;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
</style>
Vue Composition API 示例
Composition API
<template>
<div class="counter">
<h3>计数器: {{ count }}</h3>
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
<button @click="reset">重置</button>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
const decrement = () => {
count.value--
}
const reset = () => {
count.value = 0
}
// 计算属性示例
const isPositive = computed(() => count.value > 0)
// 监听器示例
watch(count, (newVal, oldVal) => {
console.log(`计数从 ${oldVal} 变为 ${newVal}`)
})
</script>
<style scoped>
.counter {
padding: 20px;
text-align: center;
background: #f7fafc;
border-radius: 8px;
}
button {
margin: 0 5px;
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
background: #667eea;
color: white;
transition: background 0.3s;
}
button:hover {
background: #5a67d8;
}
</style>
JavaScript 代码示例
异步操作与 Promise 示例
Async/Await
// 使用 async/await 处理异步操作
async function fetchUserData(userId) {
try {
// 模拟 API 调用
const response = await fetch(`/api/users/${userId}`)
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
const userData = await response.json()
return userData
} catch (error) {
console.error('获取用户数据失败:', error)
throw error
}
}
// 并行处理多个异步操作
async function fetchMultipleUsers(userIds) {
try {
const userPromises = userIds.map(id => fetchUserData(id))
const users = await Promise.all(userPromises)
return users
} catch (error) {
console.error('获取多个用户数据失败:', error)
throw error
}
}
// 使用示例
fetchUserData(123)
.then(user => console.log('用户数据:', user))
.catch(error => console.error('错误:', error))
现代 JavaScript 特性示例
ES6+ Features
// 解构赋值
const user = { name: '张三', age: 30, city: '北京' }
const { name, age } = user
// 模板字符串
const greeting = `你好, ${name}! 你今年 ${age} 岁了`
// 箭头函数
const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map(n => n * 2)
// 扩展运算符
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const combined = [...arr1, ...arr2]
// 类定义
class Person {
constructor(name, age) {
this.name = name
this.age = age
}
greet() {
return `你好, 我是 ${this.name}`
}
}
// 模块导入导出示例
export const PI = 3.14159
export function calculateArea(radius) {
return PI * radius * radius
}
// 默认导出
export default class Calculator {
static add(a, b) {
return a + b
}
static multiply(a, b) {
return a * b
}
}