![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
typescript
爱生活,爱编程
在以后的日子里,我会不断的写博客,争取拿下大前端
展开
-
ts基础类型
基础类型TypeScript 支持与 JavaScript 几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。布尔值最基本的数据类型就是简单的 true/false 值,在JavaScript 和 TypeScript 里叫做 boolean(其它语言中也一样)。let isDone: boolean = false;isDone = true;// isDone = 2 // error数字和 JavaScript 一样,TypeScript 里的所有数字都是浮点数。 这些浮.原创 2020-12-19 10:44:00 · 507 阅读 · 1 评论 -
vue3 proxy基本用法
vue3 proxy基本用法vue3 proxy基本用法新的改变基本使用vue3 proxy基本用法新的改变我们的vue3 使用proxy 来代替vue2 的 Object.defineProperty 效率更高,值得我们学习基本使用 <script> var target = { name: "xiaoming", age: 18 } // handler 是一个对象原创 2020-12-19 10:38:24 · 11029 阅读 · 5 评论 -
4. 使用webpack打包TS
4. 使用webpack打包TS下载依赖yarn add -D typescriptyarn add -D webpack webpack-cliyarn add -D webpack-dev-serveryarn add -D html-webpack-plugin clean-webpack-pluginyarn add -D ts-loaderyarn add -D cross-env入口JS: src/main.ts// import './01_helloworld原创 2020-12-17 07:51:29 · 1118 阅读 · 4 评论 -
3. 第一个 TypeScript 程序
3. 第一个 TypeScript 程序编写 TS 程序src/helloworld.tsfunction greeter (person) { return 'Hello, ' + person}let user = 'Yee'console.log(greeter(user))手动编译代码我们使用了.ts扩展名,但是这段代码仅仅是 JavaScript 而已。在命令行上,运行 TypeScript 编译器:tsc helloworld.ts输出结果为..原创 2020-12-17 07:48:23 · 201 阅读 · 0 评论 -
02_安装TS.md
02_安装TS.md2. 安装 TypeScript命令行运行如下命令,全局安装 TypeScript:npm install -g typescript安装完成后,在控制台运行如下命令,检查安装是否成功(3.x):tsc -V原创 2020-12-17 07:47:14 · 232 阅读 · 0 评论 -
01_初识Ts
1. 初识 TypeScriptTypeScript 的介绍TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。2012年10月,微软发布了首个公开版本的TypeScript,2013年6月19日,在经历了一个预览版之后微软正式发布了正式版TypeScriptTypeScript的作者是安德斯·海尔斯伯格,C#的首席架构师。它是开源和跨平台的编程语言。TypeScript扩展了JavaScript的语法,所原创 2020-12-17 07:46:17 · 219 阅读 · 0 评论 -
vue 上传四种状态处理
<template> <div> <!-- <p class="text-center">hello world</p> --> <input ref='uploadInput' type= "file" class="dl-none" name="icon" @change="dealfilechange"/> <button class="btn btn-primary.原创 2020-12-14 20:23:25 · 1006 阅读 · 0 评论 -
vue3文件上传的操作解析
1,让原来的Input 框隐藏起来2, 当我们点击按钮的时候,手动触发原来Input 的点击事件3, 当input:type=file 发生变化时,得到文件,4, 生成formdata5, 通过axios 去提交文件fileUpload.vue<template> <div> <!-- <p class="text-center">hello world</p> --> <i.原创 2020-12-14 15:14:35 · 6149 阅读 · 0 评论 -
vue3.x 插槽复习
vue3.x 插槽复习child.vue<template> <div> <p>hello world</p> <slot></slot> <p>hello world</p> <slot name="header" age = "18" ></slot>原创 2020-12-13 19:10:48 · 1023 阅读 · 0 评论 -
vue3.x emit 用法
child.vue<template> <div> <p>hello world</p> <button @click = "go" class="btn btn-success">go</button> </div></template><script lang="ts">import Vue from 'vue原创 2020-12-13 13:17:13 · 25008 阅读 · 15 评论 -
vue3.x 组件传递函数
定义要传递的属性类型2, 传递属性3, 使用行,下一篇,我们将去测试emit 插槽啥的,都能搞定!原创 2020-12-12 15:58:08 · 2423 阅读 · 0 评论 -
vue3动态创建组件,挂载到dom 节点上,修复版本
// 将组件挂在到节点上!const creatComp = (comp:Component,prop:Object)=>{ var app = createApp(comp,{ ...prop }) var divEle = document.createElement("div") // 让我们节点挂在到一个dom元素上 document.body.appendChild(divEle) app.mount(divEle) .原创 2020-12-12 10:00:44 · 14739 阅读 · 6 评论 -
vue3.x 动态创建组件
import {createApp, onUnmounted} from "vue"import MinDialg from "../views/minDialog.vue"const createMinDialog=()=>{ var app = createApp(MinDialg,{ isshow:true }) var divEle = document.createElement("div") // 让我们节点挂在到一个dom元素上 ..原创 2020-12-11 13:57:05 · 5161 阅读 · 1 评论 -
vue3.x 传送门 teleport 的用法,很简单吆!提升2
我们每次都要自己在index.html 添加节点,这个操作不好,所以我们要改进index.html 去掉节点在min-Dialog 组件中,我们手动创建,添加到body 上 setup(){ const mountEle = document.createElement("div"); mountEle.id = "dialog"; // 挂在到body 上 document.body.appendChild(mountEle原创 2020-12-10 15:59:40 · 466 阅读 · 0 评论 -
vue3.x 传送门 teleport 的用法,很简单吆!
minDialog.vue<template> <!-- 最终呢,我们的组件就会挂在到#dialog 一个documentElement --> <teleport to ="#dialog" v-if ="isshow"> <h2>i am a dialog...</h2> </teleport></template><script lang="ts">i原创 2020-12-10 15:52:17 · 1050 阅读 · 1 评论 -
小荣荣之vuex4.x 的使用
1, 安装npm i vuex@next --save2, main.ts 中进行注册// vuex4.x 才有 createStore 方法import {createStore} from "vuex"最后一步就可以使用了结果如下:上面是vuex 以前的语法,现在大概是 钩子函数的语法!效果仍然可以显示...原创 2020-12-09 19:58:12 · 791 阅读 · 1 评论 -
vue-router4.x useRouter 获取路由器,用来跳转
<template><div class="bg"> <h2>{{title}}</h2> <h2>{{age}}</h2> <!-- <pre> {{route}} </pre> --> <p> 动态的跳转路由 <a @click.prevent="jump">.原创 2020-12-09 09:00:29 · 12727 阅读 · 0 评论 -
vue-router4.x 接受值的方法useRoute
首先我们给路由配置信息加一个名字其次我们写一个路由连接当跳转到我们的路由组件上的时候,我们去接受参数我们看下显示:黄色信息,都是当前路由的信息本节重点,就是useRoute 的钩子函数使用...原创 2020-12-09 08:32:29 · 7292 阅读 · 1 评论 -
vue3 使用vue-router
这个步骤,我给大家1,安装npm i vue-router@next --save2, main.js 中import { createApp } from 'vue'import App from './App.vue'import {createRouter,createWebHashHistory} from "vue-router"import rongrong from "./components/rongrong.vue"import HelloWorld fr..原创 2020-12-08 19:51:49 · 4963 阅读 · 1 评论 -
vue3梳理小荣荣组件
<template><div class="bg"> <h2>{{title}}</h2> <h2>{{age}}</h2></div> </template><script lang="ts">import {defineComponent,reactive,toRefs}from 'vue'; export default defineComponent(.原创 2020-12-08 13:18:43 · 113 阅读 · 0 评论 -
vue3 知识梳理,荣荣最美丽,最可爱了,如此迷人,么么哒
vue3 composition真的没啥,通过下面例子,你会发现,只是个写法问题<template><div class="container"> <!-- <div class="tabs"> <button>xihuan</button> <button>noxihuan</button> </div> <div class="c原创 2020-12-08 12:55:24 · 147 阅读 · 1 评论 -
Vue3.0 跨域问题
这个破问题,也只有开发阶段有问题, 上传到服务器都是一个域名有个啥问题给大家看下https://acg.xydwz.cn/api/api.php?return=json我们请求的接口是这个,就必须设置跨域问题vue.config.jsmodule.exports = { outputDir: 'dist', //build输出目录 assetsDir: 'assets', //静态资源目录(js, css, img) lintOnSave: false, //是原创 2020-12-07 09:47:41 · 390 阅读 · 0 评论 -
vue3 网络操作01
vue3 网络操作先写一个hook// 得到所有的列表import {ref} from "vue" import axios from "axios"import { v8IntrinsicIdentifier } from '@babel/types';function getAllList(){ const Loading = ref(true); const Loaded = ref(false); const result = ref(null);.原创 2020-12-05 11:52:11 · 245 阅读 · 0 评论 -
vue3 计算属性的写法
<template><div class="container"> <p>{{count}}</p> <p>{{double}}</p> <button class="btn btn-primary" @click="add" type="submit">+</button></div> </template><script lang="ts".原创 2020-12-03 12:17:28 · 13000 阅读 · 1 评论 -
vue3 鼠标点击,跟着显示坐标
<template><div> <p> {x}--{y} {{x}}---{{y}} </p></div> </template><script lang="ts">import { defineComponent } from 'vue';// import HelloWorld from './components/HelloWorld.vue';import {ref, .原创 2020-12-01 13:43:29 · 1590 阅读 · 2 评论 -
vue3 reactive 实现响应式
<template><div> <img alt="Vue logo" src="./assets/logo.png"> <button @click = "add">add</button> <p> {{data.x}}--{{data.y}} </p></div> </template><script lang="ts">import .原创 2020-12-01 09:51:28 · 2918 阅读 · 0 评论 -
vue3 composition基本使用
我手动回顾一下吧,第一步安装npm i @vue/cli -gvue create xxxcd xxx npm run serve安装具体配置我就不写,你自己百度吧!我直接用了typescript(我的理解就是给原来的js 加了面向对象的翅膀,我个人理解)————————————————————————————我给大家看下结构结构和vue2.x 没有多个变化,main.ts 是入口,App.vue 是根组件shims-vue.d.ts 类型定义...原创 2020-12-01 09:36:59 · 4898 阅读 · 0 评论 -
parcel 打包编译ts
1 安装yarnnpm i yarn -g2, 安装parcelyarn add --dev parcel@next3,使用他会自动将ts 变成 js它自动编译的js行,使用就到这里,大家加油原创 2020-11-30 08:43:07 · 358 阅读 · 0 评论