ADD:$refs

Author: leeycode

src/components/HelloWorld.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
+    <input type="text" ref="inputRef" placeholder="ref focus">
   </div>
 </template>
 
@@ -9,8 +10,17 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 
 @Component
 export default class HelloWorld extends Vue {
+  $refs!: {
+    inputRef: HTMLInputElement;
+  };
+
   @Prop({ type: String }) msg!: string;
+
+  mounted() {
+    this.$refs.inputRef.focus();
+  }
 }
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/pages/Jsx.tsx

@@ -2,12 +2,12 @@ import { Vue, Component } from 'vue-property-decorator';
 import { CreateElement } from 'vue';
 @Component
 export default class JSX extends Vue {
-  count: number = 0;
-  showInfo() {
+  private count: number = 0;
+  private showInfo() {
     this.count++;
   }
 
-  render(h: CreateElement) {
+  protected render(h: CreateElement) {
     return <h2 onMouseenter={this.showInfo}>JSX Test{this.count}</h2>;
   }
 }