Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决？

示例：

点击button会发现， obj.b 已经成功添加，但是视图并未刷新：

原因在于在Vue实例创建时， obj.b 并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api—— $set()：

$set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性，此时视图也会跟着改变了：

这样用，要使用 Vue，我们可以直接在 Vue.js 的官网直接下载 vue.min.js 文件，然后在 HTML 页面中通过

或者也可以不下载 vue.min.js 文件，直接引入 Vue 文件地址，例如：

使用前(在运行时)要确保 Vue 文件已经加载完成再然后进行其他 *** 作(代码加载的顺序是很重要的)。

Vue2，data的两种写法

对象式和函数式，当使用组件时必须使用函数式，否则报错。

Vue2，el（element）的两种写法

1、new Vue()，已配置el属性。

2、创建Vue实例，再通过vm.$mount('#root')指定el的值。

重要的原则：

由Vue管理的函数（方法），使用普通函数（方法），如果使用箭头函数（方法），this不再是Vue的实例了。

案例1：

案例2：

---