二、Vue语法基础
1、Vue中的应用和组件的基本部分
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 创建一个 vue 应用实例，给这个实例起一个名字，叫做“app”
// 传入了一个参数，这个参数使用 {} 括起来，表示最外层应该如何展示
// 也就是 vue 应用的根组件
// mvvm 设计模式：m -> model 数据 view -> 视图 vm -> 视图数据连接层
// 下面的 data 就是数据，是我们自己定义的
// 下面的 template 就是视图模板，也是我们自己定义的
// vm 视图数据连接层是 vue 组件做的
const app = Vue.createApp({
data(){
return{
message: 'hello world'
}
},
template: '<div>{{message}}</div>'
});
// 挂载（绑定）到 id 为 root 的标签
// 这行代码的返回值就是 vue 应用的根组件
// 这里的 vm 就是应用的根组件
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612112626889.png
2、理解Vue的生命周期函数*
生命周期图
图片来自官方文档，注释是本人参考网上解读和英文含义写的，不是特别专业，仅作参考！
lifecycle.png
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
message: 'hello world'
}
},
// 创建实例之前执行的函数
beforeCreate(){
console.log(this.message, "beforeCreate");
},
// 创建实例之后执行的函数
created(){
console.log(this.message, "created");
},
// 实例创建之后，挂载之前执行
beforeMount(){
console.log(document.getElementById("root").innerHTML,"beforeMount");
},
// 挂载之后执行，此时数据已经被绑定到视图上了
mounted(){
console.log(document.getElementById("root").innerHTML,"mounted");
},
// 当数据发生变化时，页面更新前执行的函数
beforeUpdate(){
console.log(document.getElementById("root").innerHTML,"beforeUpdate");
},
// 当数据发生变化时，页面更新后执行的函数
updated(){
console.log(document.getElementById("root").innerHTML,"updated");
},
// 当 vue 应用失效时，且在被销毁前，执行的函数
beforeUnmount(){
console.log(document.getElementById("root").innerHTML,"updated");
},
// 当 vue 应用失效时，且在被销毁后，执行的函数
unmounted(){
console.log(document.getElementById("root").innerHTML,"updated");
},
template: '<div>{{message}}</div>'
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210612132524993.png
关于模板
参考生命周期图解的7和8，如果有模板就去编译，没有就将所绑定的标签作为模板，因此可以这样写！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<!-- 将页面内容写到这里 -->
<div>{{message}}</div>
</div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
message: 'hello world'
}
}
// 删除这里的模板
// template: '<div>{{message}}</div>'
});
const vm = app.mount('#root');
</script>
</html>
Vue3的生命周期函数图
de01e730e563406cbf3399861fa23aa4tplv-k3u1fbpfcp-zoom-1.png
Vue3全部的生命周期钩子与Vue2比较
我们可以看到
beforeCreate和created被setup替换了（但是 Vue3 中仍然可以使用， 因为 Vue3 是向下兼容的， 也就是实际使用的是 vue2 的）。其次，钩子命名都增加了on; Vue3.x 还新增用于调试的钩子函数onRenderTriggered和onRenderTricked
3eadd1ec0ac94343951ae2453cf41fcetplv-k3u1fbpfcp-zoom-1.png
