天天的博客

基础类型TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。布尔值最基本的数据类型就是简单的 true/false 值，在JavaScript 和 TypeScript 里叫做 boolean（其它语言中也一样）。let isDone: boolean = false;isDone = true;// isDone = 2 // error数字和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。 这些浮.

vue3 proxy基本用法vue3 proxy基本用法新的改变基本使用vue3 proxy基本用法新的改变我们的vue3 使用proxy 来代替vue2 的 Object.defineProperty 效率更高，值得我们学习基本使用 <script> var target = { name: "xiaoming", age: 18 } // handler 是一个对象

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

3. 第一个 TypeScript 程序编写 TS 程序src/helloworld.tsfunction greeter (person) { return 'Hello, ' + person}let user = 'Yee'console.log(greeter(user))手动编译代码我们使用了.ts扩展名，但是这段代码仅仅是 JavaScript 而已。在命令行上，运行 TypeScript 编译器：tsc helloworld.ts输出结果为..

02_安装TS.md2. 安装 TypeScript命令行运行如下命令，全局安装 TypeScript：npm install -g typescript安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)：tsc -V

1. 初识 TypeScriptTypeScript 的介绍TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScriptTypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。TypeScript扩展了JavaScript的语法，所

<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.

1，让原来的Input 框隐藏起来2， 当我们点击按钮的时候，手动触发原来Input 的点击事件3， 当input:type=file 发生变化时，得到文件，4， 生成formdata5, 通过axios 去提交文件fileUpload.vue<template> <div> <!-- <p class="text-center">hello world</p> --> <i.

vue3.x 插槽复习child.vue<template> <div> <p>hello world</p> <slot></slot> <p>hello world</p> <slot name="header" age = "18" ></slot>

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

定义要传递的属性类型2， 传递属性3， 使用行，下一篇，我们将去测试emit 插槽啥的，都能搞定！

// 将组件挂在到节点上！const creatComp = (comp:Component,prop:Object)=>{ var app = createApp(comp,{ ...prop }) var divEle = document.createElement("div") // 让我们节点挂在到一个dom元素上 document.body.appendChild(divEle) app.mount(divEle) .

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元素上 ..

我们每次都要自己在index.html 添加节点，这个操作不好，所以我们要改进index.html 去掉节点在min-Dialog 组件中，我们手动创建，添加到body 上 setup(){ const mountEle = document.createElement("div"); mountEle.id = "dialog"; // 挂在到body 上 document.body.appendChild(mountEle

minDialog.vue<template> <!-- 最终呢，我们的组件就会挂在到#dialog 一个documentElement --> <teleport to ="#dialog" v-if ="isshow"> <h2>i am a dialog...</h2> </teleport></template><script lang="ts">i

1， 安装npm i vuex@next --save2, main.ts 中进行注册// vuex4.x 才有 createStore 方法import {createStore} from "vuex"最后一步就可以使用了结果如下：上面是vuex 以前的语法，现在大概是 钩子函数的语法！效果仍然可以显示...

<template><div class="bg"> <h2>{{title}}</h2> <h2>{{age}}</h2> <!-- <pre> {{route}} </pre> --> <p> 动态的跳转路由 <a @click.prevent="jump">.

首先我们给路由配置信息加一个名字其次我们写一个路由连接当跳转到我们的路由组件上的时候，我们去接受参数我们看下显示：黄色信息，都是当前路由的信息本节重点，就是useRoute 的钩子函数使用...

这个步骤，我给大家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..

<template><div class="bg"> <h2>{{title}}</h2> <h2>{{age}}</h2></div> </template><script lang="ts">import {defineComponent,reactive,toRefs}from 'vue'; export default defineComponent(.

vue3 composition真的没啥，通过下面例子，你会发现，只是个写法问题<template><div class="container"> <!-- <div class="tabs"> <button>xihuan</button> <button>noxihuan</button> </div> <div class="c

这个破问题，也只有开发阶段有问题， 上传到服务器都是一个域名有个啥问题给大家看下https://acg.xydwz.cn/api/api.php?return=json我们请求的接口是这个，就必须设置跨域问题vue.config.jsmodule.exports = { outputDir: 'dist', //build输出目录 assetsDir: 'assets', //静态资源目录（js, css, img） lintOnSave: false, //是

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);.

<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".

<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, .

<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 .

我手动回顾一下吧，第一步安装npm i @vue/cli -gvue create xxxcd xxx npm run serve安装具体配置我就不写，你自己百度吧!我直接用了typescript（我的理解就是给原来的js 加了面向对象的翅膀，我个人理解）————————————————————————————我给大家看下结构结构和vue2.x 没有多个变化，main.ts 是入口，App.vue 是根组件shims-vue.d.ts 类型定义...

1 安装yarnnpm i yarn -g2， 安装parcelyarn add --dev parcel@next3,使用他会自动将ts 变成 js它自动编译的js行，使用就到这里，大家加油