3，Vue3核心语法
1, App.vue 根组件
<template>
<!--html 结构-->
</template>
<script>
// JS 或 TS
</script>
<style>
<!--样式-->
</style>2, main.ts
// 引入 createApp 用于创建应用
import {createApp} from 'vue'
// 引入 App根组件
import App from './App.vue'
// 调用createApp()方法创建应用并放在id为app的容器里面
createApp(App).mount('#app')
一个简单的效果代码如下
1, src/components/Person.vue
<template>
<div class="person">
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>爱好:{{ hobby }}</h2>
<h2>地址:{{ address }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name: "Person",
data() {
return {
name: "张三",
age: 18,
hobby: "篮球",
address: "北京市朝阳区",
tel: "18017927192"
}
},
methods: {
changeName() {
this.name = "zhang-san"
},
changeAge() {
this.age += 1;
},
showTel() {
alert(this.tel);
}
}
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
2, src/main.ts
// 引入 createApp 用于创建应用
import {createApp} from 'vue'
// 引入 App根组件
import App from './App.vue'
// 调用createApp()方法创建应用并放在id为app的容器里面
createApp(App).mount('#app')
3, src/App.vue
<script lang="ts">
import Preson from './components/Preson.vue';
export default{
// 组件名称
name: 'App',
// 注册组件
components: {
Preson,
}
}
</script>
<template>
<div class="app">
<h1>您好啊!</h1>
<!-- 使用组件: -->
<Preson></Preson>
</div>
</template>
<style scoped>
.app {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
4, index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>一个简单的效果图如下
点击查看联系方式
Options API 与 Components API
vue2每增加一个功能，都要去相应的选项添加
绿色功能的函数包含着：数据,方法，计算属性，监视，包含了很多很多的东西，此时他就集中了，以后要修改绿色功能，你只需要找到该函数就可以修改了，不用在满世界去寻找 data,methods,computed等
