黑马vue实现
Vue.js 基础实现步骤
安装 Vue.js 可以通过 CDN 或 npm 方式。对于快速原型开发，CDN 引入更为便捷：
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>使用 npm 安装适合大型项目：
npm install vue@next创建 Vue 实例
在 HTML 中准备挂载点并初始化应用：
<div id="app">
{{ message }}
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>数据绑定与指令
Vue 提供多种模板语法实现动态渲染：
<div id="bind">
<span v-bind:title="hoverText">悬停查看动态提示</span>
<p v-if="seen">条件渲染内容</p>
<button v-on:click="reverseText">反转文本</button>
<input v-model="inputText">
</div>
<script>
createApp({
data() {
return {
hoverText: '页面加载于 ' + new Date().toLocaleString(),
seen: true,
inputText: '双向绑定示例'
}
},
methods: {
reverseText() {
this.inputText = this.inputText.split('').reverse().join('')
}
}
}).mount('#bind')
</script>组件化开发
注册并使用自定义组件：
const app = createApp({})
app.component('todo-item', {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
})
app.mount('#todo-list-app')模板中使用组件：
<div id="todo-list-app">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script>
createApp({
data() {
return {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '其他食材' }
]
}
}
}).mount('#todo-list-app')
</script>状态管理（Vuex）
对于复杂状态管理，可引入 Vuex：
npm install vuex@next创建 store 实例：
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
}
})在组件中使用：
const app = createApp({ /* 根组件 */ })
app.use(store)
app.component('MyComponent', {
template: `<div>{{ $store.state.count }}</div>`,
methods: {
increment() {
this.$store.commit('increment')
}
}
})路由管理（Vue Router）
安装并配置路由：
npm install vue-router@4路由配置文件示例：
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp({})
app.use(router)
app.mount('#app')组合式 API
Vue 3 引入 setup 语法：
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
count.value++
}
onMounted(() => {
console.log('组件挂载完成')
})
return {
count,
increment
}
}
}
</script>
<template>
<button @click="increment">点击计数: {{ count }}</button>
</template>项目脚手架
使用 Vite 创建 Vue 项目：
npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev或使用 Vue CLI：
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve
