前言
气势汹涌,ts似乎已经在来的路上,随时可能敲门。
2015年,三大前端框架开始火爆的时候,我还在抱着Backbone不放,一直觉得可以轻易转到其他框架去。后来换工作,现实把脸都打肿了,没做过vue、react、angular?不要!
今天,不能犯这个错了,毕竟时不我与,都快奔三了。
vue-cli3
vue-cli3的详细功能推荐官方文档,不在本文介绍范围内。
安装:
npm install -g @vue/cli检查安装成功与否:
vue --version创建项目:
vue create myapp可以选择
Manually select feature来自由选择功能,常用的有vuex、vue-router、CSS Pre-processors等,我们再把typescript勾上,就可以回车进入下一步了。
PS:勾选的操作是按空格键。创建成功之后,执行启动命令:
npm run serve就可以通过
http://localhost:8080/访问本地项目啦。typescript
如果没有typescript基础,可以先补补课,大概花三十分钟就可以了解typescript的一些特性,比如:TypeScript 入门教程。
ts最主要的一点就是类型定义,有个概念才好看得懂demo。
vue-property-decorator
这是一个涵盖了vue的一些对象的集合,我们可以从这里取一些东西出来:
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';取出来的这几个属性,分别是 组件定义
Component,父组件传递过来的参数
Prop,原始vue对象
Vue,数据监听对象
Watch。还包括这里没有列举出来的
Model,
Emit,
Inject,
Provide,可以自己尝试下。demo
<template>
<div class="hello">
<h1>{{ msg }}--{{ names }}</h1>
<input type="text" v-model="txt">
<p>{{ getTxt }}</p>
<button @click="add">add</button>
<p>{{ sum }}</p>
</div>
</template><script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {










