TS入门010ts和vue应用

vue ts组件写法参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

直接 google typescript vue

  • 先把官网读完，否则就别继续

创建工程

如果你的是mac 安装的不是 我这版本的 vue 推荐卸载掉vue

1
2
3
4
5
6
7
8
9
1.看vue版本 vue --version
如果不是你想要的版本（3.0以下）执行
要先开放用户权限
sudo chmod -R 777 /usr/local/lib/node_modules/
然后卸载2.0
npm uninstall vue-cli -g
然后 vue --version 确认卸载了

然后装3.0 npm install -g @vue/cli

安装vue-cli3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 1. 如果没有安装 Vue CLI 就先安装 ，我的是3.1.3 版本
npm install --global @vue/cli@3.1.3 

# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name

# 3. 切换目录
cd my-project-name

# 4. 选择我们的配置
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedica
ted config files
? Save this as a preset for future projects? (y/N) n

# 5. 安装成功后,启动这个项目
yarn serve
# 6. 在浏览器打开 http://localhost:8080/

CRM学习

src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<template>
  <div id="app">
    props 值为name:{{name}}
    Hi TS vue <br>
    mixins 值为 ： {{mixinValue}} <br>
    data里的msg: {{msg}}  <br>
    <button @click="fn">点我</button> <br>
    为 HelloWorld 组件传递值 hjx <br>
    <hello-world name="hjx"></hello-world>
  </div>
</template>

<script lang="ts">
/*
// 原来的写法
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
@Component({
  components:{
    HelloWorld
  }
})
export default class App extends Vue {
  // 原来的 data里的数据
  msg = 123

  //原来  method 里的函数
  fn () {
    alert('hello: ' + this.msg)
  }
}
*/

// 使用 mixins
import { Component, Vue , Mixins } from 'vue-property-decorator';
import { MyMixin } from './mixins/mixin-one';
import HelloWorld from './components/HelloWorld.vue';
@Component({
  components:{
    HelloWorld
  }
})
export default class App extends Mixins(MyMixin) {
  // 原来的 data里的数据
  msg = 123

  //原来  method 里的函数
  fn () {
    alert('hello: ' + this.msg)
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: red;
}
</style>

components/HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="hello">
    我接受到的 props name 为 ：{{name}}
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  props:{
    name:String
  }
})
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

<style scoped lang="scss">
</style>

使用 mixins

src/mixins/mixin-one.ts

1
2
3
4
5
6
7
8
9
// mixin.js
import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare a mixin as the same style as components.
@Component
export class MyMixin extends Vue {
  mixinValue = '111111111111'
}

TodoList 组件

参考代码 ts010