【框架】记录 Vue +Ts 开发

• vscode 装 vue 插件：vetur
• main.ts 是入口文件。
• 可参考这个官方的 github 仓库写：https://github.com/vuejs/vue-class-component
• 在声明每一个对象的时候，都要告诉ts，对象是什么类型。

 

 

技巧：

• 用alert来判断当前的文件有没有执行。
• 有些莫名其妙的错误提示，复制，删掉，粘贴，就不报错了。

 

 

跟 js 的不同点：

1. lang="ts"
2. 引入 vue 和 component 的方式变了（记下就行了，不用去管为什么）

   import { Component, Vue } from "vue-property-decorator";

    

3. 不用写 data 了

4. method 直接写就好了，不用写 methods 了

5. props

6. mixin 可以把一个对象混入到另外一个对象里面，在以前的vue里面是对象，在新的里面是一个类

 

一个简单的例子

html：

<div id="app">
    <!-- 1.渲染数据 -->
    {{msg}}
    <div>
    <!-- 2.添加事件监听 -->
    <button @click="fn">点我</button>
    </div>
</div>

 

ts：

@Component({
  // 3.props写这里
  // 这个组件接受一个props,叫做name
  props: {
    name: String
  }
  
})

export default class App extends Vue {
  //1.这里声明 data
  msg = 123;

  //2.这里声明method
  fn() {
    alert("fn");
  }
}

 

@Component的作用：

首先，Component 是一个函数。

作用：把 @Component 里对象的属性，添加到下面的类里面。其实对象里的属性，就是下面类的一些属性。

区别：export 里包裹的属性，是组件特有的属性。而 @Component 里的属性，key是固定的，只有那么几项。（简而言之，就是@Component 里的key，是所有组件共有的 key，下面的 key 是某些组件特有的 key）

总结：上面，共有，下面，特有。通过 @Component 就可以把它们分隔开来。
好处：共有属性不会写错