vue2 知识点

Posted 2021-02-19 aspdotnetmvc

1.组件-内容模块化-复用
2.指令-功能抽象化-面向切面
3.混入-继承 or 装饰
4.过滤器-文本格式化
5.插件-功能规模化，模块化
6.路由-页面规模化

7.父组件-子组件参数传递
指令:v-if,v-else,v-else-if,v-show,v-for,
v-on,v-bind,v-model,v-slot

动态:
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
v-slot:[dynamicSlotName]

缩写:
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

结构:
data:
computed：计算属性:响应式依赖进行缓存的，【属性调用】
method: 方法,每次都计算【方法调用】

Prop:
注意在 javascript 中对象和数组是通过引用传入的，
所以对于一个数组或对象类型的 prop 来说，
在子组件中改变这个对象或数组本身将会影响到父组件的状态。

注意那些 prop 会在一个组件实例创建之前进行验证，
所以实例的属性 (如 data、computed 等)
在 default 或 validator 函数中是不可用的。

插槽(占位符):
定义: <slot name="header">默认内容</slot>
使用:
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
缩写: v-slot:header =>#header
动态: v-slot:[dynamicSlotName]

插槽 prop: 使用组件的值(在使用的时候自由调用)
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>

<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>

解构(多个参数的时候):
<current-user v-slot="{ user }">
{{ user.firstName }}
</current-user>

注意:父级模板里的所有内容都是在父级作用域中编译的；
子模板里的所有内容都是在子作用域中编译的。