Vue.js 实例

Vue.js 是一款流行的、轻量级的前端 JavaScript 框架，用于构建交互式 Web 界面。Vue.js 实例是 Vue.js 应用的基本构建单元，它是一个 Vue.js 对象，包含 data、methods、computed、watch 和生命周期钩子等属性，用于管理组件内部的数据、方法以及响应式行为。

创建一个 Vue.js 实例

在使用 Vue.js 开发 Web 应用时，需要先创建一个 Vue.js 实例。创建一个实例需要传入一个选项对象，该对象包括数据、DOM 元素、生命周期钩子、计算属性、方法等属性，用于描述该实例的行为和数据。

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

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!'
    }
  })
</script>

上述代码中，我们创建了一个 Vue.js 实例，并绑定到页面中的一个 DOM 元素上（"#app"）。通过 data 属性，我们定义了该实例的数据，然后在模板中使用双花括号 "{{ }}" 插值数据。

Vue.js 实例属性

Vue.js 实例具有多个属性，包括：

data

用于定义数据属性，该属性的值可以是一个对象或一个函数（函数应该返回一个对象）。例如：

var data = { message: 'Hello!' }
var vm = new Vue({
  data: data
})

或者：

var vm = new Vue({
  data() {
    return { message: 'Hello!' }
  }
})

methods

用于定义方法，该属性的值可以是一个对象，对象的属性为方法名，值为方法定义。例如：

var vm = new Vue({
  data: { message: 'Hello!' },
  methods: {
    greet: function () {
      alert(this.message)
    }
  }
})

computed

用于定义计算属性，该属性的值可以是一个对象，对象的属性为计算属性名，值为计算属性定义。例如：

var vm = new Vue({
  data: { message: 'Hello!' },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

watch

用于监听数据变化并采取相应的行为，该属性的值可以是一个对象，对象的属性为数据属性名，值为对应的回调函数。例如：

var vm = new Vue({
  data: { message: 'Hello!' },
  watch: {
    message: function (newValue, oldValue) {
      console.log('message changed:', newValue, oldValue)
    }
  }
})

生命周期钩子

用于在组件生命周期中执行特定的操作，包括创建、挂载、更新和销毁等阶段。Vue.js 提供多个生命周期钩子，在不同的阶段执行不同的回调函数，例如：mounted、updated、beforeDestroy 等。例如：

var vm = new Vue({
  data: { message: 'Hello!' },
  mounted: function () {
    console.log('mounted')
  },
  updated: function () {
    console.log('updated')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy')
  }
})

总结

Vue.js 实例是 Vue.js 应用的基本构造单元，包含数据、方法、计算属性、监听器和生命周期钩子等属性。创建 Vue.js 实例需要传入一个选项对象，用于描述该实例的行为和数据。熟练掌握 Vue.js 实例的使用，有助于快速开发复杂的前端组件和交互式应用。