vue2

vue3中可以寫vue2的語法，vue2的結構像一個花盆里的根（根組件App.vue），根上可以插上不同的枝杈和花朵（組件）。

組件的結構：

// 這里寫邏輯行為
<script lang="ts">
export default{name: 'App'
}
</script>
// 這里寫頁面結構（相當于html）
<template></template>
// 這里寫頁面裝飾（相當于css）
<style></style>

html和css的基礎打好，關于template和style標簽的書寫就很簡單，這里需要著重講解一下script標簽的外部暴露（vue2特有的）

script

vue2 采用組件式API，name,data,methods,…都寫在固定的key的內部里面，最后暴露出來。

外部暴露

組件只有導出（暴露），才能被其他組件引用，并且都用鍵值對寫。

export default{name:'組件的名字'data(){return {// 數據// 這里注意，數據只能函數形式寫，因為同組件多的話，避免數據污染，每個組件都有自己單獨的數據。	}}methods:{// 這里寫函數...},compute(){},setup(){// vue3的組合式API// 數據let a = 10;// 方法function 方法名(){...}...return{將數據，方法交出去，模板中才能使用}}
}

vue3 setup

setup與data或者methods等同級別，在setup中定義的數據，data或者methods等可以通過this.訪問到，反之則不能。

但是在export default{}中寫setup還需要交出去數據和方法，有更優雅的語法糖寫法：

<script lang="ts" setup>
let a = 123;
...
</script>