Vue2+Element Ui+Ts

vue2 project introduces ts practical operation record (1)_vue2 introduces ts_MandiGao's blog-CSDN blog

vue-property-decorator usage guide-Nuggets

Download the plugin npm i -D vue-class-component vue-property-decorator

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

 vue page template

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

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

1. Data statement

In js, data is defined in data, and in ts, it can be used in 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. Method

 Here is an example using el-button click event

<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. Life cycle

The life cycle and the method are at the same level and do not need to be separated by commas. Note: the method name should not be the same as the life cycle~

<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. Introduce components

 Lazy loading introduction

 

<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>