[TIL]Vue+TypeScirt+Vuex-2を使用

achievemen

vueは、typescriptのみを使用してTodoListを作成します.

破壊vue波

まずプロジェクトを見ればApp.vueにはtemplate、style、scriptのラベルがあります.一つ一つ紹介します.
templateは、HTML、cssなどの寸法属性をビューインスタンスで定義されたデータおよび論理に関連付け、ブラウザでユーザーが見ることができる形式のhtmlに変換する属性です.
styleは、cssなどの寸法属性を設定できる場所です.
scriptはHTMLのようにjsコードを記述できる空間です.
今から始めよう

// Home.vue
<template>
  <div class="home">
    <HelloWorld />
  </div>
</template>

次のように、未使用のコードを消去します.
element-uiを使用して設計します.

npm i element-ui -S

//main.ts
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(Element);
//element-ui사용

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Element-uiのインストールが完了したらmain.tsからVueへ.これで、きれいなデザインのボタンやフォームなどを使用できます.
詳細については、次のサイトにアクセスしてください.自分の好きなものを利用すればいいです.
https://element.eleme.io/#/en-US/component/layout

//HelloWorld.vue
<template>
  <el-card class="todo-container">
    <h2>Todo List</h2>
    <form>
      <el-input placeholder="Please input" v-model="input"></el-input>
      <el-button type="primary" @click="addTodo(input)">Add Todo</el-button>
    </form>
    <ul>
      <li class="todo-item" v-bind:key="index" v-for="(todo, index) in todos">
        <p class="text">{{ todo.text }}</p>
        <el-button
          v-if="todo.completed"
          @click="compelete(index)"
          class="complete completed"
        >Complete</el-button>
        <el-button v-else @click="compelete(index)" class="complete">Complete</el-button>
        <el-button @click="deleteTodo(index)" class="delete">Delete</el-button>
      </li>
    </ul>
  </el-card>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

interface TodosType {
  text?: string;
  completed?: boolean;
}

@Component
export default class HelloWorld extends Vue {
  input?: string = "";

//method
  addTodo(text: string) {
    const todo = {
      text,
      component: false
    };
    this.todos.push(todo);
  }

  compelete(index: number) {
    this.todos[index].completed = !this.todos[index].completed;
  }

  deleteTodo(index: number) {
    this.todos.splice(index, 1);
  }

//data
  private todos: TodosType[] = [
    {
      text: "test-todo1",
      completed: false
    },
    {
      text: "test-todo2",
      completed: true
    },
    {
      text: "test-todo3",
      completed: false
    }
  ];
}
</script>

<style scoped lang="scss">
.todo-container {
  .el-input {
    width: 300px;
  }
  .complete.completed {
    background-color: #409eff;
  }
}
</style>

これでタイプを打つとtodoListが完成しますここで重要な部分は.

 <el-button
          v-if="todo.completed"
          @click="compelete(index)"
          class="complete completed"
        >Complete</el-button>
        <el-button v-else @click="compelete(index)" class="complete">Complete</el-button>

v-if todoを通ります.完了値がtrueとfalseの場合、表示されるボタンは異なります.論理を追加しなくてもif文が使いやすいという利点があります.
@clickでcompleteメソッドを実行して値を変更できます.
ここまで,Vueを用いてTooListを作成した.次の投稿はvuexを使用してTodoListを完了します.