You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.0 KiB
39 lines
1.0 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>引出生命周期</title> |
|
<script type="text/javascript" src="../vue.js"></script> |
|
</head> |
|
<body> |
|
<div id="root"> |
|
<h2 v-if="isShowHello">你好</h2> |
|
<h2 :style="{opacity}">欢迎学习Vue</h2> |
|
</div> |
|
<script type="text/javascript"> |
|
Vue.config.productionTip = false // 组织开发环境提示 |
|
|
|
// 创建Vue实例 |
|
const vm = new Vue({ |
|
el: '#root', |
|
data: { |
|
isShowHello: true, |
|
opacity: 1 |
|
}, |
|
// Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted |
|
mounted() { |
|
console.log('mounted') |
|
setInterval(() => { |
|
this.opacity -= 0.01 |
|
if (this.opacity <= 0) this.opacity = 1 |
|
}, 16) |
|
} |
|
}) |
|
// setInterval(()=>{ |
|
// vm.opacity -= 0.01 |
|
// if (vm.opacity <= 0) vm.opacity = 1 |
|
// },16) |
|
</script> |
|
|
|
</body> |
|
</html> |