Vue中使用TypeScript

​Tip: 这篇文章是我用到了typescript后写的，因为刚接触没多久，写得不好多多海涵，栗子用了另外一位作者的，在此表示感谢，vue3.x开始会慢慢向typescript靠拢，所以学习ts是非常有必要的， 阅读本文需要具备一定的TypeScript基础和vue基础。

当我们在 vue 单文件中使用 TypeScript 时,引入 vue-property-decorator 之后, script 中的标签就变为这样:

等同于：

把我们需要用到的属性给导入进来，在这里我导入了Component；这是 vue-property-decorator 组件提供的属性，至于有哪些属性下面我会说到。

相信很多小伙伴也注意到我使用了和以往不同的写法，使用了es6的类的写法，至于为何可以使用这种写法就是因为这个组件是完全依赖于 vue-class-component ；这是尤大神写的支持vue的组件， 具体可看 。建议先看看~

Tip:(很重要的一点)：在类中声明的变量其实和data中声明的是一样的，都是有双向绑定的；也就是例子中的ValA和ValB有了类型指定同时能双向绑定

这个组件完全依赖于 vue-class-component .它具备以下几个属性:

因为我个人也刚学ts没多久，写得不好，还请多多海涵。后续会继续更新。

使用vue.js构造modal组件的方法是使用 v-model 指令：

v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。

比如，多个勾选框，绑定到同一个数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">

<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

<label for="mike">Mike</label>

<br>

<span>Checked names: {{ checkedNames | json }}</span>

new Vue({

el: '...',

data: {

checkedNames: []

}

})

1.在项目整体新建一个项目文件夹（doc），并在文件夹里新建App.vue，main.ts 两个文件  最外层新建tsconfig.json文件。public新建doc.html文件。

2.APP.vue

3.main.ts文件

4.shims-vue.d.ts 文件 （若不引入 则main.ts中引入App.vue报错）

5.tsconfig.json文件

6.vue.congif.js文件配置更改

7.package.json文件 添加typescript插件  注意版本

---