简介：

vue是一个中国流行的js框架，看了不少教程都是vue+js，而且版本还老一些，导致我创建的vue+ts根本没办法运行，一直报错，干脆摸索着自己也写一下吧。毕竟vuejs.org，也写的vue+js或许是没更新吧。

`<script setup>`

老的写法：

如果不启用TS，可以去掉 lang=“ts”

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<script lang="ts">

export default{
  data() {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

<template>
  <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  <div>
    {{ msg }}
  </div>
</template>

<style scoped></style>

新写法：

script添加了一个 setup

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<script setup lang="ts">

const msg = "hello world."
</script>

<template>
  <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  <div>
    {{ msg }}
  </div>
</template>

<style scoped></style>

据说是这样的演变

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<script lang="ts">

export default {
  setup() {
    const msg = "hello"
    return {
      msg
    }
  }
}

</script>

<template>
  <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  <div>
    {{ msg }}
  </div>
</template>

<style scoped></style>