• 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

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

  • 相关阅读:
    图像不存在时,可用一张通用图片代替
    中英文并排
    ThinkPHP无限级分类
    跑数据示例一
    ThinkPHP项目笔记之RBAC(权限)补充篇
    ThinkPHP项目笔记之RBAC(权限)下篇
    ThinkPHP项目笔记之RBAC(权限)中篇
    ThinkPHP项目笔记之RBAC(权限)上篇
    ThinkPHP项目笔记之RBAC(权限)基础篇
    layDate/DatePicker日期时间空间
  • 原文地址:https://www.cnblogs.com/wx18638101223/p/15947244.html
Copyright © 2020-2023  润新知