vue ts写法

迈不过友情╰ 2023-10-11 23:39 30阅读 0赞

![fe5dce19aba74dbf8fce2313f7200590.jpeg][]

Vue.js 和 TypeScript 结合使用可以让你的项目更加健壮和易于维护。在 Vue 3 中，你可以使用 Vue.js 的 Composition API 和 TypeScript 一起使用。以下是一个简单的 Vue.js 和 TypeScript 结合使用的例子：  
首先，确保你已经安装了 Vue.js 和 TypeScript。你可以使用 Vue CLI 创建一个新的 Vue.js 项目并选择 TypeScript 作为预设：  
\`\`\`bash  
vue create my-project  
\`\`\`  
然后选择 "Manually select features"，并勾选 "TypeScript"。  
接下来，我们创建一个简单的 Vue.js 组件。在 \`src/components\` 目录下创建一个名为 \`HelloWorld.vue\` 的文件，并添加以下代码：  
\`\`\`html  
<template>  
<div>  
<h1>\{ \{ message \}\}</h1>  
<button @click="changeMessage">点击更改消息</button>  
</div>  
</template>  
<script lang="ts">  
import \{ defineComponent, ref \} from "vue";  
export default defineComponent(\{  
name: "HelloWorld",  
setup() \{  
const message = ref("Hello Vue 3 and TypeScript!");  
function changeMessage() \{  
message.value = "你好，Vue 3 和 TypeScript！";  
\}  
return \{  
message,  
changeMessage,  
\};  
\},  
\});  
</script>  
\`\`\`  
在这个例子中，我们使用了 Vue.js 的 Composition API 和 TypeScript。我们首先从 "vue" 模块中导入了 \`defineComponent\` 和 \`ref\`。然后我们使用 \`defineComponent\` 函数定义了一个名为 "HelloWorld" 的组件。  
在 \`setup\` 函数中，我们定义了一个响应式引用 \`message\`，并初始化为 "Hello Vue 3 and TypeScript!"。我们还定义了一个名为 \`changeMessage\` 的函数，用于更改 \`message\` 的值。  
最后，我们将 \`message\` 和 \`changeMessage\` 返回，以便在模板中使用。  
现在，你可以在 \`src/App.vue\` 文件中引入并使用这个组件：  
\`\`\`html  
<template>  
<div id="app">  
<HelloWorld />  
</div>  
</template>  
<script lang="ts">  
import \{ defineComponent \} from "vue";  
import HelloWorld from "./components/HelloWorld.vue";  
export default defineComponent(\{  
name: "App",  
components: \{  
HelloWorld,  
\},  
\});  
</script>  
\`\`\`  
这样，你就可以在 Vue.js 项目中使用 TypeScript 了。希望这个例子能帮助你更好地理解如何在 Vue.js 中使用 TypeScript。

[fe5dce19aba74dbf8fce2313f7200590.jpeg]: https://img-blog.csdnimg.cn/fe5dce19aba74dbf8fce2313f7200590.jpeg