Vue学习

[zhangzheng-zz]

项目中采用了 Vue + Ts，同时使用Vue官方提供的Api来编写类组件以实现对typescript更好的支持。

组件的定义

• 类式组件

  使用vue-property-decorator提供的vue类装饰器来编写

  // App.vue
  <template>
  <div>
     <h3>类组件</h3>
  </div>
  </template>
  <script lang="ts" src="app.ts">

  
  // app.ts

// 引入vue装饰器 import {Component} from "vue-property-decorator";

// 用装饰器装饰类 @Component({})

// 导出类组件 export default class App extends Vue { mounted():void { console.log("class-component挂载完毕") } }

- #### 扩展式组件
利用`Vue.extend()`扩展组件
```js
// ExtendComponent.vue

 import Vue from 'vue';
     export default Vue.extend({
        mounted() {
            console.log("extend-component挂载完毕")   
       }
 })

在App中注册

import ExtendComponent from "./components/ExtendComponent.vue";
@Component({
      components:{ExtendComponent}
})

• 函数式组件

  template标签中添加functional属性

  <template functional>
   <div>
           <h3>函数式组件</h3>
   </div>
  </template>

  函数式组件只有template标签，渲染速度最快，它可以接收上游传递下来的props，它没有this。

  组件数据与通信

• 函数式组件 函数式组件接收prop

  <div>{{ prop.data }}</div>

  函数式触发事件, this.$parent

  <button @click="parent.show(10)">按钮</button>

• 类组件 类组件中定义prop

  <Com p="传递值"></Com>

  组件中：

  import { Prop } from 'vue-property-decorator'
  @Prop({ default:'默认值'，type: string }) readonly p!: string;

  计算属性

  get msg (): string {
  return this.$store.state.msg
  }

  属性监测

  @Watch("msg",{ deep:true ,immediate:true })
      onMsgChange (newValue:string,oldValue:string) :void {
          console.log("msg发生变化了","新值："+newValue,"旧值："+oldValue)
      }

  局部指令和局部过滤器

  @Component({
          directives:{// 局部指令
              direc1:(el:HTMLElement,binding)=>console.log("direc1",binding.value)
          },
          filters:{// 局部过滤器
              filt1(data:string,arg:number=2):string{
                  return "宝马"+arg
              }
          }
      })

  <div>{{"bwm"|filt1}}</div>
  <div v-direc1="'qqqqq'">direc1</div>

  参考：https://www.cnblogs.com/wuqilang/p/12495477.html