本文共 6080 字,大约阅读时间需要 20 分钟。
配置项目1.新建目录 demots2.tsc --init 初始化tsconfig.json文件3.修改tsconfig.json文件 { "compilerOptions":{ "outDir":"./dist" }, "include":['./src'] }4.新建 dist src5.tsc -p tsconfig.json -watch
// 接口定义// 关键字 interfaceinterface Animal{ color:string, height:number}let a:Animal = { color:'gold', height:30,}
// 属性接口interface Person{ name:string, age:number, car?:string,//可选属性}let liujin:Person = { name:'刘劲', age:18, // car:'共享单车'}interface Point{ readonly x:number,//只读属性 readonly y:number,}let p:Point = { x:20, y:30}// p.x = 40;console.log(p);
// 方法接口interface LogA{ (a:number,b:number):number}let add:LogA = (a:number,b:number)=>{ return a + b}let minus:LogA = (a:number,b:number)=>{ return a - b}console.log(add(4,8));console.log(minus(30,10));
// 类接口interface People{ name:string; fun():void}let p1:People = { name :'赵丽颖', fun():void{ console.log('这是调用接口的方法'); }}console.log(p1);
// 类实现接口需要采用关键字 implementsclass Man implements LogB{ name:string = '唐达'; fn():void{ console.log('这是调用接口的方法'); }}let tangda = new Man()console.log(tangda.name);tangda.fn()
interface A{ fn():void}interface B{ fn1():void}class C implements A,B{ fn():void{ console.log('实现A接口'); } fn1():void{ console.log('实现B接口'); }}let c = new C()c.fn();c.fn1();
// 接口继承interface D extends A{ fn2():void}class E implements D{ fn():void{ console.log('实现了A接口'); } fn2():void{ console.log('实现了D接口'); }}let e = new E()e.fn();e.fn2();
装饰器其实就是一个函数,用来装饰类,属性和方法
装饰器:普通装饰器 工厂装饰器
// 普通装饰器// params:为系统自动注入参数function logB(params:any):void{ // 接收参数为装饰器所装饰的类 console.log(params); }@logBclass Http{ }
// 类装饰器function logC(params:any){ return function(target:any){ // 接收参数为装饰器传递的参数 console.log("params",params); // 接收参数为装饰器所装饰器的类 console.log("target",target); console.log( target.name); // console.log(target.age); target.prototype.age = params target.prototype.fn = ()=>{ console.log('该方法被调用了'); } }}@logC('小王')class Http1{ name:string | undefined = '哈哈'; age:string | undefined; fn(){ }}let h = new Http1()console.log(h.age);h.fn()
// 属性装饰器function logD(params:any){ return function(target:any,attr:any){ // 接收参数为装饰器传递的参数 console.log('params:',params); // 接收参数为装饰器装饰属性所在的类 console.log('target:',target); // 装饰器所装饰的属性名 console.log('attr:',attr); target[attr] = params }}class Http2{ @logD('属性装饰器') name:string | undefined;}let h2 = new Http2()console.log(h2.name);
// 方法装饰器function logE(params:any){ return function(target:any,funName:any,desc:any){ // 接收参数为装饰器传递的参数 console.log("params:",params); // 接收参数为装饰器装饰器方法所在的类 console.log("target:",target); // 接收参数为装饰器装饰器的方法名 console.log("funName:",funName); // 接收参数为装饰器装饰方法的详细信息 console.log("desc:",desc); }}class Http3{ @logE('方法装饰器') fn(){ var num:number = 20; }}
官网地址:https://www.vue3js.cn/docs/zh/guide/introduction.html
1.脚手架安装:cnpm i @vue/cli@3.0.0 -g2.vue -v 查看版本3.创建项目: vue create 项目名称
1.脚手架安装:cnpm i @vue/cli-init -g2.创建项目:vue init webpack 项目名称
1.vue create demo3.0
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SkmD1zeP-1616505719048)(C:\Users\Administrator\Desktop\web1102\day14-ts-vue3.0\1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9td5ah16-1616505719050)(C:\Users\Administrator\Desktop\web1102\day14-ts-vue3.0\2.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u7eLYfPS-1616505719052)(C:\Users\Administrator\Desktop\web1102\day14-ts-vue3.0\3.png)]
5.项目启动: npm run serve
6.修改启动命令
在配置文件package.json{ "scripts":{ "start":"npm run serve" }}
7.再次启动项目: npm start
这是订单组件
这是订单组件
name的值为:{ {name}}
这是订单组件
name的值为:{ {name}}age的值为:{ {age}}
name取反为:{ {changeName}}// 计算属性-----computed get changeName(){ return this.name.split('').reverse().join('') }
这是订单组件
name的值为:{ { name}}name取反为:{ { changeName}}age的值为:{ { age}}
这是订单组件
name的值为:{ {name}}name取反为:{ {changeName}}age的值为:{ {age}}年龄:
1.父组件: 通过自定义属性进行传递数据2.子组件: 通过@Prop装饰器来接收父组件传递的数据
父组件 About.vueThis is an about page
name的值为:{ {name}}
子组件: Child.vue这是子组件
name的值为:{ {newname}}
1.子组件: 通过自定义事件@Emit装饰器进行传递2.父组件: 通过触发自定义事件名称进行接收.
子组件Child.vue这是子组件
name的值为:{ {newname}}
父组件 About.vueThis is an about page
name的值为:{ {name}}
新建vue.config.js
module.exports = { // 部署应用时的基本 URL publicPath:"", // build时构建文件的目录 outputDir: 'dist', // build时放置生成的静态资源 (js、css、img、fonts) 的目录 assetsDir: 'static', // 指定生成的 index.html indexPath: 'index.html', // 设置代理请求 devServer: { proxy: { '/api': { target: '', ws: true, changeOrigin: true }, } }}
转载地址:http://nxse.baihongyu.com/