- ### vue-cli 创建项目
- Babel
- TypeScript
- Use class-style component syntax? Yes
- Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
- ### 配置
tsconfig.JS 配置 ts 编译环境
xx.d.ts 支持 vue.jsx==》ts 写法
- ### 定义组件的三种方式
- src/components
1, 类式
1components 下新建 ClassComponent.vue:(注意要引入 vue 的装饰器: vue-property-decorator)
- <template>
- <div>
- <h3 > 类组件 </h3>
- </div>
- </template>
- <script lang="ts">
- import Vue from 'vue';
- // 引入 vue 装饰器
- import {Component} from "vue-property-decorator";
- // 用装饰器装饰类
- @Component({})
- export default class ClassComponent extends Vue{
- mounted():void {
- console.log("class-component 挂载完毕")
- }
- }
- </script>
2App.vue 中:(在装饰器中注册组件)
- <template>
- <div id="app">
- <h3>vue+ts</h3>
- <ClassComponent></ClassComponent>
- </div>
- </template>
- <script lang="ts">
- import Vue from 'vue';
- // 引入 vue 装饰器
- import {Component} from 'vue-property-decorator';
- import ClassComponent from './components/ClassComponent.vue'
- // 用装饰器装饰类
- @Component({
- components:{ClassComponent}
- })
- export default class App extends Vue{
- }
- </script>
2, 扩展式
1components 下新建 ExtendComponent.vue 组件:(核心是 Vue.extend())
- import Vue from 'vue';
- export default Vue.extend({
- mounted() {
- console.log("extend-component 挂载完毕")
- },
- })
2App.vue 中引入并注册:
- import ExtendComponent from "./components/ExtendComponent.vue";
- @Component({
- components:{ExtendComponent}
- })
3, 函数式
1component 下新建 FunctionComponent.vue:(不同之处是 template 标签中添加 functional 属性)
- <template functional>
- <div>
- <h3 > 函数式组件 </h3>
- </div>
- </template>
2App.vue 中引入并注册:
- import FunctionComponent from "./components/FunctionComponent.vue";
- @Component({
- components:{FunctionComponent}
- })
注意: 函数式组件只有 template 标签, 渲染速度最快, 它可以接收上游传递下来的 props, 它没有 this. 继承式组件和原来的 vue+JS 写法非常像, 唯一不同的是
- <script>
- export default {}
- </script>
变为
<script lang="ts"> import Vue from 'vue'; export default Vue.extend({}) </script>
类组件中有装饰器的概念, 定义 props, 元数据, 实例方法, 计算属性, watch,ref, 指令, 过滤器时, 有 ts 自己的写法.
### 函数式组件没有 this, 它通过 props 接收父组件传来的值
1父组件 App.vue 中定义自定义属性 p1 传值:
<FunctionComponent p1="ppppppp"></FunctionComponent>
2函数式组件 FunctionComponent.vue 中直接通过 props.p1 接收值:
<div> {{props.p1}} </div> ### 函数式组件触发事件的方法:
1父组件 App.vue 中定义 show() 方法:
export default class App extends Vue{ show(arg:number):void{ alert("函数式组件中的事件触发:"+arg) } }
2函数式组件 FunctionComponent.vue 中通过 parent.show() 触发 click 事件:
<button @click="parent.show(10)"> 按钮 </button> ### 类组件中定义 props
1父组件 App.vue 中定义自定义属性 p1 和 p2 传值:
<ClassComponent p1="阿尼哈塞呦!!!!!" p2="接收到 p2 传过来的值" :p3="123"></ClassComponent>
2props 的定义需要依赖于装饰器, 先在装饰器插件中解构出 Prop 装饰器:
import {Component,Prop} from "vue-property-decorator";
3! 操作符表示该值不为空:
@Prop() readonly p1!:string;
4default 表示默认值, readonly 表示只读属性一旦修改会报错:
@Prop({default:"p2 默认的值在装饰器的对象中设置 default"}) readonly p2!:string|undefined;
5Prop 装饰器中还可以约定传过来的值的 type 类型:
@Prop({default:12345,type:Number}) readonly p3!:number|undefined;
注意: 接收 props 时的默认值不可以这样设置:@Prop() p4:string="aaa"; 默认值可以在装饰器中用 default 设置或者用 ! 操作符设置不为空.
### 类组件中定义元数据 - data
1src 下新建 types/index.ts(自定义类型 Person):
interface Person{ readonly id:number, name:string, age?:number } export {Person}
2ClassComponent.vue 中引入自定义类型 Person:
import {Person} from "../types";
3注意自定义类型的使用要先引入:
msg1:string="你今天吃了吗"; msg2:string="你今天吃了吗"+this.p1; msg3:undefined=undefined;// undefined 非响应式 msg4:any=null; msg5:Person={id:1,name:"wxm",age:24} ### 类组件中实例方法的定义 show(arg1:number,arg2:string):void{ alert("类组件的实例方法"+arg1+arg2) } ### 类组件中计算属性的定义 get cptMsg1():string{ return "经过计算后的 msg1:"+this.msg1 } ### 类组件中属性检测的定义
1先引入装饰器:
import {Component,Prop,Watch} from "vue-property-decorator";
2利用 Watch 装饰器定义 msg1 的监听函数 onMsg1Change():
@Watch("msg1") onMsg1Change(newValue:string,oldValue:string):void{ console.log("msg1 发生变化了","新值:"+newValue,"旧值:"+oldValue) }
3深度监听:(deep:true---- 深度监听 immediate:true---- 第一次加载就执行)
@Watch("msg5",{deep:true,immediate:true}) onMsg5Change(newValue:string,oldValue:string):void{ console.log("msg5 发生变化了","新值:"+newValue,"旧值:"+oldValue) } ### 类组件中用 ref 引入元素
1先引入装饰器:
import {Component,Prop,Watch,Ref} from "vue-property-decorator";
2设置 ref 属性:
<p ref="box">box</p>
3利用 Ref 装饰器将 box 标签代理到 bbox 中去:
@Ref("box") bbox!:htmlPreElement;
4在挂载后钩子函数中可以对 bbox 进行操作:
mounted():void { this.bbox.style.backgroundColor="deeppink"; } ### 类组件中的自定义指令和过滤器的使用
1Component 装饰器中定义局部自定义指令和局部过滤器:
@Component({ directives:{// 局部指令 direc1:(el:HTMLElement,binding)=>console.log("direc1",binding.value) }, filters:{// 局部过滤器 filt1(data:string,arg:number=2):string{ return "宝马"+arg } } })
2使用自定义指令和过滤器:
<div v-direc1>direc1</div> <div v-direc1="'qqqqq'">direc1</div> <div>{{"bwm"|filt1}}</div> <div>{{"bwm"|filt1(33333)}}</div>
来源: http://www.bubuko.com/infodetail-3462039.html