当前位置：首页 > VUE

vue框架实现网页

2026-02-18 07:29:11VUE

Vue框架实现网页的基本步骤

安装Vue.js
通过npm或CDN引入Vue.js。npm安装命令：npm install vue。CDN引入方式：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>。

创建Vue实例
在HTML中定义挂载点，通常是一个div元素，id为app。通过new Vue()创建实例，指定el选项为挂载点，data选项定义数据。

<div id="app">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

使用组件化开发

创建单文件组件
单文件组件通常以.vue为后缀，包含template、script和style三部分。需要配合webpack或vite等构建工具使用。

<template>
  <div class="example">
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello from component!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

注册和使用组件
全局注册通过Vue.component()，局部注册在父组件的components选项中。

// 全局注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// 局部注册
new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

数据绑定和指令

双向数据绑定
使用v-model指令实现表单输入和应用状态的双向绑定。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

条件渲染
v-if和v-show指令控制元素显示。v-if是真正的条件渲染，v-show只是切换display属性。

vue框架实现网页

<div v-if="seen">Now you see me</div>
<div v-show="show">Display with show</div>

列表渲染
v-for指令基于数组渲染列表，建议使用key属性提高性能。

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.text }}
  </li>
</ul>

处理用户交互

事件处理
v-on指令（简写@）监听DOM事件并执行方法。

<button v-on:click="counter += 1">Add 1</button>
<button @click="say('hi')">Say hi</button>

方法定义
在methods选项中定义方法，可通过this访问组件实例。

vue框架实现网页

new Vue({
  methods: {
    say: function(message) {
      alert(message)
    }
  }
})

路由管理

安装Vue Router
通过npm安装：npm install vue-router。在main.js中引入并使用。

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

路由视图和导航
在模板中使用router-view显示路由组件，router-link进行导航。

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

状态管理

使用Vuex
安装Vuex：npm install 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++
    }
  }
})

在组件中使用
通过this.$store访问store实例，或使用mapState等辅助函数。

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}