directives指令
自定义指令，访问到dom节点
案例：
<script>
Vue.createApp({
data() {
return { flag: true }
},
// 自定义指令：操作dom
directives: {
// 指令的名称是focus
"focus": {
// mounted;定dom节点挂载后执行
// beforeUpdate,更新前;
beforeUpdate(el, binding) {
// el 指令所在的dom节点
// binding.value 指令的值
console.log(el, binding);
// 如果指令的值为真，则获取焦点，否则失去焦点
if (binding.value) {
el.focus()
}
}
}
}
}).mount("#app")
</script>
钩子函数
created：创建
beforeMount：父组件挂载前
mounted：挂载后
beforeUpdate：更新前
组件 （components）
组件:一个小的功能分区
意义：复杂项目拆分简单的组件；组件是可以重复使用的模块； 让团队开发更高效
理解：组件其实就是个小的Vue，具有data，methods，watch，computed
组件的定义：
const steper = {template:`<span>...</span>`}
组件注册：
components:{steper}
组件的使用：
<steper></steper>
组件的参数传递
父传子（props）
<steper :value="5">
steper内部
props:{value:{type:Number,default:1}}
steper内部使用(只读，不能修改)
this.value
子传父（emit事件）
在steper内部
this.$emit("numchange",this.num)
numchange事件名称，this.num 事件值
父组件
<steper @numchange="w1=$event">
$event 就是子组件通过numchange传递过来的值 this.num
案例：
<script>
// 定义组件组件
// 组件父传子 props (props值是只读的)
// 组件子传父 事件emit
// steper 数据变化了，通知父组件修改w1，w2
const steper = {
template: `<span>
<button @click="num--">-</button>
<input v-model.number="num"/>
<button @click="num++">+</button>
</span>`,
data() {
return { num: this.value }
},
props: {
value: {
type: Number, //value类型是数字
default: 1 //默认值1
}
},
watch: {
"num": {
handler: function (nval, oval) {
// 把num值同感emit发送出去
this.$emit("numchange", this.num)
},
deep: true,
}
}
}
Vue.createApp({
// 注册组件
components: { steper },
data() {
return {
w1: 30,
w2: 20
}
}
}).mount("#app")
</script>
插槽
<step>嵌套内容</step> 可以通过<slot></slot>获取组件的嵌套内容
命名插槽
<step>
<template v-slot:pre>
pre插槽内容
</template>
</step>
<slot name="pre">
插槽的作用域
子： <slot item="item">
父：
<step>
<template v-slot:default="scope">
{{scope.item}}
</template>
</step>
动画（transtion）
自动对显示与隐藏的元素添加类名
.v-enter-active
进入整个过程
.v-enter-from
进入开始状态
.v-enter-to
进入结束状态
.v-leave-active
离开的过程
.v-leave-from
离开开始状态
.v-leave-to
离开结束状态
<transition>
mode模式 in-out out-in
name 名称
自定义进入class名称 enter-active-class
自定义离开class名称 leave-active-class
案例：
<style>
.fade-enter-active,
.fade-leave-active {
/* 整个进入的过程 */
/* 整个离开的过程都拥有这两个类 */
transition: all ease 1s;
}
/* 进入状态的class */
.fade-enter-from {
opacity: 0;
}
/* 进入到的class */
.fade-enter-to {
opacity: 1;
}
/* 离开开始状态 */
.fade-leave-from {
opacity: 1;
}
/* 离开结束状态 */
.fade-leave-to {
opacity: 0;
}
</style>
<div id="app">
<button @click="flag=!flag">切换</button> <br>
<transition name="fade">
<img src="./images/sun.jpeg" alt="" v-if="flag">
</transition>
</div>
<script>
// 01 Vue动画是通过组件 transition实现的
// 02 在显示离开产生动画 v-if v-show v-else v-else-if
Vue.createApp({
data() {
return {
flag: true
}
}
}).mount("#app")
</script>
关键帧动画案例：
<style>
@keyframes fadeIn {
from {
opacity: 0;
transform: rotate(-180deg);
}
to {
opacity: 1;
transform: rotate(0);
}
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: rotate(0);
}
100% {
opacity: 0;
transform: rotate(180deg)
}
}
.fade-enter-active {
animation: fadeIn ease 1s;
}
.fade-leave-active {
animation: fadeOut ease 1s;
}
</style>
<div id="app">
<button @click="flag=!flag">切换</button> <br>
<transition name="fade">
<img src="./images/sun.jpeg" alt="" v-if="flag">
</transition>
</div>
<script>
// 01 Vue动画是通过组件 transition实现的
// 02 在显示离开产生动画 v-if v-show v-else v-else-if
Vue.createApp({
data() {
return {
flag: true
}
}
}).mount("#app")
</script>
节点引用（ref）
<input ref="inp">
this.$refs.inp
<btn ref="btn">
this.$refs.btn.add() //访问组件的方法
this.$refs.btn.num //访问组件的属性
cmd命令入门
1. win+R打开运行
2.输入cmd打开命令窗口
切换盘符：
c：
d：
f：
切换目录：
cd 目录地址
创建目录：
md 目录地址
删除目录：
rd 目录地址
rd /s /q 静默删除目录与目录内容
/ 根目录
./当前目录
../上一层目录
help 查看命令
help 命令 查看命令用法
首字母 + tab 提示当前目录的文件夹
↑上一个命令
↓下一个命令
其他：
ipconfig 查看ip
ping 主机/ip 查看与别的主机与ip的联通状态
cls 清屏
calc 打开计算器
ctrl+c 结束当前运行命令
