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>
|