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

一、Vue声明式渲染
两个花括号中间可以写表达式,判断,数据类型,就是不能写循环。
Vue声明式渲染、条件与循环、事件绑定、双向绑定以及生命周期

Vue声明式渲染、条件与循环、事件绑定、双向绑定以及生命周期
二、条件与循环
在Vue.js中的指令:v-if、v-else、v-else-if。
当使用v-for更新已经渲染过的元素列表时,默认用“就地复用”策略,如果数据项的顺序被改变,Vue.js将不会移动Dom元素来匹配数据项的顺序,就如在数组的尾部和数组的头部插入一个新的元素,所产生的的key值就会不同。
为了给Vue.js 追踪每个节点的身份,从而重用或重新排列现有的元素,需要提供一个唯一的Key属性特殊的属性使用v-bind来动态绑定值(全写“ v-bind:key” 简写“ :key”)
Vue声明式渲染、条件与循环、事件绑定、双向绑定以及生命周期

上面代码中,如果"seen"的值为true,则"#app"元素显示,否则将从DOM中移除.
如果想切换多个元素,可以把一个元素当做包装元素,并在上面使用v-if。最终的渲染结果不会包含元素.
Vue声明式渲染、条件与循环、事件绑定、双向绑定以及生命周期
Vue声明式渲染、条件与循环、事件绑定、双向绑定以及生命周期
三、事件绑定、双向绑定
1.事件绑定v-on:click
Vue声明式渲染、条件与循环、事件绑定、双向绑定以及生命周期

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

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

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