vue.js 2.0 实例教程

Vue.js 2.0 是一个流行的前端JavaScript框架，用于构建用户界面和单页面应用程序。以下是一个关于Vue.js 2.0实例的教程，包括如何创建一个Vue实例，以及数据绑定、方法、生命周期钩子等基本概念。

创建Vue实例

创建一个Vue实例是构建Vue应用程序的第一步。实例是Vue应用的核心，它管理着应用的所有数据、模板和组件。

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

在上面的代码中，el属性指定了Vue实例将要绑定到的DOM元素，而data对象包含了应用的数据。

数据与方法

Vue实例通过data对象将数据暴露给视图，并通过方法添加交互性。

var data = { count: 0 };
var vm = new Vue({
  el: '#app',
  data: data,
  methods: {
    increment: function () {
      this.count++;
    }
  }
});

在Vue中，数据是响应式的，意味着当数据变化时，视图会自动更新。

实例生命周期钩子

生命周期钩子是在Vue实例的不同阶段自动调用的函数，允许你在不同的时刻执行代码。

new Vue({
  el: '#app',
  data: {
    a: 1
  },
  created: function () {
    console.log('实例已创建');
  },
  mounted: function () {
    console.log('实例已挂载到DOM');
  }
});

注意事项

• 响应式数据：只有当实例创建时已经在data对象中声明的属性才是响应式的。新添加的属性不会触发视图更新。
• Object.freeze()：使用Object.freeze()可以阻止Vue追踪数据的变化，这通常用于优化性能或确保数据不被意外修改。