vue2
vue3中可以写vue2的语法,vue2的结构像一个花盆里的根(根组件App.vue),根上可以插上不同的枝杈和花朵(组件)。
组件的结构:
html
// 这里写逻辑行为
<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>