[教程]掌握Vue3，深度学习轻松上手：50个实战代码示例解析

1. Vue3基础搭建

1.1 创建Vue3项目

vue create vue3-project
cd vue3-project

1.2 安装Vue Router和Vuex

npm install vue-router vuex

2. Vue3组件实战

2.1 创建全局组件

// GlobalComponent.vue
<template> <div> <h1>Global Component</h1> </div>
</template>
<script>
export default { name: 'GlobalComponent'
}
</script>

2.2 使用Element Plus UI组件

// 使用Button组件
<template> <el-button>Default Button</el-button>
</template>

3. Vue3路由实战

3.1 配置路由

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [ { path: '/', name: 'Home', component: Home }, // ... 其他路由配置
]
const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes
})
export default router

3.2 使用路由导航

<template> <router-link to="/">Home</router-link>
</template>

4. Vue3状态管理实战

4.1 配置Vuex

// store/index.js
import { createStore } from 'vuex'
export default createStore({ state() { return { count: 0 } }, mutations: { increment(state) { state.count++ } }, actions: { increment({ commit }) { commit('increment') } }
})

4.2 在组件中使用Vuex

// 使用Vuex在组件中增加计数
methods: { increment() { this.$store.dispatch('increment') }
}

5. Vue3响应式实战

5.1 使用ref创建响应式数据

// 使用ref创建响应式数据
const count = ref(0)

5.2 使用reactive创建响应式对象

// 使用reactive创建响应式对象
const user = reactive({ name: 'John', age: 30
})

6. Vue3计算属性实战

6.1 创建计算属性

// 创建计算属性
computed: { doubleCount() { return this.count * 2 }
}

6.2 使用计算属性

// 在模板中使用计算属性
<div>{{ doubleCount }}</div>

7. Vue3侦听器实战

7.1 创建侦听器

// 创建侦听器
watch(user, (newValue, oldValue) => { console.log('User changed:', newValue)
})

7.2 在侦听器中使用回调

// 在侦听器中使用回调
watch(user.age, (newValue, oldValue) => { console.log('Age changed:', newValue)
})

8. Vue3生命周期实战

8.1 生命周期钩子

// 使用生命周期钩子
mounted() { console.log('Component mounted!')
}

8.2 生命周期顺序

// 生命周期顺序
created() { console.log('Component created!')
}
mounted() { console.log('Component mounted!')
}

9. Vue3自定义指令实战

9.1 创建自定义指令

// 创建自定义指令
const vHighlight = { mounted(el, binding) { el.style.backgroundColor = binding.value }
}

9.2 使用自定义指令

// 在模板中使用自定义指令
<div v-highlight="'red'">Highlight me!</div>

10. Vue3插槽实战

10.1 使用具名插槽

// 使用具名插槽
<template> <div> <slot name="header">Header</slot> <slot>Default content</slot> <slot name="footer">Footer</slot> </div>
</template>

10.2 在父组件中使用插槽

// 在父组件中使用插槽
<template> <CustomComponent> <template #header> <h1>Header</h1> </template> <template #footer> <p>Footer</p> </template> </CustomComponent>
</template>

11. Vue3插件实战

11.1 创建插件

// 创建插件
export default { install(Vue) { Vue.prototype.$myPlugin = function() { console.log('My plugin is called!') } }
}

11.2 使用插件

// 使用插件
Vue.use(MyPlugin)

12. Vue3实战项目

12.1 创建待办事项列表

// 创建待办事项列表
<template> <div> <input v-model="newTodo" @keyup.enter="addTodo" /> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="removeTodo(index)">Remove</button> </li> </ul> </div>
</template>
<script>
export default { data() { return { todos: [], newTodo: '' } }, methods: { addTodo() { if (this.newTodo.trim()) { this.todos.push(this.newTodo) this.newTodo = '' } }, removeTodo(index) { this.todos.splice(index, 1) } }
}
</script>

13. Vue3与深度学习结合

13.1 使用TensorFlow.js

// 使用TensorFlow.js
import * as tf from '@tensorflow/tfjs'
const model = tf.sequential()
model.add(tf.layers.dense({ units: 10, activation: 'relu', inputShape: [1] }))
model.add(tf.layers.dense({ units: 1 }))
model.compile({ optimizer: 'sgd', loss: 'meanSquaredError' })
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1])
const ys = tf.tensor2d([-2, -1, 0, 1, 2, 3], [6, 1])
model.fit(xs, ys, { epochs: 250 }).then(() => { console.log('Training finished!')
})

13.2 使用PyTorch.js

// 使用PyTorch.js
import * as torch from 'torch'
const x = torch.tensor([1, 2, 3], requires_grad=True)
const y = x.pow(2)
y.backward(torch.tensor([1]))
console.log(x.grad)

14. 总结

本文提供了50个Vue3实战代码示例，涵盖了Vue3的基础知识、组件、路由、状态管理、响应式、计算属性、侦听器、生命周期、自定义指令、插槽、插件、实战项目和与深度学习结合等内容。通过这些示例，你可以快速掌握Vue3，并在实际项目中应用所学知识。