1.src中重要的組成

1.1main.ts

// 引入createApp用于創建應用
import { createApp } from "vue";
// 引用App根組件
import  App from './App.vue';createApp(App).mount('#app')

1.2 App.vue

其中要寫三種標簽

<template>
<!--html-->
</template><script>
//js或Ts 交互
</script><style>
/**樣式 */
</style>

eg示例

<template>
<!--html--><div class="app"><h1>你好！</h1></div>
</template><script lang="ts">
//js或Tsexport default {name:  'App' //組件名}
</script><style>
/**樣式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

2.再寫一個app

創建component文件夾
下面創建Preson.vue文件
編寫vue

<template><div class="person"><h2>姓名：{{ name }}</h2><h2>年齡：{{ age }}</h2><button @click="showTel">查看聯系方式</button></div>
</template>
<script lang="ts">export default {name:'Person',data(){return{name:'張三',age:18,tel:'129299292'}},methods:{showTel(){alert(this.tel)}}}
</script>
<style scoped>.person {background-color:  skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}</style>

讓電話點擊顯示，在showTel中使用shis指向tel電話

2.1將Preson.vue加入到App.vue跟中

<script lang="ts">
//js或Ts
import Person from './components/Preson.vue'export default {name:  'App', //組件名components:{Person}  //注冊組件}</script>

2.2 給Preson.vue 添加修改姓名和年齡

<template><div class="person"><h2>姓名：{{ name }}</h2><h2>年齡：{{ age }}</h2><button @click="showTel">查看聯系方式</button><button @click="changeAge">修改年齡</button><button @click="changeName">修改姓名</button></div>
</template><script lang="ts">export default {name:'PreSon',data() {return {name:'張三',age:18,tel:'13888888888'}},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>

運行結果