Vue2+Elemet Ui+Ts

vue2项目引入ts实操记录(一)_vue2引入ts_MandiGao的博客-CSDN博客

vue-property-decorator使用指南 - 掘金

下载插件  npm i -D vue-class-component vue-property-decorator

下载elemetui  Element - The world's most popular Vue UI framework 

 vue页面模板

<template>
    <div> 
    </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'  
@Component({ 
})
export default class Home extends Vue {
 
}
</script>

1、数据声明

在js中数据都是在data中定义，ts中可在export中使用

<template>
    <div> 
        <span>{
    
    { a }}</span> 
    </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
@Component({
   
})
export default class Home extends Vue {
    a = 1
   
}
</script>

2、方法

 这里使用el-button点击事件举例

<template>
    <div> 
        <el-button type="success" @click="btn">btn</el-button>
        <span>{
    
    { a }}</span> 
    </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
@Component({
    
})
export default class Home extends Vue {
    a = 1 

    btn() {
        alert('btn')
    }
}
</script>

3、生命周期

生命周期和方法在同一级，且不用逗号分割，注意：方法名不要和生命周期一样哦~

<template>
    <div>
        ts
        <el-button type="success" @click="btn">btn</el-button>
        <span>{
    
    { a }}</span> 
    </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
@Component({ 
})
export default class Home extends Vue {
    a = 1
    created() {
        console.log('created')
    } 
    btn() {
        alert('btn')
    }
}
</script>

4、引入组件

 懒加载式引入

<template>
    <div> 
        <comform></comform>
    </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
@Component({
    components: {
        comform: () => import('@/components/homecom/comform.vue'),
    },
})
export default class Home extends Vue {
 
}
</script>