标签：opacity Vue ...... 基础 vm vue data
vue生命周期函数介绍
......
<body>
<div id="container">
<!--值必须写成对象式,在js中,若键值对名称一样,则可以简写-->
<h3 :style="{opacity}">欢迎!</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
'el':'#container',
data:{
opacity:1, // 设置不透明度
},
});
</script>
</body>
......
<body>
<div id="container">
<h3 :style="{opacity}">欢迎!</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
'el':'#container',
data:{
opacity:1,
},
});
setInterval(()=>{ // 使用计时器成功解决这个问题
vm.opacity -= 0.01
if(vm.opacity <= 0) vm.opacity = 1 // js简写
},16)
</script>
</body>
- 如果一定要把逻辑写vue里面,该怎么办
以下代码示例是一个死循环,后果就是耗尽CPU
......
<body>
<div id="container" v-cloak>
<h3 :style="{opacity}">欢迎!</h3>
{{change()}} <!--调用这个方法-->
</div>
<script type="text/javascript">
var vm = new Vue({
'el':'#container',
data:{
opacity:1,
},
methods:{
change(){
setInterval(()=>{ // 把之前定时器的逻辑放里面
console.log('123')
this.opacity -= 0.01
if(this.opacity <= 0) vm.opacity = 1
},16)
}
}
});
</script>
</body>
......
- 效果:页面无限生成计时器,直至崩溃...
- 由于定时器定时修改data的值,而vue一旦检测到data数据的变动,就重新解析模板
- 而数据是一直发生变化的,所以vue就一直解析模板,这个动作无限循环下去...
- 使用vue生命周期函数"mount()"来解决这个问题
当页面加载完毕以后(vue挂载完毕),会自动调用 mount
......
<body>
<div id="container" v-cloak>
<h3 :style="{opacity}">欢迎!</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
'el':'#container',
data:{
opacity:1,
},
mounted(){ // 页面加载完毕以后,会被调用一次
setInterval(()=>{
this.opacity -= 0.01
if(this.opacity <= 0) vm.opacity = 1
},16)
}
});
</script>
</body>
......
- 由于mount只被调用一次,所以不会无限生成计时器
- 生命周期
- 生命周期回调函数,生命周期函数,生命周期钩子
- 作用: vue在关键时刻帮我们调用的一些特殊名称的函数
- 钩子函数的名称不可更改,具体逻辑要自己实现
- 钩子函数的this,指向vue实例/组件对象
标签：opacity,
Vue,
......,
基础,
vm,
vue,
data
From： https://www.cnblogs.com/qinganning/p/16975192.html