示例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引入生命周期</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <h2 style="opacity: opacity;">Vue 生命周期</h2> -->
<h2 :style="{opacity}">Vue 生命周期</h2>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
opacity: 1,
},
})
setInterval(() => {
vm.opacity -= 0.01
if (vm.opacity <= 0) vm.opacity = 1
}, 20)
</script>
示例二(示例一完善，运行效果和示例一一致)：mounted
mounted：挂载 Vue完成模版的解析并把--初始化的真实的DOM--元素放入页面后调用mounted<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引入生命周期2</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <h2 style="opacity: opacity;">Vue 生命周期</h2> -->
<h2 :style="{opacity}">Vue 生命周期2</h2>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
opacity: 1,
},
methods:
{
},
// 挂载 Vue完成模版的解析并把--初始化的真实的DOM--元素放入页面后调用mounted
mounted () {
setInterval(() => {
this.opacity -= 0.01
if (this.opacity <= 0) this.opacity = 1
}, 20)
}
})
// 通过外部定时器实现，不推荐
// setInterval(() => {
// vm.opacity -= 0.01
// if (vm.opacity <= 0) vm.opacity = 1
// }, 20)
</script>
生命周期：
- 又名，生命周期回调函数、生命周期函数、生命周期钩子
- 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
- 生命周期函数的名字不能随便更改，但函数的具体内容是程序员根据需求编写的
- 生命周期函数中的this指向vm或组件实例对象
标签：opacity,生命周期,33,vm,--,Vue,mounted From： https://www.cnblogs.com/YYkun/p/18054184