Vue.js介绍--Vue声明式渲染、条件与循环、事件绑定、双向绑定以及生命周期

Vue.js介绍

Vue 是一套用于构建用户界面的渐进式框架。
vue作为前端框架的特点
1.构建用户界面，只需要关系view层
2.易学，轻量快速
3.渐进式框架
vue优点：响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom的操作，专心数据操作。
可组合的视图组件：把视图按照功能切分成若干基本单元。

一、声明式渲染
声明式渲染的意思是vue使用 “模板语法” 来声明式地将数据渲染进dom系统
{{ message }} //这个就是模板语法，
而使用模板语法的这种方式就叫做声明式渲染

data后面有个（）

除了文本插值，我们还可以像这样来绑定元素 attribute：


鼠标悬停上面会出现提示信息

二、条件与循环

1.控制切换一个元素是否显示
2.v-for 指令可以绑定数组的数据来渲染一个项目列表
也可以写俩个参数 index为索引
其中todos 是源数据数组，而 item 则是被迭代的数组元素的别名


3.v-for里面也可以使用对象
写上{{name}}:{{item2}}在页面显示的时候会把名称和内容都显示上

三、事件绑定
@click等于v-on：click

在 methods 对象中定义方法

点击后页面效果

四、双向绑定
v-model 指令它能轻松实现表单输入和应用状态之间的双向绑定

可以直接将model赋空值


Vue生命周期
Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
在这个过程中，会有一些生命周期钩子函数用户可以在不同阶段的钩子函数中添加相应的业务代码。
一共八个阶段：
1、beforeCreate（创建前）

2、created（创建后）

3、beforeMount（载入前）

4、mounted（载入后）

5、beforeUpdate（更新前）

6、updated（更新后）

7、beforeDestroy（销毁前）

8、destroyed（销毁后）

vue第一次页面加载会触发哪几个钩子函数？
beforeCreate、created、beforeMount、mounted

DOM 渲染在哪个周期中就已经完成？
mounted
图解：