Vue基础（slot插槽、transition过渡、vue历史、vue-cli脚手架、Vue.config.js配置、vue脚手架中的ToDoList案例）
■ 目录
slot插槽&语法
过渡动画如何使用&项目使用的目的
vue-cli2.x&3.x脚手架创建项目
vue-cli3.x完整最终案例
一、slot 插槽 !!
明确需求
-
思考：如果你封装一个提示组件，如何实现每次调用可以传递不同的参数？
-
回答：通过slot插槽技术
简介
顾名思义：1-定义组件时 留一个口子/槽，2-调用组件时 插入数据到口子/槽
语法
后备（默认）内容
步骤1：定义组件 通过具名插槽：顾名思义占位的口子/槽有名字，调用的时候根据名字插入
步骤1：定义组件 通过作用域插槽：调用组件，有时候需要使用组件模型中的数据
步骤1：定义组件 代码分析
定义tips组件（样式：红色边框，红色文字）内容通过插槽占位
vue
用户名密码不能为空
请登录后再操作
代码分析（具名插槽）
定义app组件（根标签 > h1 + 头部插槽 + 主体插槽 + 底部插槽）
vue
this is head
this is main
this is footer
其他情况
代码分析（作用域插槽）
在练习“代码分析（具有名插槽）” 基础上模型定义uname&age数据，并传递给调用
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<app>
<!-- 留心：冒号后面切记切记切记没让你加引号 -->
<template v-slot:head="item">
this is head {{item}} {{item.a}}
</template>
<template v-slot:main="item">
this is main {{item}}
</template>
<template v-slot:footer>
this is footer
</template>
<template>
<hr />
其他情况
</template>
</app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('app', {
// 声明组件模型数据
data() {
return {
uname: "一只小鸟",
age: 18
}
},
// 声明组件内容
template: `
头
主题
底部
小总结
slot插槽：调用组件传递数据
后备（默认）内容
步骤1：定义组件 具名插槽：调用组件时，可以传递多个数据 根据插槽名字传递
步骤1：定义组件 作用域插槽：调用时候会需要使用组件中的模型数据
步骤1：定义组件 二、过渡（transition）了解一下
明确需求
-
发现：鼠标放到右侧导航条上，提示框有个过渡效果（不加也行，提高逼格）
-
思考：你如何实现
-
回答：自己（C3 过渡&动画等） 或 使用Vue过渡知识点
讲一下C3 过渡&动画
transform元素2D&3D转换效果
2D之移动（translate）
2D之旋转（rotate）
2D之缩放（scale）
2D之缩放（scale）
2D之倾斜转换（skew）
3D之旋转（rotateX）
预览地址：http://www.w3school.com.cn/cssref/pr_transform.asp
transition 元素过渡效果
transition: 过渡的属性 过渡的时间 过渡曲线 效果延迟时间
举个栗子：https://www.runoob.com/cssref/css3-pr-transition.html
动画（animation）/动画规则（@keyframes）
animation:
动画规则
动画时间
动画曲线
动画延迟播放时间
动画播放次数
@keyframes 动画名称
{
from {属性n..}
to {属性n..}
}
举个栗子：http://www.w3school.com.cn/cssref/pr_animation.asp
语法
单元素/组件的过渡
步骤1：写HTML（待加效果的代码）
步骤2：控制元素隐藏显示（因为进入/离开产生过渡效果）
步骤3：根据手册规则写指定CSS（进入效果，离开效果） 【复制】
步骤4：使用transition标签将代码包裹起来（加name属性 属性值就是改成改的名字）
CSS3动画库效果预览：http://www.dowebok.com/demo/2014/98/
CSS3动画库文件：https://cdn.jsdelivr.net/npm/[email protected] （直接引入即可）
初始渲染的过渡：页面打开的时候产生效果（加appear属性即可）
多个元素过渡：根据判断显示对应数据，过渡切换
步骤1：在transition中增加判断（注必须v-if
步骤2：给过渡元素设置唯一key
多个组件过渡：前面动态组件，使用过渡切换（仅为提高体验度）
列表过渡
步骤1：通过transition-group替换待加动画的父级标签
步骤2：在transition-group增加tag声明代替的哪个标签
步骤3：给待加动画的标签设置唯一的标识 key=唯一标识
代码分析（单元素/组件的过渡）
CSS3动画库效果预览：http://www.dowebok.com/demo/2014/98/
CSS3动画库文件：https://cdn.jsdelivr.net/npm/[email protected] （直接引入即可）
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
<style>
/* first */
.fist-enter-active {
transition: all .3s ease;
}
.first-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.first-enter, .first-leave-to
/* .first-leave-active for below version 2.1.8 */ {
transform: translateX(200px);
opacity: 0;
}
/* two */
.two-enter-active {
transition: all .3s ease;
}
.two-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.two-enter, .two-leave-to
/* .two-leave-active for below version 2.1.8 */ {
transform: translateY(200px);
opacity: 0;
}
/* CSS语法 */
.three-enter-active {
animation: threeAnimation 2s;
}
.three-leave-active {
/* animation: bounce-in 2s reverse; reverse代表翻转 */
animation: threeAnimation 2s;
}
@keyframes threeAnimation {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(300px);
}
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]">
</head>
<body>
<div id="app">
<!-- <button @click="isShow = true">点击</button>
<button @click="isShow = false">点击</button> -->
<button @click="isShow = !isShow">点击</button>
<transition name="first">
<div v-show="isShow">【CSS过渡】1111</div>
</transition>
<transition name="three">
<div v-show="isShow">【CSS动画】2222</div>
</transition>
<transition
enter-active-class="animated bounceOutLeft"
leave-active-class="animated bounceOutRight"
>
<div v-show="isShow">【CSS动画库】3333</div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
// is代表是否
// isShow是否显示
isShow: true
}
})
</script>
</body>
</html>
代码分析（初始渲染的过渡）
概念：就是打开页面就实现动画效果
实现：给transition标签增加appear
<!DOCTYPE html>
<html lang="en">
<head>
<title>神龙教主</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]">
</head>
<body>
<div id="app">
<button @click="isShow = !isShow">切换</button>
<transition
appear
enter-active-class="animated swing"
leave-active-class="animated tada"
>
<div v-show="isShow">
快乐海盗
</div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 页面默认打开就有特效
const vm = new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
</body>
</html>
##代码分析（多个元素过渡）
留心：注意看下述代码注释中的mode模式
vue
小明
小红
代码分析（多个组件过渡）
步骤1：通过ul>li*3 在通过固定定位显示底部菜单（首页、购物车、我的）
步骤2：定义（首页、购物车、我的）三者组件，通过（动态组件）显示
步骤3：点击导航，显示不同组件内容
步骤4：增加过渡效果（前三步是动态组件知识点，当前才是过渡 还得走4步）
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
<style>
* {padding:0px;margin:0px}
html,body {overflow: hidden;}
ul {width:100%;list-style: none;position: fixed; bottom: 0px;}
ul > li {float: left; width: 33.33%; line-height: 50px;color:#fff; text-align: center;background: #ccc;}
ul > li:hover {color: red;}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]">
</head>
<body>
<div id="app">
<!--
leave-active-class="" 进入加效果，离开不加
leave-active-class="animated bounceInRight"
mode="out-in"
-->
<transition
appear
enter-active-class="animated bounceInRight"
>
<component v-bind:is="nowComponent"></component>
</transition>
<ul>
<li @click="nowComponent = 'index'">首页</li>
<li @click="nowComponent = 'cart'">购物车</li>
<li @click="nowComponent = 'my'">我的</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('index', {
template: `这是【首页】内容
`
})
Vue.component('cart', {
template: `这是【购物车】内容
`
})
Vue.component('my', {
template: `这是【我的】内容
`
})
const vm = new Vue({
el: '#app',
data: {
nowComponent: 'index'
}
})
</script>
</body>
</html>
代码分析（列表过渡）
有点搞，其实想这种案例一般都不用
但是vue官方开发出来，面对的是各种情况的项目 万一需要呢
vue
{{item.name}}
代码分析（可复用的过渡）
需求1：通过html在页面显示上述表单
需求2：定义tips组件效果如上
需求3：点击登录控制tips组件隐藏和显示（留心：页面刷新事件修饰符prevent
需求4：在tips组件中写过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]">
</head>
<body>
<div id="app">
<tips v-show="isShowTips">用户名或密码错误</tips>
<form action="">
<p>
用户名
<input type="text" name="a" id="">
</p>
<p>
密码
<input type="text" name="b" id="">
</p>
<p>
<button @click.prevent="isShowTips = !isShowTips">登录</button>
</p>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('tips', {
template: `
`
})
const vm = new Vue({
el: '#app',
data: {
isShowTips: false
}
})
</script>
</body>
</html>
小总结
为什么要学过渡：就是给网站加特效
vue中的过渡怎么用
1. 写HTML
2. 通过vue语法控制隐藏需要加特效的内容
3. 引入css动画库 （别人的
4. 几乎都是通过transition标签包起来
enter-active-class
leave-active-class
三、Vue历史(了解一下)
为啥vue会火
随着这几年前端的快速发展，页面中需要实现的功能越来越复杂，DOM操作频繁，使用传统的jQuery库去频繁操作DOM时不仅消耗性能，而且各种DOM绑定后期维护时简直是一场噩梦，在开发大型项目时，模块的依赖问题变得非常复杂，还记得grunt年代时，一个html页面通过有十几个script标签，简直让人吐血，如果缺少组件化思想，后期项目会变的举步维艰，原来的grunt，gulp等工具虽然解决了前端工程中静态资源的压缩，合并，打包和es6编译等问题，但是模块依赖和组件化开发一直没有得到很好的解决，Vue在这个大背景下应运而生，凭借虚拟DOM减少了操作DOM时引起的页面回流和重绘，提升了性能，本身又是基于数据驱动和组件化思想开发，提供了非常简洁，易于理解的API，一经推出，便迅速走红。明白了这个背景，我们再来看Vue就能更好的理解了。
MVVM 目的前后端分离、解耦
组件化 目的减少代码冗余、减少工作量、方便协作开发
第三方库模块化使用 待验证 目的便于多人协作开发、使用方便
虚拟DOM、回流、重绘 目的性能提升
vue发布时间
vue.js 2.x 最初发布2016年6月alpha.0 稳定版 2.6.x
vue.js 1.x 最初发布2015年9月alpha.3
Alpha内测
Beta内测（比alpha消除了严重错误等 加入很多新功能）
rc候选版本（几乎不加新功能，主要除错）
release（最终版）
仓库地址：查看版本https://github.com/vuejs/vue
vue脚手架(vue框架
- cli1 最初2015年12月（忽略）
- cli2 最初发布2016年4月 npm i vue-cli -g
- cli3 最初发布2018年1月alpha.4 npm i @vue/cli -g
- cli4 最新（最初发布2019年5月alpha.0 npm i @vue/cli -g
- vue.config.js
Vue4和vue2有哪些区别(注:这里指框架
#1部分命令发生了变化
下载安装 npm install -g vue@cli
创建项目 vue create
启动项目 npm run serve
#2默认项目目录结构也发生了变化
移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
#3可视化界面
找到项目，vue ui 命令会直接打开可视化界面，里面可以进行配置、依赖等操作
四、vue-cli2.x 脚手架(了解)
明确需求
思考：写项目用一个库文件还是整个框架？
回答：整个框架
思考：整个框架如何创建？
回答：vue脚手架 vue-cli2.x | 4.x
简介
什么是vue-cli脚手架工具：名词
作用：用来生成vue框架代码的工具
语法
-【随便找个目录执行】npm i vue-cli -g 【注：通过vue -V验证版本】
-【练习进入day5目录】vue init webpack test（ps. test是项目名）
-【其他命令】
开发启动项目：npm run dev
项目上线打包：npm run build
安装脚手架&创建项目
步骤1：安装脚手架
步骤2：校验
步骤3：创建test1相聚
步骤4：跑项目测试
目录说明&运行流程说明
-
目录说明
-
项目运行流程说明
1. 在DOS窗口敲 npm run dev 命令 -> 去package.json中script键找dev 然后执行命令
2. 入口文件src/main.js 默认加载了 APP.vue组件（里面主要写HMTML、CSS
3. APP.vue中 挖了坑router-view 显示路由数据
4. 最终页面渲染显示
初体验
需 求：修改代码，将页面的welcome改成welcome6666
步骤1：确保已经启动项目启动
步骤2：修改
步骤4：重新查看网页效果
开发使用（1定义路由，2创建组件，3跑）
目标：1-通过vue脚手架生成vue框架代码，2-显示任意静态页面
**需求：**搞登录组件/页面
概念
路由？
思想引导：http://baidu.com
没搞编程叫网址
搞了编程叫域名
在框架里面叫路由
路由：就是网址
路由参数：就是网址参数
参数作用：显示不同的页面 / - 首页，/login - 登录页
我们开发一个网站
显示页面（1-定义路由，2-创建路由）
请求接口
步骤：
1.定义路由，声明路由对应的组件
2.创建组件
之前：Vue.component去创建的 现在：是一个.vue文件 里面主要有三个分别，分别为css、js等 在template标签里面声明html代码 在style标签中声明css代码 在js标签中声明js代码
3.访问测试
多学一招（很重要自己现状）：通过vs code中vetur插件可以让.vue后缀代码高亮
上线使用
1通过命令生成打包压缩的代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8uhGlWe-1590894944010)(images/1575255517625.png)]
2复制代码到站点目录下即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HflLJqrg-1590894944011)(images/1575255558009.png)]
3-将dist目录【里面的代码】复制到apache站点目录中即可
小总解
什么是脚手架：就是用来生成vue框架的工具
安装脚手架 ：vue i vue-cli -g
生成项目命令：vue init webapck 项目名
1 生成vue框架代码
2 静态页面的创建
2.1 定义路由 src/router/index.js
2.2 创建组件
3 访问
上线：npm run build 将dist目录下的代码复制apache目录中即可（多次敲命令会覆盖
再总结
需求：使用vue框架/全家桶显示静态页面
步骤
步骤1：安装vue脚手架命名行工具 npm i vue-cli -g 然后通过vue -V 校验 （仅一次）
步骤2：通过vue命令创建项目【vue init webpack 项目名】
步骤3：启动测试【npm run dev】
开发项目都在src里面
默认App.vue组件（相当于body）挖坑显示其他组件 components里面的HelloWorld.vue组件
后期新增页面
1.定义路由 router/index.js 里面定义
2.创建组件
3.打开页面
五、vue-cli3.x脚手架（此处不细讲）
- Vue.config.js配置
明确需求
vue-cli3
是
vue-cli2 升级版
手册：https://cli.vuejs.org/zh/config/#vue-config-js
语法
-【随便找个目录执行】
最新版本： npm i @vue/cli -g
指定版本： npm i @vue/[email protected] -g
-【进入对应目录】vue create 项目名（留心安装路径不要中文）
-【其他语法】
开发启动项目：npm run serve
项目上线打包：npm run build
安装
初体验
需 求：修改代码，将页面的welcome改成welcome6666
步骤1：启动
步骤2：查看效果
步骤3：修改
步骤4：重新查看网页效果
开发使用（1定义组件，2声明路由）
需求：搞登录组件
步骤：
1.定义路由，发现组件不存在
2.创建组件
3.访问测试
上线使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UgaGzvNU-1590894944030)(images/1575268789712.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CXYabm8E-1590894944032)(images/1575268861224.png)]
六、迁移 todolist案例到 vue-cli 中
步骤1：定义/todolist路由
步骤2：创建组件输入下述代码
TODO List
{{todo.title}}