当前位置：首页 > VUE

vue 实现

2026-01-07 06:58:48VUE

Vue 实现的基本步骤

安装 Vue.js 可以通过 npm 或 CDN 引入。使用 npm 安装适合大型项目，CDN 适合快速原型开发。

npm install vue

在 HTML 文件中引入 Vue.js 的 CDN 链接。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

创建 Vue 实例

创建一个 Vue 实例是 Vue 应用的核心。通过 new Vue() 初始化实例，并传入配置对象。

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

在 HTML 中绑定 Vue 实例。

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

数据绑定

Vue 提供了多种数据绑定方式，包括文本插值、属性绑定和双向绑定。文本插值使用双大括号语法。

<div>{{ message }}</div>

属性绑定使用 v-bind 指令。

<div v-bind:title="message">Hover me</div>

双向绑定使用 v-model 指令，通常用于表单输入。

<input v-model="message">

条件渲染

Vue 提供了 v-if 和 v-show 指令用于条件渲染。v-if 会根据条件动态添加或移除 DOM 元素。

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

v-show 通过 CSS 的 display 属性控制元素的显示与隐藏。

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

列表渲染

使用 v-for 指令可以渲染列表。遍历数组时，可以获取每一项的值和索引。

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

事件处理

Vue 通过 v-on 指令监听 DOM 事件。事件处理方法可以定义在 Vue 实例的 methods 选项中。

<button v-on:click="greet">Greet</button>

在 Vue 实例中定义方法。

new Vue({
  methods: {
    greet: function() {
      alert('Hello!')
    }
  }
})

计算属性

计算属性是基于响应式依赖进行缓存的。定义计算属性可以避免重复计算，提高性能。

new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

组件化开发

Vue 组件是可复用的 Vue 实例。通过 Vue.component 全局注册组件，或在 Vue 实例的 components 选项中局部注册组件。

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

在模板中使用组件。

<todo-item v-for="item in items" :todo="item" :key="item.id"></todo-item>

生命周期钩子

Vue 实例在创建过程中会调用一系列生命周期钩子函数。可以在这些钩子中执行自定义逻辑。

new Vue({
  created: function() {
    console.log('Instance created')
  },
  mounted: function() {
    console.log('Instance mounted')
  }
})

路由管理

Vue Router 是 Vue.js 的官方路由管理器。安装 Vue Router 后，可以配置路由映射关系。

npm install vue-router

配置路由并挂载到 Vue 实例。

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  router
}).$mount('#app')

状态管理

Vuex 是 Vue.js 的状态管理库。通过集中式存储管理应用的所有组件的状态。

npm install vuex

创建 Vuex store 并注入到 Vue 实例中。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

new Vue({
  store
})

表单处理

Vue 提供了多种表单输入绑定方式。使用 v-model 可以轻松实现表单数据的双向绑定。

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

对于复选框，v-model 可以绑定到数组。

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>

自定义指令

Vue 允许注册自定义指令。自定义指令可以用于对普通 DOM 元素进行底层操作。

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

在模板中使用自定义指令。

<input v-focus>

插件开发

Vue 插件可以为 Vue 添加全局功能。插件通常用来添加全局方法或属性、添加全局资源、添加 Vue 实例方法等。

MyPlugin.install = function(Vue, options) {
  Vue.prototype.$myMethod = function() {
    console.log('Plugin method called')
  }
}

Vue.use(MyPlugin)

服务端渲染

Vue 支持服务端渲染（SSR），可以提高首屏加载速度和 SEO。使用 vue-server-renderer 可以实现服务端渲染。

npm install vue-server-renderer

创建一个简单的服务端渲染应用。

vue 实现

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

server.listen(8080)

标签: vue