使用 TypeScript 来写 Vue

使用 TypeScript 来写 Vue

  Vue 和 TypeScript 的结合使我们在编写的代码的时候能更及时的避免各种错误,要想更优雅的去编写 Vue 组件,我们可以使用官方维护的 vue-class-component,这个库给我们提供了各种装饰器去结合 TypeScript 来编写我们的 Vue 组件,使用它的好处是我们能通过基于类的 API 去声明组件。
  而 vue-property-decorator 是一个基于 vue-class-component 的库,它提供更多结合 Vue 特性的装饰器,加快开发效率。

文章目录

  • 使用 TypeScript 来写 Vue
    • 安装
    • 一个基本的 vue 组件模板
    • 声明响应式属性 data
    • 计算属性 computed
    • 侦听属性 watch
    • 生命周期
    • 组件注册与传递 Prop
    • 父子组件通信 Emit
    • 混入对象 Mixins


安装

  • 直接使用 vue-cli3 来手动选择特性创建项目
# 1. 如果没有安装 Vue CLI 就先安装
npm install --global @vue/cli
    
# 2. 创建一个新工程,并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name
  • 分别安装
$ npm i -S vue-class-component 
$ npm i -S vue-property-decorator

一个基本的 vue 组件模板

<template>
  <div class="content-wrapper" >

  div>
template>


                    
                    

你可能感兴趣的:(vue)