当前位置：首页 > VUE

vue 简单实现

2026-03-07 09:16:36VUE

vue 简单实现

Vue 简单实现示例

以下是一个使用 Vue.js 的简单实现示例，包含基础数据绑定、事件处理和组件化功能。

基础 HTML 结构

<!DOCTYPE html>
<html>
<head>
  <title>Vue Simple Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
</body>
</html>

初始化 Vue 实例

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

数据绑定与事件处理

双向数据绑定

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

事件处理

<div id="app">
  <button v-on:click="reverseMessage">Reverse Message</button>
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

组件化实现

注册全局组件

Vue.component('todo-item', {
  template: '<li>This is a todo item</li>'
})

使用组件

<div id="app">
  <ol>
    <todo-item></todo-item>
  </ol>
</div>

带 props 的组件

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

new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Bread' }
    ]
  }
})

<div id="app">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

计算属性和侦听器

计算属性

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

侦听器

new Vue({
  el: '#app',
  data: {
    question: '',
    answer: ''
  },
  watch: {
    question: function(newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    getAnswer: function() {
      // 实际应用中这里可能是API调用
      this.answer = 'You asked: ' + this.question
    }
  }
})

生命周期钩子示例

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  created: function() {
    console.log('Instance created')
  },
  mounted: function() {
    console.log('Instance mounted')
  },
  updated: function() {
    console.log('Instance updated')
  }
})

以上示例展示了 Vue.js 的核心功能实现，包括数据绑定、事件处理、组件化和生命周期管理等基础用法。