1.1. vue实例和数据绑定

1. 必不可少的一个选项就是el。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签。也可以是css语法。

2. 通过Vue实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内 声明，这样不至于将数据散落在业务逻辑中，难以维护。也可以指向一个已经有的变量。注意只有当实例被创建时 data 中存在的属性才是响应式（当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值）的。也就是说如果你在实例外新添加一个属性，那么这个属性值一开始不会被渲染，并且它的值的改动也不会触发试图的更新，除非你对data里已经有的数据进行改动，那么这个新添加的属性值才会显示和渲染。比如：

上面代码中{{obj.b}}并不会显示在页面中，除非当你原来data里的a发生改变的时候它才会去渲染，

上面的情况在实例创建完成后，直接更改了a的值，所以页面进行了一次渲染，所以页面中也会显示b的值

要理解为什么 span-b 会更新，要点是理解视图更新其实是异步的。

当我们让 a 从 'a1' 变成 'a2' 时，Vue 会监听到这个变化，但是 Vue 并不能马上更新视图，因为 Vue 是使用 Object.defineProperty 这样的方式来监听变化的，监听到变化后会创建一个视图更新任务到任务队列里。（文档有写）

所以在视图更新之前，要先把余下的代码运行完才行，也就是会运行 b = 'b'。

等到视图更新的时候，由于 Vue 会去做 diff（文档有写），于是 Vue 就会发现 a 和 b 都变了，自然会去更新 span-a 和 span-b。

---

3. 挂载成功后，我们可以通过

app.$el来访问该元素。

访问vue实例的属性：都是以$开头，如app.$el

访问data元素的属性-- 直接app.属性名，app.msg

1.2. 生命周期钩子

jquery---$(document).ready()

* beforeCreate:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用，也就是说这时候拿不到data里的数据和不能监听事件。

* created实例创建完成后调用，此阶段完成了数据的观测（可以拿到data里的数据）等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用----还未挂载

* mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始 。相当于 $(document).ready()---刚刚挂载

*beforeDestroy实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等

当运行上面代码

一开始先弹出created里的内容，这时候页面中没有显示msg里的内容，因为还未挂载到页面中，当点击确定，再次弹出mounted里的内容，再次确定就渲染到了页面中

1.3.文本插值和表达式

语法：使用双大括号（Mustache语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来

比如：你在控制台对它的数据进行更新，它的视图层也会同步的更新

在｛｛｝｝中，除了简单的绑定属性值外，还可以使用JavaScript表达式进行简单的运算 、 三元运算等

---实例

Vue .js只支持单个表达式，不支持语句和流控制。

{{ 6+6 *3}}---可以进行简单的运算

{{ 6<3 ? msg :a}}---可以用三元运算符

{{if(6>3){}}-----注意：文本插值的形式，其中不能书写表达式,支持单个表达式