59 lines
1.6 KiB
HTML
59 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<!-- 1. 导入vue.js的脚本文件 -->
|
||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
{{msg}}
|
||
<h1>{{web.title}}</h1>
|
||
<h2>{{web.url}}</h2>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactive
|
||
const { createApp, reactive } = Vue; // 解构赋值语法
|
||
// 创建一个 Vue 的应用程序
|
||
createApp({
|
||
// 组合式API 的 setup 用于设置响应式数据和方法
|
||
setup() {
|
||
const web = reactive({ // 创建一个响应式的数据对象web，里面包含title和url两个属性
|
||
title: "HNUCM",
|
||
url: "www.hnucm.edu.cn"
|
||
})
|
||
|
||
// 返回数据
|
||
return {
|
||
msg: "success",
|
||
web
|
||
}
|
||
}
|
||
}).mount('#app') // 将 Vue 应用程序挂载到app元素上
|
||
</script>
|
||
<script>
|
||
// 什么是解构: 从数组或对象中提取值将其赋予新变量
|
||
// 数组解构
|
||
const number = [1, 2, 3];
|
||
const [one, two, three] = number;
|
||
console.log(one, two, three)
|
||
// 对象解构
|
||
const person = {
|
||
name: "Maxxie",
|
||
age: 30
|
||
};
|
||
const { name, age } = person;
|
||
console.log(name, age)
|
||
// 函数参数解构
|
||
function introduce({ name, age }) {
|
||
console.log(`My name is ${name}, I'm ${age} years old. `);
|
||
}
|
||
introduce(person);
|
||
</script>
|
||
|
||
</html> |