<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: '#app', //获取所要使用的区域
data: {}, //传入的数据
methods: {}, //传入的方法
router, //传入组件
components: {}, //方法表示一个具体的操作,主要书写业务逻辑
computed: {}, //属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;
watch: {}, //一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed和methods的结合体
// ----------------------------------------------------------------------------------------------------------
beforCreate() {
//生命周期函数之一,表示实例完全创造之前会执行它
},
create() {
//这是第二个生命周期函数,在create中data和methods都已经被初始化好了
//如果要使用data和methods中的数据和方法,最早也只能在create中调用
},
beforeMount() {
//这是第三个生命周期,表示模板已经在内存中编译完成了,但是尚未把模板渲染到页面中
//在beforMount中执行的时候,页面中的元素还没有被替换过来,只是尚未替换的字符串,例如:{{msg}}
},
mounted() {
//这是第四个生命周期,表示,内存中的模板已经真是的挂在到页面中,用户已经可以看到渲染好的页面了
//例如在beforeMount中看到的是{{msg}},在mounted中可以是:你好!!
// 注意:mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表明实例已经完全被创建好了
// 此时,若没有其他操作的话,这个实例,就静静的躺在内存中一动不动
},
// 以上四个生命周期函数指的是vue组件实例的四个生命周期函数
// ----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------------------------
// 接下来的是运行 中的两个事件:只有当data数据发生改变时才能出发以下两个事件
beforeUpdate() {
//当执行beforUpdata的时候,页面中显示的数据是改变之前的数据,此时页面中的数据是新的,但是它尚未和页面同步,就是前一步操作
},
updated() {
//updated执行的时候页面和数据已经同步,都是最新的数据
},
// ----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------------------------
beforeDsetory() {
//当执行beforeDsetory钩子函数的时候,vue实例就已经从运行阶段进入到了销毁及前端
//当执行beforeDsetory的时候,实例身上所有的data和所有methods,以及过滤器,指令……都处于可用状态
//此时,还没有真正执行销毁的过程
},
dsetoryed() {
//当执行dsetoryed函数的时候,组件已经被完全销毁了,此时,组件中所有的数据,方法,指令,过滤器……都已经不可用了
}
})
</script>
</body>
</html>
vue实例--创建函数--生命周期函数详解
猜你喜欢
转载自blog.csdn.net/knowledge_bird/article/details/87876144
今日推荐
周排行