博客
关于我
配置ts编译文件、vue3.0
阅读量:343 次
发布时间:2019-03-04

本文共 6080 字,大约阅读时间需要 20 分钟。

一.配置ts编译文件

配置项目1.新建目录 demots2.tsc --init  初始化tsconfig.json文件3.修改tsconfig.json文件	{   		"compilerOptions":{   			"outDir":"./dist"		},		"include":['./src']	}4.新建 dist  src5.tsc -p tsconfig.json -watch

1.接口(interface)

定义

// 接口定义// 关键字 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();

2.装饰器(decorator)

装饰器其实就是一个函数,用来装饰类,属性和方法

装饰器:普通装饰器 工厂装饰器

普通定义

// 普通装饰器// 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;    }}

二.vue3.0

官网地址:https://www.vue3js.cn/docs/zh/guide/introduction.html

1.安装脚手架

1.脚手架安装:cnpm i @vue/cli@3.0.0 -g2.vue -v  查看版本3.创建项目: vue create 项目名称

2.要想拉取2.x版本

1.脚手架安装:cnpm i @vue/cli-init -g2.创建项目:vue init webpack 项目名称

3.创建项目步骤

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

4.使用vue3.0的新语法

1.组件的创建

2.属性

3.方法

4.计算属性

name取反为:{ {changeName}}
// 计算属性-----computed get changeName(){ return this.name.split('').reverse().join('') }

5.监听(Watch)

  • 普通监听
    • 普通变量采用普通监听
  • 深度监听
    • 是对象或者数组对象需要采用深度监听

6.组件之间通信

  • 父传子
1.父组件: 通过自定义属性进行传递数据2.子组件: 通过@Prop装饰器来接收父组件传递的数据
父组件 About.vue
子组件: Child.vue
  • 子传父
1.子组件: 通过自定义事件@Emit装饰器进行传递2.父组件: 通过触发自定义事件名称进行接收.
子组件Child.vue
父组件 About.vue

7.设置配置文件(做配置代理)

新建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/

你可能感兴趣的文章
Mura CMS processAsyncObject SQL注入漏洞复现(CVE-2024-32640)
查看>>
Mysql DBA 高级运维学习之路-DQL语句之select知识讲解
查看>>
mysql deadlock found when trying to get lock暴力解决
查看>>
MuseTalk如何生成高质量视频(使用技巧)
查看>>
mutiplemap 总结
查看>>
MySQL DELETE 表别名问题
查看>>
MySQL Error Handling in Stored Procedures---转载
查看>>
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>
Mysql group by
查看>>
MySQL I 有福啦,窗口函数大大提高了取数的效率!
查看>>
mysql id自动增长 初始值 Mysql重置auto_increment初始值
查看>>
MySQL in 太多过慢的 3 种解决方案
查看>>
MySQL InnoDB 三大文件日志,看完秒懂
查看>>
Mysql InnoDB 数据更新导致锁表
查看>>
Mysql Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>