vue4——钩子函数与v-if的vue指令
一、生命周期钩子函数
（1）beforeCreate（） 实例创建前触发
（2）created（） 实例创建完成，
（3）beforeMount（） 模板渲染前，可以访问数据，模板编译完成，虚拟DOM已经存在
（4）mounted（） 模板渲染完成，可以拿到DOM节点和数据
（5）beforeUpdate（） 更新前
（6）updated（） 更新完成
（7）activated（） 激活前
（8）deactivated（） 激活后
（9）beforeDestroy（） 销毁前
（10）destroyed（） 销毁后
二、v-if（使用判断数学成绩例子）
点击查看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
数学成绩:<input type="text" v-model.number="score1" />
<div v-if="score1<60">不及格</div>
<div v-if="score1<80&&score1>=60">及格</div>
<div v-if="score1<90&&score1>=80">良</div>
<div v-if="score1<100&&score1>=90">优秀</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
score1:80
},
methods:{
},
})
</script>
效果图
知识点
v-if 如果非真false，则不生成html元素
