程序员噩梦typescript+vue3

typescript+vue3

typescript
- typescript是静态类型的语言
- typescript变量声明
setup
- 全局配置
- setup 使用路由
- 组合式api特点
- setup（）
- ref值类型响应对象
- setup生命周期
- setup(props,context)参数

typescript

typescript是微软推出的运行的时候. ts编译成JavaScript

typescript是静态类型的语言

typescript有三大特点
强类型
遵循ES6
遵循ES6

typescript变量声明

typescript有自己特有的声明变量方式

ts：any任意类型,void没有返回值,interface接口

<template><div class="home"><h1>vue+ts+setup+volar</h1><button @click="addCount(2)">{{ count }}</button><button>{{ num }}</button><button v-if="flag">{{ str }}</button><div v-for="(item, index) in list" :key="index">{{ item }}</div></template>

<script lang="ts" setup>
import step from '@/components/StepCom.vue'
import {ref,reactive} from 'vue'
const count = ref<number>(10);
const num = ref(5);
const str = ref<string>("i love ts")
const flag = ref<boolean>(true)
//声明一个接口
interface Iuser {name: string,age: number,pet: undefined | string
}
const list = reactive<Iuser>({ name: "mumu", age: 18, pet: "dog" })

setup

全局配置

app.config.globalProperties.xxx = yyy

setup 使用路由

import {useRouter,useRoute} from ‘vue-router’

const router = useRouter();
const route = useRoute()
//等同于this.$router 和this.$route

组合式api特点

1.更加直观，接近原生js
2.按需加载
3.没有this，降低了耦合性提高复用性

setup（）

相当于created生命周期
需要return返回，在模板中使用

ref值类型响应对象

const count = ref(5)在setup访问count值
count.value来访问//可以作为dom引用
const inp = ref(null)
<p ref = 'inp'>
inp.value.innerText

setup生命周期

onBeforeCreate 创建前
onCreated 创建完毕
onBeforeMount 挂在前
onMounted 挂在完毕
onBeforeUpdate 更新前
onUpdated 跟新后
unBeforeUnmount 卸载前
onUnmounted 卸载完毕

setup(props,context)参数

props 传入参数（响应式）

程序员噩梦typescript+vue3相关推荐

python爬虫小项目挣钱兼职,python程序员兼职平台
python爬虫去哪接单 python爬虫接单的方式有两种一.接定制需求的单子爬虫定制的需求其实很多,比如 "爬取某某电商网站的评论",这类需求一般是按照爬取数据量的大小来收费,价 ...
VUE3(黑马程序员vue2+vue3)
花了一个月半弄完可惜视频里案例的接口我都是产生跨域报错问题可能是里面的老师离职关闭了不建议观看因为视频里的vue3内容并不多还是需要找其他的视频观看比如最基本的setup就没有讲就是讲了拦截器 ...
为什么中国这么多高薪程序员，开发不出Java, Typescript, Python, Rust, Node.js这些基础设施？...
近日,有人在网上问了这个问题,引起了网友热议: 为什么中国这么多高薪程序员,开发不出Java,Typescript, Python, Rust, Node.js这些基础设施? 对这个问题,大家从不同角 ...
程序员的噩梦：世界上最难的5种编程语言
导读:每个程序员都熟悉许多编程语言.许多编程语言都是高级的,它们的语法是人类可读的.然而,也有一些低级语言,对于一个人来说,读起来很困难,但是可以理解.您是否遇到过一种既不可读又不可理解的编程语言? ...
程序员的最大噩梦是什么？
程序员的最大噩梦是什么? 原创 2015-07-08 陈舸程序员的那些事 (点击上方蓝字,可快速关注我们) 有国外程序员在 Quora 上提了一个问题:"程序员的最大噩梦是什么?" ...
C#、TypeScript之父Anders Hejlsberg：“会用Excel就是程序员 ”
[CSDN 编者按]近日,C#和TypeScript等编程语言的创造者Hejlsberg与TNS新闻编辑Darryl K.Taft进行了一场线上对话,围绕微软低代码/无代码.Web3等话题,分享了他对 ...
60岁还在写代码的程序员大师，Delphi、C#、TypeScript之父Anders Hejlsberg（安德斯·海尔斯伯格）：编程符合10000小时定律
[转载]Delphi.C#之父Anders Hejlsberg 近日首次访华,并在10月24日和27日参加了两场见面会,分享了他目前领导开发的TypeScript项目,并与国内前端开发者近距离交流.本 ...
C#、TypeScript 之父 Anders Hejlsberg：“会用 Excel 的，都是程序员 ”
译者 | 章雨铭责编 | 屠敏原文链接:https://thenewstack.io/microsofts-programming-language-czar-anders-hejls ...
项目管理之需求变更：化解程序员的“头号噩梦”
需求变更一直都是一个热门话题,特别是在奉行唯快不破的互联网公司,需求变更可以说是程序员的头号噩梦,也是"996"的直接元凶常见的需求变更流程首先要发起变更申请,由变更委员会来综 ...

程序员噩梦typescript+vue3

typescript+vue3

typescript

typescript是静态类型的语言

typescript变量声明

setup

全局配置

setup 使用路由

组合式api特点

setup（）

ref值类型响应对象

setup生命周期

setup(props,context)参数

程序员噩梦typescript+vue3相关推荐

最新文章

热门文章

程序员噩梦typescript+vue3

typescript+vue3

typescript

typescript是静态类型的语言

typescript变量声明

setup

全局配置

setup 使用路由

组合式api特点

setup（）

ref值类型 响应对象

setup生命周期

setup(props,context)参数

程序员噩梦typescript+vue3相关推荐

最新文章

热门文章

ref值类型响应对象