开发者社区> 琴岛蛏子> 正文

学习vue3之路day1

简介: 学习vue3之路day1
+关注继续查看

作为一个后端开发,后台管理页面经历了jsp、freemarker、thymeleaf之后,现在已基本被前后端分离的大势代替。vue作为国内最火的前端技术,学习一二以可以进行后台管理页面的开发。在一些中小公司还是必备之技能。

Day1 TypeScript的快速上手。

Vue3更好的支持了TypeScript.TS可以提供更严格的校验,编译检查,兼有面向对象的优点,易于后期维护。对于大型项目推荐使用TS,可以更好的使用基础库、功能库,极大地帮助我们提升了开发效率和体验。

安装TypeScript

命令行运行如下命令,全局安装 TypeScript:

npm install -g typescript

安装完成后,在控制台运行如下命令

tsc -V

编写HelloWorld

创建文件 Helloworld.ts

function sayHello(){
    console.log("hello world TS");   
}

编译代码

tsc helloworld.ts

输出结果为一个 helloworld.js 文件,它包含了和输入文件中相同的 JavsScript 代码。

通过node.js运行代码

node helloworld.js

vscode自动编译

1). 运行命令 生成配置文件tsconfig.json
    tsc --init
2). 修改tsconfig.json配置   strict严格模式改为false
    "outDir": "./js",
    "strict": false,    
3). 启动监视任务: 
    终端 -> 运行任务 -> 监视tsconfig.json

类型注解

使用类型注解,进行类型声明、约束

function add(a:number,b:number):number{
    return a+b;
}

当使用如下代码时编译器会报错 类型“string”的参数不能赋给类型“number”的参数。,在编译阶段即可排除一部分错误。

add('a',1);

编译后的js代码

function add(a, b) {
    return a + b;
}

接口

接口定义了一个类型的结构。

如User用户包括 name,age

interface IUser{
    name: String,
    age: number;
}


function sayHello(user: IUser){
    console.log("hello "+user.name+" "+user.age);   
}

使用,当对象属性不对是编译报错

let user:IUser = {
    name:'张三',
    age: 20
}

sayHello(user);

TS中类似java面向对象的类型。它带有一个构造函数和一些公共字段。

类可以通过implements实现接口

class User implements IUser{
    name: string
    age: number

    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
}


let user2 = new User("lisi",30);

sayHello(user2);

总结

​ Day1 初步认识了TypeScript,对类型约束,接口、类有了初步的了解,后续继续学习TypeScript的更多语法。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
9717 0
新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。 2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 ,把教程里的例子模仿一遍,理解用法。
1383 0
VUE学习笔记(二)
以记录学习vue.js的路程,第二篇
171 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18694 0
vue学习笔记1-基本知识
1.npm 安装node.js的时候会一起安装npm包管理器,能够解决nodejs代码部署问题,常见使用如下: 允许用户从npm服务器下载别人编写的第三方包到本地应用允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用允许将自己编写的包或命令上传到npm服务器上供别人使用 新版的nodejs已经集成npm,安装好nodejs之后使用npm -v命令检查是否安装成功。
914 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25089 0
Vue的学习笔记(中篇)
Vue的学习笔记(中篇)
25 0
vue-学习笔记(更新中...)
vue学习笔记  2017-08-23  11:10:28     Vue实例: 1 var vm = new Vue({ 2 // 选项 3 })   实例化Vue、Vue实例,构造函数Vue、创建一个Vue的根实例,Vue实例气筒Vue,js应用 所有的 Vue.js 组件其实都是被扩展的 Vue 实例。
1022 0
Vue学习-1
为什么选择Vuejs 预读:为了满足当前移动webApp项目的开发需求,MVVM框架诞生,而VUEJS 便是这样一种js框架,其两大核心:数据驱动和组件化 为了解决webApp这些体验和开发上的不足,使用一个MVVM框架VUELS;
1454 0
学习Vue源码之前要先打基础--概念解析
在学习源码之前,我们需要了解这么几个东西的概念。什么是AST、什么是render函数、什么是模板等等
10 0
+关注
琴岛蛏子
潮来潮去,打洞卧沙
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载