组件的插槽
和 HTML 元素一样,我们经常需要向一个组件传递内容
我们使用 <slot> 作为我们想要插入内容的占位符
<step>
你好,我是嵌套内容
</step>
template:`<div><h1>组件的标题</h1><slot></slot></div>`
作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的。
当一个组件被用来渲染一个项目数组时,这是一个常见的情况,我们希望能够自定义每个项目的渲染方式。
<step>
<template v-slot:default="scope">
<i class="fas fa-check">{{scope.index}}</i>
<span class="green">{{ scope.item }}</span>
</template>
</step>
const step = {
template: `<ul><li v-for="( item, index ) in list">
<slot :item="item" :index="index"></slot>
</li></ul>`,
data() { return {list: ["vue", 'react', 'angular']}}}
弹窗组件
<modal v-model:visible="isShowModal">
<p>我是小可爱</p>
<h3>我希望被表扬</h3>
<template v-slot:title>我才是标题</template>
</modal>
动画
Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。
组件进入和离开 DOM 的钩子 使用内置的 <transition> 组件
<button @click="flag=!flag">切换</button> <br>
<transition name="fade">
<img src="./images/sun.jpeg" alt="" width="120" v-if="flag">
</transition>
v-enter-from 进入开始 v-enter-to 进入结束 v-enter-active进入整个状态
v-leave-from 离开开始 v-leave-to 离开结束 v-leave-active离开整个状态
动画,使用关键帧动画
@keyframes fadeIn{
from{opacity: 0;}
to{ opacity: 1;}
}
@keyframes fadeOut {
0%{ opacity: 1;}
100%{ opacity: 0;}
}
.fade-enter-active{ animation: fadeIn ease 1s;}
.fade-leave-active{ animation: fadeOut ease 1s;}
使用第三方实现动画
animate动画库:https://www.jq22.com/yanshi819
<link rel="stylesheet" href="./css/animate.css">
<transition name="fade" enter-active-class="animated slideInDown" leave-active-class="slideOutDown animated">
<img src="./images/sun.jpeg" alt="" width="120" v-if="flag">
</transition>
模板引用
脚手架
cmd命令运行
1. win键+R键 打开运行窗口
2. 输入cmd回车
3.D:
4.切换目录
cd 目录名称
5.查目录文件
dir
6.//创建目录
md 目录名(文件夹)
7.//删除目录
rd 目录名(文件夹)
rd /s /q 安静模式删除目录和内容
8./ 当前目录
../ 上一层目录
/ 根目录
其他命令
查看本机ip
ipconfig
清除屏幕
cls
用来测试网络是否畅通
ping ip(主机名)
打开计算器
calc
npm命令
NPM是随同NodeJS一起安装的包管理工具
查看版本
npm -v
//全局安装
npm install 模块名 -g
//本地安装
npm install 模块名
//一次性安装多个
npm install 模块1 模块2 模块3
//安装开发时依赖包
npm install 模块名 --save-dev
//安装运行时依赖包
npm install 模块名 --save
//开发依赖简写
npm i 模块名 -D
//运行依赖简写
npm i 模块名 -S
//查看项目中模块所在的目录
npm root
//查看全局安装的模块所在目录
npm root -g
//查看安装列表
npm list
npm list --depth=0
// 帮助
npm help
npm install -h
//卸载模块
npm uninstall 模块名
//更新模块
npm update 模块名 @版本号
node_modules 删除后可以通过 npm install 全部重新安装
保留package.json
全局安装 -g 卸载时候也要带 -g
快速、可靠、安全的依赖管理工具。
yarn的安装
Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm 面临的少数问题
安装yarn
npm install -g yarn
查看版本
yarn –version
初始化
yarn init
安装
yarn add [pkg-name]
更新
yarn upgrade [pkg-name]@ver
删除
yarn remove [pkg-name]