vue框架实现
Vue 框架实现步骤
安装 Vue
通过 npm 或 yarn 安装 Vue 的最新版本。确保已安装 Node.js 环境。
npm install vue
# 或
yarn add vue创建 Vue 实例
在 HTML 文件中引入 Vue，并创建一个 Vue 实例。Vue 实例是 Vue 应用的根组件。
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>使用组件
Vue 支持组件化开发，可以创建可复用的组件。组件通过 Vue.component 注册。
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
new Vue({
el: '#app'
})在 HTML 中使用组件：
<div id="app">
<my-component></my-component>
</div>数据绑定
Vue 提供双向数据绑定功能，通过 v-model 指令实现。
<div id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>事件处理
使用 v-on 指令监听 DOM 事件并执行方法。
<div id="app">
<button v-on:click="sayHello">Say Hello</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
sayHello: function () {
alert('Hello Vue!')
}
}
})
</script>条件渲染
通过 v-if 和 v-else 指令实现条件渲染。
<div id="app">
<p v-if="seen">Now you see me</p>
<p v-else>Now you don't</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>列表渲染
使用 v-for 指令渲染列表。
<div id="app">
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>计算属性
计算属性用于处理复杂逻辑，避免在模板中直接写逻辑代码。
<div id="app">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>生命周期钩子
Vue 组件提供生命周期钩子函数，可以在不同阶段执行代码。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function () {
console.log('Vue instance created')
},
mounted: function () {
console.log('Vue instance mounted to DOM')
}
})使用 Vue CLI
Vue CLI 是官方提供的脚手架工具，用于快速搭建 Vue 项目。
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve单文件组件
Vue 单文件组件（.vue 文件）将模板、脚本和样式封装在一个文件中。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style scoped>
.hello {
color: red;
}
</style>状态管理（Vuex）
Vuex 是 Vue 的状态管理库，用于管理共享状态。
npm install vuex创建 Vuex store：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
export default store在组件中使用 Vuex：
export default {
computed: {
count () {
return this.$store.state.count
}
},
methods: {
increment () {
this.$store.commit('increment')
}
}
}路由（Vue Router）
Vue Router 是 Vue 的官方路由库，用于实现单页应用。
npm install vue-router配置路由：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = new VueRouter({
routes
})
export default router在组件中使用路由：
<router-link to="/">Home</router-link>
<router-view></router-view>
