Vue + typescript

항목 만들기

vue-clivue create MyProject

Vue + typescript

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

<script lang="ts">
//vue-propaty-decoratorをインポート
import { Vue, Component, Prop, Emit } from "vue-property-decorator";

//コンポーネント　基本的になくてもこれを書く。コンポーネントであることを示す。
@Component({
    components:{
    //コンポーネントを設定
    },
})

export default class *クラス名* extends Vue {
    //Propの設定
    @Prop({default: ""})
    user_name!: string;
}
</script>

<style lang="scss" scoped>

</style>

vue-property-decorator

TypeScript 고유의 클래스 구문을 사용하여 Vue를 작성하는 도구

text box

<input type="text" placeholder="入力してください v-model="保持しておく変数" />
//maxlength='' で文字数制限

이미지 업로드

기본적으로 API에서 보내기 위해 Base64에서 인코딩하여 json에 넣고 날아가거나 html의multipart/form-data를 사용하여 이미지 데이터를 백엔드로 날아간다.
다음은 FileReader()를 사용하여 이미지를 읽고 Encode에서 Base64까지의 이미지를 uploadImageUrl에 넣습니다.
sample.vue

<template>
<div class="input-image-size">
    <img v-if="uploadImageUrl" :src="uploadImageUrl" />
        <v-file-input
            v-model="input_image"
            accept="image/*"
            show-size
            label="upload image"
            prepend-icon="mdi-image"
            @change="onImagePicked"
         ></v-file-input>
</div>
</template>

<script>
export default {

  data: function() {
    return {
      input_image: null,
      uploadImageUrl: "",
    };
  },

  components: {},

  methods: {
    //image
    onImagePicked(file) {
      if (file !== undefined && file !== null) {
        if (file.name.lastIndexOf(".") <= 0) {
          return;
        }
        const fr = new FileReader();
        fr.readAsDataURL(file);
        fr.addEventListener("load", () => {
          this.uploadImageUrl = fr.result;
        });
      } else {
        this.uploadImageUrl = "";
      }
    },
}
</script>

anime.js

사용 방법

<template>
  <div class="test">
    sample
  </div>
</template>
import anime from "animejs";

mounted(){
  anime({
    targets: '.test',
    left: '240px',
    backgroundColor: '#FFF',
    borderRadius: ['0%', '50%'],
    easing: 'easeInOutQuad'
  });
}

targets에서 애니메이션을 지정하고 싶은 것에 class를 추가합니다.