zoukankan      html  css  js  c++  java
  • 基于typescript编写vue的ts文件语法模板

     1 <template>
     2   <div>
     3     <input v-model="msg">
     4     <p>prop: {{ propMessage }}</p>
     5     <p>msg: {{ msg }}</p>
     6     <p>helloMsg: {{ helloMsg }}</p>
     7     <p>computed msg: {{ computedMsg }}</p>
     8     <Hello ref="helloComponent" />
     9     <World />
    10     <button @click="greet">Greet</button>
    11   </div>
    12 </template>
    13 
    14 <script lang="ts">
    15 import Vue from 'vue'
    16 import Component from '../lib/index'
    17 import Hello from './Hello.vue'
    18 import World from './World'
    19 // We declare the props separately
    20 // to make props types inferable.
    21 const AppProps = Vue.extend({
    22   props: {
    23     propMessage: String
    24   }
    25 })
    26 @Component({
    27   components: {
    28     Hello,
    29     World
    30   }
    31 })//这里就算没有component也要保留"@Component",否则报错
    32 export default class App extends AppProps {
    33   // data数据改为属性的形式
    34   msg: number = 123
    35   // use prop values for initial data
    36   helloMsg: string = 'Hello, ' + this.propMessage
    37   // lifecycle hook
    38   mounted () {
    39     this.greet()
    40   }
    41   // computed:计算属性改为前面加get关键字
    42   get computedMsg () {
    43     return 'computed ' + this.msg
    44   }
    45   // method:方法就不用再写在methods里了,直接以类方法形式书写
    46   greet () {
    47     alert('greeting: ' + this.msg)
    48     this.$refs.helloComponent.sayHello()
    49   }
    50   // dynamic component
    51   $refs!: {
    52     helloComponent: Hello
    53   }
    54 }
    55 </script>

    更多相关代码示例看这里:https://github.com/vuejs/vue-class-component/tree/master/example

  • 相关阅读:
    const修饰指针
    C++调用C中编译过的函数要加extern "C"
    linux常用指令(1)
    链式队列实现
    存储类别和类型限定词
    数组,指针和引用
    字符函数和字符串函数
    C/C++编译的程序占用的内存
    结构体1(嵌套使用)
    输入输出函数小结
  • 原文地址:https://www.cnblogs.com/pjl43/p/9488721.html
Copyright © 2011-2022 走看看