VUE执行函数beforeCreate、created、beforeMount、mounted的区别与运用，点击事件方法案例
：VUE3 ：站长发布 ：3年前(2022-01-20) ：1351次浏览
从0开始学习Vue
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>VUE练习1-文字定时器</title>
</head>
<body>
<h1>变量文本开始</h1>
<div id="app">
<h2 ref="yung">{{msg}}</h2>
<button @click="showTime">显示文本</button>
</div>
<script src="https://unpkg.com/vue@3.2.27/dist/vue.global.js"></script>
<script>
/*
1.vue的基础语法
2.组件化开发
3.VUE全家桶 Vuex - vue - router
4.底层原理
5.学习项目（axios ajax http）
6.学习完成后作业：开发一个实用功能。
*/
Vue.createApp({
data(){
return{
list:["你好！","亲爱的朋友,","很高兴与您相遇。"],
msg:"你好！"
}
},
mounted(){
this.showTime();
console.log(this.$refs.yung);
},
methods:{
showTime(){
let i = 0;
let t = setInterval(() =>{
this.msg = this.list[i];
i++;
if(i === 3){
clearInterval(t);
}
},500)
}
}
}).mount("#app")
</script>
</body>
</html>VUE理解：
创建 ---- 挂载
操作虚拟DOM
生命周期钩子函数
创建一个实例：Vue.createApp({ })
绑定一个元素：.mount("#app")
函数的调用：this.showTime() this.list[i] this.msg
执行函数的区别与应用
执行函数：beforeCreate、created、beforeMount、mounted
beforeCreate:创建之前，无法调用函数
created:创建时；可以调用函数
beforeMount:挂载之前；可以调用函数
mounted:挂载时；可以调用函数，并返回dom
VUE点击事件与方法
点击事件：@click="showTime"
版权声明：本文为云海网站长的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://xn--qiv211ar60a.com/73.html
