vue进阶讲解 组件，动画，模板引用以及脚手架

 

 

 

组件的插槽

和 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 面临的少数问题

Ø

Ø 1.安装的时候无法保证速度/一致性

Ø 2.安全问题，因为 npm 安装时允许运行代码

安装yarn

npm install -g yarn

查看版本

yarn –version

初始化

yarn init

安装

yarn add [pkg-name]

更新

yarn upgrade [pkg-name]@ver

删除

yarn remove [pkg-name]