02-vue.js基础-Vue实例

1.vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

var vm =  new Vue({
    //选项
})

2.数据和方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

var vm =  new Vue({
  el:"#app",
   data:{
        a:1,
  },
methods:{
    al:function(){}
}
})

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。

3.实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

new Vue({
  data: {
    a: 1
  },
  beforeCreate:function(){
      //实例创建前
  },
  created: function () {
     //实例创建后
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  },
  beforeMount:function(){
    //实例挂载前
   },
  mounted:function(){
    //实例挂载后
  },
 beforeUpdate:function(){
    //数据视图更新前
   },
  updated:function(){
    //数据视图更新后
  },
 beforeDestroy:function(){
    //实例销毁前
   },
  destroyed:function(){
    //实例销毁后
  },
})