Vue2+Elemet Ui+Ts

最新推荐文章于 2024-03-11 08:38:38 发布

鱼空

最新推荐文章于 2024-03-11 08:38:38 发布

阅读量206

点赞数

文章标签：前端 vue.js elementui typescript

本文链接：https://blog.csdn.net/m0_69502730/article/details/130318449

版权

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>