当前位置：首页 > VUE

vue 简单实现

2026-01-07 22:57:09VUE

以下是 Vue 的简单实现示例，涵盖基础模板、数据绑定、方法及生命周期：

vue 简单实现

基础模板与数据绑定

<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">反转文本</button>
</div>

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

条件渲染与列表渲染

<div id="app-2">
  <p v-if="seen">现在你看到我了</p>
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
</div>

new Vue({
  el: '#app-2',
  data: {
    seen: true,
    items: [
      { text: '学习 Vue' },
      { text: '构建应用' }
    ]
  }
})

组件化示例

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

new Vue({
  el: '#app-3',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' }
    ]
  }
})

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

生命周期钩子

new Vue({
  data: { count: 0 },
  created() {
    console.log('实例已创建')
  },
  mounted() {
    console.log('DOM挂载完成')
  },
  updated() {
    console.log('数据更新')
  }
})

这些示例展示了 Vue 的核心功能：声明式渲染、响应式数据绑定、指令系统和组件化。实际开发中可通过 Vue CLI 快速搭建完整项目结构。