TypeScript在Vue中的应用

使用Vue.js开发前端应用，学会使用Vue Router管理路由 #生活技巧# #数码产品使用技巧# #设计软件使用技巧#

安装：
npm i @vue/cli -g
vue create 目录 | .
// typescript
// use class-style component yes↓
npm run serve

配置：
tsconfig.json 配置ts编译环境
xx.d.ts 支持vue,jsx ts写法

定义组件: src/components
1.类式
2.扩展式
3.函数式**

类组件中

<template> <div> <h3>类组件</h3> <h4>data数据</h4> <div>{{msg1}}</div> <div>{{msg2}}</div> <!-- <div>{{msg3}}</div> --> <div>{{msg4}}</div> <div>{{msg5}}</div> <h4>计算属性</h4> <div>{{cptMsg1}}</div> <h4>事件</h4> <button @click="show(12,'bmw')">事件</button> <h4>props</h4> <div>{{this.p1}}</div> <h4>ref</h4> <div ref="box">box</div> <h4>指令</h4> <div v-direc1>direc1</div> <div v-direc1="'qq'">direc1</div> <h4>过滤器</h4> <div>{{ 'bmw3' | filt1}}</div> </div> </template> <script lang="ts"> import Vue from "vue"; import { Component, Prop, Watch, Ref } from "vue-property-decorator"; import { Person } from "../types"; @Component({ directives: {//局部指令 direc1: (el: HTMLElement, binding) => console.log("direct1", binding.value) }, filters: {//局部过滤器 filt1(data: string, arg: number = 2): string { return "自行车" + arg; } } }) export default class ClassComponent extends Vue { //props定义 需要依赖装饰器 @Prop() readonly p1!: string; // ! 操作符（Bang Operator）显式地告诉编译器它的值不为空 @Prop({ default: "pp2默认值" }) readonly pp2: string | undefined; //默认值 @Prop({ default: 110, type: Number }) readonly pp3: number | undefined; //类型约定 // @Prop() private readonly pp4:string="qq"//× //元数据 ~~ data -》 类内的实例属性 msg1: string = "武汉加油"; msg2: string = "武汉加油" + this.p1; // msg3:undefined = undefined; //undefined 非响应式 msg4: any = null; //页面不渲染，响应式 msg5: Person = { id: 1, name: "alex" }; //实例方法 ~~methods show(arg1: number, arg2: string): void { alert("类组件的实例方式" + arg1 + arg2); } //计算属性 get cptMsg1(): string { return "经过计算后的" + this.msg1; } //钩子函数 mounted(): void { console.log("class-component mounted", this.msg5.name); this.bbox.style.background = "red"; } //属性检测 @Watch("msg1") onMsg1Change(newValue: string, oldValue: string): void { console.log("msg1数据变化了", newValue, oldValue); } @Watch("msg5", { deep: true, immediate: true }) onMsg5Change(newValue: string, oldValue: string): void { console.log("msg1数据变化了", newValue, oldValue); } //ref 引用元素 @Ref("box") bbox!: HTMLDivElement; //指令、过滤器 //全局 ~~ vuejs } </script>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495'

扩展组件：

<template> <div> <h3>扩展组件</h3> <h4>data数据</h4> <div>{{msg}}</div> <button @click="show(12,'bmw')">事件</button> <h4>计算属性</h4> <div>{{cptMsg}}</div> <h4>ref</h4> <div ref="box">box</div> </div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ data(){ return { msg:'q7' } }, props:{ pp1:{ type:String, default:'默认值', required:false, // validator:(val:string)=>val.length>2 } }, computed:{ cptMsg():string{ return '计算后的'+this.msg; } }, methods:{ show(arg1:number,arg2:string):void{ alert('扩展式组件的实例方法'+arg1+arg2) } }, mounted():void{ console.log('extend component mounted') // this.box.style.background='red'; }, watch:{ msg(newValue: string, oldValue: string){ console.log('exnrtend component msg变化') } } }) </script>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051'

函数式组件

<template functional> <div> <h3>函数式组件</h3> <h4>props</h4> <div>{{props.bb1}}</div> <h4>事件</h4> <button @click="parent.show(121)">按钮</button> </div> </template> 12345678910'

App.vue:

<template> <div id="app"> <h3>vue + ts</h3> <ClassComponent p1="111" pp2="222"/> <ExtendComponent p1="111"/> <FunctionComponent bb1="333"/> </div> </template> <script lang="ts"> import Vue from 'vue'; import {Component} from 'vue-property-decorator'; import ClassComponent from './components/ClassComponent.vue' import ExtendComponent from './components/ExtendComponent.vue' import FunctionComponent from './components/FunctionComponent.vue' @Component({ components:{ ClassComponent,ExtendComponent,FunctionComponent } }) export default class App extends Vue{ show(arg:number):void{ alert('app show '+ arg) } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

1234567891011121314151617181920212223242526272829303132333435363738394041'

网址：TypeScript在Vue中的应用 https://www.yuejiaxmz.com/news/view/425076

相关内容

“import ... =“ 只能在typescript 文件中使用（解决方法）
vue
VUE去哪儿网教程中的keep
vue中 input type=date组件封装及调用
Vue驱动，购物新体验：揭秘如何打造高效便捷的在线购物网站
vue组件中是否可以访问实例data中数据？
vue 项目中 动态加载图片src的解决方法
vue如何制作照片墙
基于Springboot+Vue的二手交易平台
探索高效日程管理：Vue与FullCalendar的完美融合

随便看看