一．框架理解

• 所有的前端框架基本都是为了简化：模版渲染、事件绑定和用户交互问题；
• Vue 参考了 MVVM 模型，即：视图(View)-视图模型(ViewModel)-模型(Model)；
• 当我们 new Vue()创建一个实例时，括号内传递的是一个选项对象(options)；
• 这个选项对象一般包含：数据、模版、挂载元素、方法、生命周期钩子等等；
• 当 Vue 实例被创建时，options 对象属性都会被添加到 Vue 的响应式系统中；
• 所谓响应式系统，就是可以通过修改这些属性的值，让视图执行更新渲染；
• 我们可以通过火狐 F12 控制器来修改 Vue 对象数据值，也可以使用 Vue 调试；
• 当然，我们也可以将数据对象设置为保护不得修改，具体代码如下：

//去除警告
Vue.config.productionTip = false;

//数据对象
const dataObj = {
   message: 'hello vue'
}

//数据冻结 把数据设为只读
//Object.freeze(dataObj);

const app = new Vue({
  el: '#app',
  data: dataObj,

//方法
  methods: {
    alert: function() {
      alert('点击');
    }
  },
// 生命周期 
// created 固定方法，这个方法在初始化后自动执行
  created : function(){
    console.log('初始化后：'+ this.message);
  },

  updated : function(){
    console.log('修改后':this.message);
  }
});