vue2初体验(一)：vue实例

什么是VUE实例

Vue 实例是 Vue 应用的根对象，每个 Vue 应用都是通过创建 Vue 实例开始的。在文档中常用 vm (ViewModel 的缩写) 表示。

// 创建 Vue 实例
const vm = new Vue({
  el: '#app',  // 挂载点
  data: {      // 数据模型
    message: 'Hello Vue!'
  },
  methods: {   // 方法
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  },
  computed: {  // 计算属性
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

Vue 实例的特点

1. 响应式系统：data 对象中的属性会被转换为 getter/setter
2. 生命周期钩子：提供 created、mounted、updated 等生命周期函数
3. 模板系统：可以使用基于 HTML 的模板语法
4. 方法：可以在 methods 中定义方法
5. 计算属性：通过 computed 定义派生状态
6. 观察者：通过 watch 观察数据变化

实例与组件的关系

在 Vue 中，组件本质上也是 Vue 实例，只是配置选项不同。每个组件都是一个小型的 Vue 实例，有自己的模板、数据、方法等。

// 定义一个组件
Vue.component('my-component', {
  data: function() {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">Clicked {{ count }} times</button>'
})

// 使用组件
new Vue({
  el: '#app'
})

Vue 的这种设计使得应用可以构建为由多个小型、独立且可复用的组件组成的树形结构。

什么是MVVM

Model (数据)       <===>       ViewModel (业务逻辑)       <===>       View (UI)
{ name: 'John' }              处理数据转换和命令                  <input v-model="name">