当前位置：首页 > VUE

vue 实现

2026-03-06 21:50:10VUE

Vue 实现的基本步骤

安装 Vue.js 可以通过 CDN 或 npm 等方式。使用 npm 安装时，运行以下命令：

npm install vue

在项目中引入 Vue.js：

import Vue from 'vue'

创建一个 Vue 实例：

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

数据绑定与模板语法

Vue 使用双大括号语法进行文本插值：

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

通过 v-bind 指令绑定属性：

<div v-bind:title="message">
  鼠标悬停查看动态提示
</div>

条件与循环渲染

使用 v-if 进行条件渲染：

<p v-if="seen">现在你看到我了</p>

使用 v-for 进行列表渲染：

<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>

事件处理

通过 v-on 指令监听 DOM 事件：

<button v-on:click="reverseMessage">反转消息</button>

在 Vue 实例中定义方法：

methods: {
  reverseMessage: function () {
    this.message = this.message.split('').reverse().join('')
  }
}

表单输入绑定

使用 v-model 实现双向数据绑定：

<input v-model="message" placeholder="编辑我">
<p>输入的内容是：{{ message }}</p>

组件化开发

注册一个全局组件：

vue 实现

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

在模板中使用组件：

<ol>
  <todo-item v-for="item in items" v-bind:todo="item"></todo-item>
</ol>

生命周期钩子

常用的生命周期钩子包括 created 和 mounted：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    console.log('a is: ' + this.a)
  },
  mounted: function () {
    console.log('组件已挂载')
  }
})

计算属性和侦听器

定义计算属性：

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

使用侦听器 watch：

watch: {
  message: function (newVal, oldVal) {
    console.log('消息变化：', oldVal, '->', newVal)
  }
}

Vue CLI 项目搭建

安装 Vue CLI：

npm install -g @vue/cli

创建新项目：

vue 实现

vue create my-project

运行开发服务器：

cd my-project
npm run serve

单文件组件

一个典型的 .vue 文件结构：

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

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

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

Vue Router 配置

安装 Vue Router：

npm install vue-router

基本路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

Vuex 状态管理

安装 Vuex：

npm install vuex

创建 store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

标签: vue