Vue setup语法糖

embedded/2024/10/21 23:02:04/

未使用setup语法糖

<script lang="ts">javascript">export default {name: "App",setup() {let name = "张三"let age = 20function handleClick() {age += 1}return {name,age,handleClick,}}}
</script><template><div class="class"><h1>Hello Vue 3</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="handleClick">点击我，年龄+1</button></div>
</template><style scoped>.class {color: red;font-size: 20px;height: 20%;}button {background-color: blue;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;}
</style>

未使用setup语法糖前需要将定义的数据，方法等return出去，但是当定义的东西多了之后容易忘掉产生错误，因此可以使用语法糖的形式较为麻烦。

使用setup语法糖

<script lang="ts" setup>javascript">let name = "张三"let age = 20function handleClick() {age += 1}  
</script>
<script>javascript">export default {name: "Person",}
</script><template><div class="class"><h1>Hello Vue 3</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="handleClick">点击我，年龄+1</button></div>
</template><style scoped>.class {color: red;font-size: 20px;height: 20%;}button {background-color: blue;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;}
</style>

其中第一个script标签用于设置数据，第二个script标签用于设置vue组件的名字，也可以用省略写法将两个script标签合成一个，但是要先安装一个插件

安装插件
修改vite.config.ts文件

修改Vue组件，将 lang=“ts” setup name=“Person234” 三个属性写到一起。

<script lang="ts" setup name="Person234">javascript">let name = "张三"let age = 20function handleClick() {age += 1}  
</script><template><div class="class"><h1>Hello Vue 3</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="handleClick">点击我，年龄+1</button></div>
</template><style scoped>.class {color: red;font-size: 20px;height: 20%;}button {background-color: blue;color: white;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;}
</style>