vue基础知识（每天前进一小步，一年前进一大步）

【1】 Vue声明式渲染、条件与循环、事件绑定、双向绑定
1、{{ message }}
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
我们已经成功创建了第一个 Vue 应用！现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台并修改 app.message 的值，你将看到上例相应地更新。
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

2、v-if
（1）v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

也可以用 v-else 添加一个“else 块”：

（2）因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。
你可以使用 v-else 指令来表示 v-if 的“else 块”：
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

3、v-for
（1）v-for 指令可以绑定数组的数据来渲染一个项目列表：

4、v-on:click
（1）为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
5、v-model
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

【2】 Vue生命周期
vue生命周期一共分为8个阶段
1、beforeCreate （创建前）
1 .进行初始化事件，this指向创建的实例
2 .不能访问到data
3 .不能访问computed
4 .不能访问watch
5 .不能访问methods
6 .以上的方法和数据
7 .用来初始化非响应变量
2、created 钩子（创建后）
1 .实例创建完成
2 .数据已经和data属性绑定，此时放在data中的属性值发生改变的同时，视图也会改变
3 .可以初始化ajax请求了
4 .可以访问data
5 .可以访问computed
6 .可以访问watch
7 .可以访问methods
8 .可以访问到以上的方法和数据
9 .未挂载到DOM
10 .不能访问到ref属性内容为空数组

3、beforeMount（载入前）
1 .判断是否有el选项，有就继续，没有就停止编译，除非调用vm.$moune(el)
2 .是否有template参数选项
1 .有template参数选项，将模板编译为render函数
2 .没有template选项，将外部html作为模板编译
3 .template中的模板优先级要高于outer HTML的优先级

{{message + '这是在outer HTML中的'}}

//有template属性的时候这个就不会被渲染了

3 .如果Vue对象中还有一个render函数的话，那么又会先渲染render函数里面的内容。所以这是有优先级的 4 .模板编译完成，但是未挂载，无法获取dom 5 .给实例对象添加$el成员 6 .在挂载开始前被调用，在beforeMount之前，会找到对应的template，并编译成render函数

4、mounted载入后）
1 .在mounted之前还是通过{{message}}进行占位的，因为还没有挂载到页面上，还是在js中以虚拟dom形式存在的
2 .mounted之后换成了我们想要的样子
3 .实例挂载到DOM上，此时可以通过DOM api获取到DOM节点。
4 .$ref属性可以访问
5 .常用于获取VNode信息ajax请求

5、beforeUpdate（更新前）
1 .当data中的数据发生了改变，会触发对应组件的重新渲染
2 .响应式数据更新时调用，发生在虚拟dom打补丁之前
3 .适合在试图更新之前访问现有dom，比如手动移除或者添加事件监听器

6、Update（更新后）
1 .虚拟dom重新渲染和打补丁之后调用，组件dom已经更新，可执行依赖dom的操作
2 .避免在这个钩子中操作数据，不然可能陷入死循环

7、beforeDestroy（销毁前）
1 .实例销毁之前调用，这一步实例仍然可以使用，this仍然可以获取实例
2 .常用于销毁定时器，解绑全局事件，销毁插件对象等操作

8、destroyed（销毁后）
1 .实例销毁之后调用，调用后，Vue实例指示的所有东西都会解绑，所有事件监听器都会被移除，所有子实例也会被销毁。
注意
1 .created阶段的ajax请求和mounted阶段请求的区别：前者页面未出现，如果请求消息太多，页面会长时间处于白屏状态
2 .mounted不会承诺所有的子组件也都一起被挂载。如果希望等到整个视图都被渲染完毕，可以使用this.$nextTick
【3】 Vue第一次页面加载会出发的钩子函数
beforeCreate、created、beforeMount、mounted
DOM 渲染在mounted周期中就已经完成