Vue+TypeScript学习
Vue CLI 内置了 TypeScript 工具支持。在 Vue 的下一个大版本 (3.x) 中也计划了相当多的 TypeScript 支持改进,包括内置的基于 class 的组件 API 和 TSX 的支持。
- 创建工程
npm install --global @vue/cli
vue create my-project-name:选择 "Manually select features (手动选择特性)" 选项 - 注意5点
-
methods
可以直接声明为类成员方法。<script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component({ props:{ msg: String } }) export default class HelloWorld extends Vue { // @Prop() private msg!: string; // method greet () { alert('greeting: ' + this.msg) } } </script>
-
可以将计算属性声明为类属性访问器。
<script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class HelloWorld extends Vue { // @Prop() private msg!: string; // computed get computedMsg () { return 'computed ' + this.msg } } </script>
-
Initial
data
可以声明为类属性(如果使用Babel,则需要babel-plugin-transform-class-properties)。<script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class HelloWorld extends Vue { // @Prop() private msg!: string; // initial data msg = 123 } </script>
-
data
,render
并且所有Vue生命周期钩子也可以直接声明为类成员方法,但是您不能在实例本身上调用它们。声明自定义方法时,应避免使用这些保留名称。 -
对于所有其他选项,将它们传递给装饰器函数。
-
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!