vue中使用typescript与js语法区别,个人感觉

1、启用了变量语法校验,多类型可以加上问好

2、安装方式 vue add typescript

3、Ucc clasee-style component syntax?(是否使用class风格的组件语法,我不习惯)  选择NO,一起他一路yes

4、对象的定义,直接是interface  对象名称{对象属性:类型};

      初始化的时候,var 变量名称:对象名称={初始化}

                                var变量名称={} as 对象名称

    在data(){

  return{  直接变量名称}

5、在页面script暴漏的时候直接 把自己也导出, import {自己} from ‘vue’

          export default 自己({  })

}

6、变量定义

复制代码
<template>
    <div>
       News--{{title}}

       <br>
       <br>
       count={{count}}

       <br>
       <br>
       <button @click="setCount">改变Count</button>
       <br>
       <br>
       {{reverseTitle}}
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
//data数据的接口
interface News{
    title:string,
    description:string,
    count:number,
    content?:string
}
// let newsData:News={
//     title:"我是一个新闻",
//     description:"我是一个新闻的描述",
//     count:12
// }

let newsData={
    title:"我是一个新闻",
    description:"我是一个新闻的描述",
    count:12
} as News

export default defineComponent({
    data(){
        return newsData
    },methods:{
        setCount():void{
          this.count=123
        }
    },computed:{
        reverseTitle():string{
            return this.title.split("").reverse().join("")
        }
    }

})
</script>

<style lang="scss">
//cnpm install -D sass-loader node-sass

    
</style>
View Code
复制代码

 

和初始化在暴漏自己在外面执行

posted @   郑州谷多软件  阅读(300)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示