SampleをTypeScriptで実装

maechabin · maechabin · commit 162d25ab8175 · 2018-08-06T21:44:52.000+09:00
diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,20 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>vue-typescript-sample</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but vue-typescript-sample doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>vue-typescript-sample</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but vue-typescript-sample doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,20 +1,24 @@
 <template>
   <div id="app">
     <img src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    <HelloVue val="Vue" v-on:handle-click="handleClickButton($event)" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from './components/HelloWorld.vue';
+import HelloVue from './components/HelloVue.vue';
 
 @Component({
   components: {
-    HelloWorld,
+    HelloVue,
   },
 })
-export default class App extends Vue {}
+export default class App extends Vue {
+  handleClickButton($event: string) {
+    console.log($event);
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/src/components/HelloVue.vue b/src/components/HelloVue.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <h1>Hello {{ value }}</h1>
+    <input type="text" v-bind:value="inputValue" v-on:input="handleInput($event)" />
+    <button v-on:click="handleClick()" v-bind:disabled="isDisabled">button</button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
+
+@Component
+export default class HelloVue extends Vue {
+  /** props */
+  @Prop() private val!: string;
+
+  /** emit */
+  @Emit('handle-click')
+  clickButton(val: string) {}
+
+  /** data */
+  value: string = this.val;
+  inputValue: string = '';
+
+  /** lifecylce hook */
+  mounted() {
+    console.log('mounted');
+  }
+
+  /** computed */
+  get isDisabled(): boolean {
+    return this.inputValue === '';
+  }
+
+  /** method */
+  handleInput($event: any): void {
+    this.inputValue = $event.target.value;
+  }
+  handleClick(): void {
+    if (this.inputValue === '') {
+      return;
+    }
+    this.value = this.inputValue;
+    this.inputValue = '';
+    this.clickButton(this.value);
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
