add Vue 2.x:动画
This commit is contained in:
parent
e19e6c7e2f
commit
0caa6890ed
@ -11,7 +11,7 @@
|
||||
> 新手入门前端,需要学习的**基础内容**有很多,如下。
|
||||
|
||||
一、HTML、CSS基础、JavaScript语法基础。学完基础后,可以仿照电商网站(例如京东、小米)做首页的布局。
|
||||
|
||||
|
||||
二、JavaScript语法进阶。包括:作用域和闭包、this和对象原型等。相信我,JS语法,永远是面试中最重要的部分。
|
||||
|
||||
三、jQuery、Ajax等。
|
||||
@ -68,32 +68,8 @@ PS:上面这三个链接,指向的的是同一个学习资源。
|
||||
|
||||
PS:上面这两个链接,指向的的是同一个学习资源。
|
||||
|
||||
|
||||
尚硅谷的视频里,讲JS语法和ES6的部分很不错。
|
||||
|
||||
### Vue相关
|
||||
|
||||
**1、传智黑马 | 2018年Vue.js深入浅出教程**:
|
||||
|
||||
|
||||
我在网上找了很多 Vue2.0 入门的视频,但是一直没有找到满意的。但这套视频还不错,可惜官方一直都只公布了一小部分。终于在2018-05-03的时候,更新了11天的全部视频,真实太激动了。
|
||||
|
||||
上面这个视频资源,相关链接如下:
|
||||
|
||||
|
||||
- 在线视频链接:<http://yun.itheima.com/course/335.html>
|
||||
|
||||
- 视频资源:<https://pan.baidu.com/s/1bUdzAkPVHJrJPcBuOgKpgA>
|
||||
|
||||
- 源码和笔记:<https://pan.baidu.com/s/1Uwja4t4ZE7cmm-l0xufkFg> 密码:8v9c
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 推荐的技术博客
|
||||
|
||||
|
@ -24,7 +24,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
## Vue初体验
|
||||
|
||||
新建一个空的项目,引入vue.js文件。写如下代码:
|
||||
@ -138,7 +137,8 @@ Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在
|
||||
|
||||
运行结果:
|
||||
|
||||
20180506_2240.png
|
||||
|
||||
![](http://img.smyhvae.com/20180506_2240.png)
|
||||
|
||||
|
||||
## v-cloak
|
||||
@ -255,7 +255,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如:
|
||||
|
||||
上方代码的演示结果:
|
||||
|
||||
20180506_2320.png
|
||||
![](http://img.smyhvae.com/20180506_2320.png)
|
||||
|
||||
其实,第二行代码中,只要浏览器中还没有解析到`v-text="name"`的时候,会显示`------++++++`;当解析到`v-text="name"`的时候,name的值会直接替换`------++++++`。
|
||||
|
||||
@ -304,7 +304,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如:
|
||||
|
||||
运行结果:
|
||||
|
||||
20180506_2330.png
|
||||
![](http://img.smyhvae.com/20180506_2330.png)
|
||||
|
||||
|
||||
## v-bind:属性绑定机制
|
||||
@ -612,7 +612,7 @@ v-on 提供了click 事件,也提供了一些其他的事件。
|
||||
if (this.intervalId != null) return; //【注意】这个定时器的this,一定不要忘记了
|
||||
|
||||
//添加定时器:点击按钮后,让字符串连续滚动
|
||||
this.intervalId = setInterval(() => {
|
||||
this.intervalId = setInterval(() => {
|
||||
// 获取 msg 的第一个字符
|
||||
var start = this.msg.substring(0, 1);
|
||||
// 获取 后面的所有字符
|
||||
|
@ -269,7 +269,7 @@
|
||||
|
||||
演示效果如下:
|
||||
|
||||
20180509_1058.png
|
||||
![](http://img.smyhvae.com/20180509_1058.png)
|
||||
|
||||
### 写法二:在数组中使用三元表达式
|
||||
|
||||
@ -560,7 +560,7 @@
|
||||
|
||||
效果如下:
|
||||
|
||||
20180509_1500.png
|
||||
![](http://img.smyhvae.com/20180509_1500.png)
|
||||
|
||||
|
||||
### 方式三:对象的遍历
|
||||
@ -619,7 +619,7 @@
|
||||
|
||||
效果如下:
|
||||
|
||||
20180509_1505.png
|
||||
![](http://img.smyhvae.com/20180509_1505.png)
|
||||
|
||||
|
||||
### v-for中key的使用注意事项
|
||||
|
@ -112,7 +112,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
网页显示效果如下:
|
||||
|
||||
20180522_1240.png
|
||||
![](http://img.smyhvae.com/20180522_1240.png)
|
||||
|
||||
### 给过滤器添加多个参数
|
||||
|
||||
@ -169,7 +169,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
```
|
||||
|
||||
|
||||
20180525_2135.png
|
||||
![](http://img.smyhvae.com/20180525_2135.png)
|
||||
|
||||
注意代码中那行重要的注释:括号里的参数代表 function中的 arg2。
|
||||
|
||||
@ -220,7 +220,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
效果如下:
|
||||
|
||||
20180525_2150.png
|
||||
![](http://img.smyhvae.com/20180525_2150.png)
|
||||
|
||||
|
||||
**改进3:同时使用多个过滤器**
|
||||
@ -277,7 +277,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
效果如下:
|
||||
|
||||
20180525_2200.png
|
||||
![](http://img.smyhvae.com/20180525_2200.png)
|
||||
|
||||
上方代码中,添加了多个过滤器,实现的思路是:**将 msg 交给第一个过滤器来处理,然后将处理的结果交给第二个过滤器来处理** 。
|
||||
|
||||
@ -341,7 +341,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
运行效果:
|
||||
|
||||
20180525_2230.png
|
||||
![](http://img.smyhvae.com/20180525_2230.png)
|
||||
|
||||
### 举例2:时间格式化
|
||||
|
||||
@ -402,7 +402,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
运行结果:
|
||||
|
||||
20180526_2319.png
|
||||
![](http://img.smyhvae.com/20180526_2319.png)
|
||||
|
||||
【荐】**举例2的改进**:(字符串的padStart方法使用)
|
||||
|
||||
@ -467,7 +467,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
运行效果如下:
|
||||
|
||||
20180526_2323.png
|
||||
![](http://img.smyhvae.com/20180526_2323.png)
|
||||
|
||||
`pattern`参数的解释:
|
||||
|
||||
|
@ -80,7 +80,7 @@ Vue内置的按键修饰符:
|
||||
|
||||
代码的位置:
|
||||
|
||||
20180527_2340.png
|
||||
![](http://img.smyhvae.com/20180527_2340.png)
|
||||
|
||||
但我们不建议这样做。我们可以通过Vue中的自定义指令来实现这个例子。步骤如下。
|
||||
|
||||
@ -289,7 +289,7 @@ Vue内置的按键修饰符:
|
||||
|
||||
效果:
|
||||
|
||||
20180610_1323.png
|
||||
![](http://img.smyhvae.com/20180610_1323.png)
|
||||
|
||||
**自定义全局指令的简写形式**:
|
||||
|
||||
@ -350,7 +350,7 @@ Vue内置的按键修饰符:
|
||||
|
||||
效果:
|
||||
|
||||
20180610_1400.png
|
||||
![](http://img.smyhvae.com/20180610_1400.png)
|
||||
|
||||
注意, el.style.fontWeight设置属性值,至少要600,否则看不到加粗的效果。
|
||||
|
||||
|
@ -24,11 +24,11 @@
|
||||
|
||||
- beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
|
||||
|
||||
- created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
|
||||
- created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板。我们可以在这里进行Ajax请求。
|
||||
|
||||
- beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
|
||||
|
||||
- mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
|
||||
- mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示。(mounted之后,表示**真实DOM渲染完了,可以操作DOM了**)
|
||||
|
||||
|
||||
**举例**:
|
||||
@ -89,7 +89,7 @@
|
||||
|
||||
打印结果:
|
||||
|
||||
20180610_1500.png
|
||||
![](http://img.smyhvae.com/20180610_1500.png)
|
||||
|
||||
### 运行期间的生命周期函数
|
||||
|
||||
@ -97,6 +97,7 @@
|
||||
|
||||
- updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了。
|
||||
|
||||
PS:数据发生变化时,会触发这两个方法。不过,我们一般用watch来做。
|
||||
|
||||
|
||||
**举例**:
|
||||
@ -160,7 +161,7 @@
|
||||
|
||||
当我们点击按钮后,运行效果是:
|
||||
|
||||
20180610_1528.png
|
||||
![](http://img.smyhvae.com/20180610_1528.png)
|
||||
|
||||
可以看出:
|
||||
|
||||
@ -176,12 +177,12 @@
|
||||
|
||||
- destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
|
||||
|
||||
|
||||
PS:可以在beforeDestory里**清除定时器、或清除事件绑定**。
|
||||
|
||||
|
||||
## 生命周期函数图解
|
||||
|
||||
20180610_2130.png
|
||||
![](http://img.smyhvae.com/20180610_2130.png)
|
||||
|
||||
PS:图片来自网络。
|
||||
|
||||
|
@ -9,11 +9,11 @@
|
||||
|
||||
## 使用过渡类名实现动画
|
||||
|
||||
### 官方文档的解释
|
||||
### 官方文档的截图
|
||||
|
||||
过渡类名如下:
|
||||
|
||||
20180616_1555.png
|
||||
![](http://img.smyhvae.com/20180616_1555.png)
|
||||
|
||||
动画进入:
|
||||
|
||||
@ -38,7 +38,7 @@ PS:第一、第二个是时间点;第三个是时间段。
|
||||
|
||||
### 使用举例(通过Vue的过渡类名来实现)
|
||||
|
||||
温馨提示:`v-enter-to`和`v-leave`的状态是一样的。而且一般来说,`v-enter`和`v-leave-to`的状态也是一致的。所以,我们可以把这四个状态写成两组。
|
||||
`v-enter-to`和`v-leave`的状态是一样的。而且一般来说,`v-enter`和`v-leave-to`的状态也是一致的。所以,我们可以把这四个状态写成两组。
|
||||
|
||||
现在我们来做个例子:点击按钮时,让div显示/隐藏。
|
||||
|
||||
@ -150,7 +150,7 @@ PS:第一、第二个是时间点;第三个是时间段。
|
||||
|
||||
运行效果如下:
|
||||
|
||||
20180615_2200.gif
|
||||
![](http://img.smyhvae.com/20180615_2200.gif)
|
||||
|
||||
|
||||
**3、再加一个tramsform属性进行位移**:
|
||||
@ -159,10 +159,6 @@ PS:第一、第二个是时间点;第三个是时间段。
|
||||
我们在上方代码的基础之上,加一个tramsform属性,让动画有一个位移的效果。完整代码如下:
|
||||
|
||||
|
||||
效果如下:
|
||||
|
||||
20180615_2205.gif
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -225,6 +221,10 @@ PS:第一、第二个是时间点;第三个是时间段。
|
||||
```
|
||||
|
||||
|
||||
效果如下:
|
||||
|
||||
![](http://img.smyhvae.com/20180615_2205.gif)
|
||||
|
||||
### 修改过渡类名的前缀
|
||||
|
||||
在上一小段中,`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做,会有一个局限性:假设有两个DOM元素都用`<transition>`进行了包裹,那这两个DOM元素就都具备了`v-`中所定义的动画。
|
||||
@ -320,7 +320,7 @@ PS:第一、第二个是时间点;第三个是时间段。
|
||||
<input type="button" value="toggle2" @click="flag2=!flag2">
|
||||
<!-- 使用 transition 元素,把 需要被动画控制的元素 h6,包裹起来 -->
|
||||
<!-- transition 元素,是 Vue 官方提供的 -->
|
||||
<!-- 但是,在这里,我们给这个transition定义一个别名,叫`name`,然后,我们就可以通过 `.my-enter`等 来定义动画的样式【重要】 -->
|
||||
<!-- 【重点】在这里,我们给这个transition定义一个别名,叫`name`,然后,我们就可以通过 `.my-enter`等 来定义动画的样式【重要】 -->
|
||||
<transition name="my">
|
||||
<h6 v-if="flag2">这是一个H6</h6>
|
||||
</transition>
|
||||
@ -344,7 +344,7 @@ PS:第一、第二个是时间点;第三个是时间段。
|
||||
|
||||
运行效果如下:
|
||||
|
||||
20180616_1513.gif
|
||||
![](http://img.smyhvae.com/20180616_1513.gif)
|
||||
|
||||
## 使用第三方animate.css类库实现动画
|
||||
|
||||
@ -402,7 +402,7 @@ animate.css网址:
|
||||
|
||||
注意1:`enter-active-class`和`leave-active-class`这两个类名是Vue动画里的关键词,不能写成自己**随意起**的类名。
|
||||
|
||||
注意2:`bounceIn`、`bounceOut`这两个类不能直接使用,要在前面加上`animated`这个类;否则动画是不会生效的。当然,上面的代码中,我们还可以把`class = animated`这个代码移到<h3>标签里,效果是一样的,如下:
|
||||
注意2:`bounceIn`、`bounceOut`这两个类不能直接使用,要在前面加上`animated`这个类;否则动画是不会生效的。当然,上面的代码中,我们还可以把`class = animated`这个代码移到`<h3>`标签里,效果是一样的,如下:
|
||||
|
||||
```html
|
||||
<!-- 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 -->
|
||||
@ -415,7 +415,7 @@ animate.css网址:
|
||||
|
||||
运行效果如下:
|
||||
|
||||
20180616_1538.gif
|
||||
![](http://img.smyhvae.com/20180616_1538.gif)
|
||||
|
||||
**改进1**:(统一设置入场、出场动画的持续时间)
|
||||
|
||||
@ -473,7 +473,7 @@ animate.css网址:
|
||||
|
||||
我们可以这样理解:上面这八个钩子函数(四个入场、四个离场),对应了八个事件,我们要紧接着在methods中定义八个函数。
|
||||
|
||||
如果要定义半场动画,做法是:直接在methods中写入场函数,不写离场动画即可。
|
||||
如果要定义半场动画,做法是:直接在methods中写入场动画的函数,不写离场动画的函数即可。
|
||||
|
||||
### 举例:使用钩子函数模拟小球半场动画
|
||||
|
||||
@ -550,7 +550,7 @@ animate.css网址:
|
||||
|
||||
运行效果如下:
|
||||
|
||||
20180616_1618.gif
|
||||
![](http://img.smyhvae.com/20180616_1618.gif)
|
||||
|
||||
上面的代码中,有两个地方要注意:
|
||||
|
||||
@ -559,7 +559,7 @@ animate.css网址:
|
||||
|
||||
`el.offsetWidth`这行代码不能少。虽然这行代码没有实际的意义,但是少了之后,动画效果出不来:
|
||||
|
||||
20180616_1620.gif
|
||||
![](http://img.smyhvae.com/20180616_1620.gif)
|
||||
|
||||
当然,我们也可以把这行代码换成`el.offsetHeight`、`el.offsetLeft`、`el.offsetTop`之类的,只要包含了offset就行。
|
||||
|
||||
@ -568,7 +568,7 @@ animate.css网址:
|
||||
|
||||
`enter()`函数里,函数的第二个参数要加上`done`,函数体的最后一行要写`done()`,表示**立即执行**后面的`afterEnter()`函数;如果没有这个`done`,则会**延迟执行**后面的`afterEnter()`函数:
|
||||
|
||||
20180616_2145.gif
|
||||
![](http://img.smyhvae.com/20180616_2145.gif)
|
||||
|
||||
Vue官方文档的解释是这样:
|
||||
|
||||
@ -580,11 +580,11 @@ Vue官方文档的解释是这样:
|
||||
|
||||
## 使用transition-group元素实现列表动画
|
||||
|
||||
现在的场景是:在一个`<ul>`列表中,如果我想给指定的某个`li`添加动画效果,该怎么做呢?需要声明的是,这些`li`是用v-for循环进行遍历的。
|
||||
现在的场景是:在一个`<ul>`列表中,如果我想给**指定的某个**`li`添加动画效果,该怎么做呢?(需要声明的是,这些`li`是用v-for循环进行遍历的)
|
||||
|
||||
如果我们用`<transition>`把`li`包裹起来,就会让所有的`li`都具备了动画,这显然是不可取的。
|
||||
|
||||
那该怎么做呢?这里我们就可以用到`transition-group`。
|
||||
那该怎么做呢?这里我们就可以用`transition-group`进行包裹。
|
||||
|
||||
**代码举例1**:点击添加按钮后,给新增的 item 加个动画
|
||||
|
||||
@ -646,10 +646,8 @@ Vue官方文档的解释是这样:
|
||||
<!-- <ul> -->
|
||||
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
|
||||
<!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
|
||||
<!-- 给 ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果 -->
|
||||
<!-- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签 -->
|
||||
<transition-group>
|
||||
<li v-for="(item, i) in list" :key="item.id" @click="add">
|
||||
<li v-for="(item, i) in list" :key="item.id">
|
||||
{{item.id}} --- {{item.name}}
|
||||
</li>
|
||||
</transition-group>
|
||||
@ -686,19 +684,467 @@ Vue官方文档的解释是这样:
|
||||
|
||||
运行效果如下:
|
||||
|
||||
20180616_2240.gif
|
||||
![](http://img.smyhvae.com/20180616_2240.gif)
|
||||
|
||||
|
||||
**改进1**:添加删除item的功能
|
||||
|
||||
基于上面的代码,我们来添加**删除item**的功能,代码本应该是这样写:
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<script src="vue2.5.16.js"></script>
|
||||
<style>
|
||||
li {
|
||||
border: 1px dashed #999;
|
||||
margin: 5px;
|
||||
line-height: 35px;
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: hotpink;
|
||||
transition: all 0.8s ease;
|
||||
/*鼠标悬停时,出现背景色。让这个背景色的出现,也加一个淡入的动画*/
|
||||
}
|
||||
|
||||
.v-enter,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(80px);
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<div>
|
||||
<label>
|
||||
Id:
|
||||
<input type="text" v-model="id">
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" v-model="name">
|
||||
</label>
|
||||
|
||||
<input type="button" value="添加" @click="add">
|
||||
</div>
|
||||
|
||||
<!-- <ul> -->
|
||||
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
|
||||
<!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
|
||||
<transition-group>
|
||||
<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
|
||||
{{item.id}} --- {{item.name}}
|
||||
</li>
|
||||
</transition-group>
|
||||
<!-- </ul> -->
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 创建 Vue 实例,得到 ViewModel
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
id: '',
|
||||
name: '',
|
||||
list: [
|
||||
{ id: 1, name: '赵高' },
|
||||
{ id: 2, name: '秦桧' },
|
||||
{ id: 3, name: '严嵩' },
|
||||
{ id: 4, name: '魏忠贤' }
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.list.push({ id: this.id, name: this.name })
|
||||
this.id = this.name = ''
|
||||
},
|
||||
del(i) {
|
||||
this.list.splice(i, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
运行效果如下:
|
||||
|
||||
![](http://img.smyhvae.com/20180617_1555.gif)
|
||||
|
||||
**改进2:**:
|
||||
|
||||
上图中,我们发现,当我删除第2个item时,**第3、第4个item在往上移动的过程比会较突兀**。为了改进这个地方,我们可以给`.v-move`、`.v-leave-active`加一些动画属性。最终,完整版代码如下:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<script src="vue2.5.16.js"></script>
|
||||
<style>
|
||||
li {
|
||||
border: 1px dashed #999;
|
||||
margin: 5px;
|
||||
line-height: 35px;
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: hotpink;
|
||||
transition: all 0.8s ease;
|
||||
/*鼠标悬停时,出现背景色。让这个背景色的出现,也加一个淡入的动画*/
|
||||
}
|
||||
|
||||
.v-enter,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(80px);
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
/* 下面的 .v-move 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果 */
|
||||
.v-move {
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.v-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<div>
|
||||
<label>
|
||||
Id:
|
||||
<input type="text" v-model="id">
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" v-model="name">
|
||||
</label>
|
||||
|
||||
<input type="button" value="添加" @click="add">
|
||||
</div>
|
||||
|
||||
<!-- <ul> -->
|
||||
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
|
||||
<!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
|
||||
<transition-group>
|
||||
<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
|
||||
{{item.id}} --- {{item.name}}
|
||||
</li>
|
||||
</transition-group>
|
||||
<!-- </ul> -->
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 创建 Vue 实例,得到 ViewModel
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
id: '',
|
||||
name: '',
|
||||
list: [
|
||||
{ id: 1, name: '赵高' },
|
||||
{ id: 2, name: '秦桧' },
|
||||
{ id: 3, name: '严嵩' },
|
||||
{ id: 4, name: '魏忠贤' }
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.list.push({ id: this.id, name: this.name })
|
||||
this.id = this.name = ''
|
||||
},
|
||||
del(i) {
|
||||
this.list.splice(i, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
运行效果如下:
|
||||
|
||||
![](http://img.smyhvae.com/20180617_1556.gif)
|
||||
|
||||
### transition-group中appear和tag属性的作用
|
||||
|
||||
我们可以在上面的代码基础之上,给transition-group加上`appear`属性,这样的话,可以让transition-group包裹的所有DOM元素在刷新时,有**淡入效果**。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<script src="vue2.5.16.js"></script>
|
||||
<style>
|
||||
li {
|
||||
border: 1px dashed #999;
|
||||
margin: 5px;
|
||||
line-height: 35px;
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: hotpink;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
.v-enter,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(80px);
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
/* 下面的 .v-move 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果 */
|
||||
|
||||
.v-move {
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.v-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<div>
|
||||
<label>
|
||||
Id:
|
||||
<input type="text" v-model="id">
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" v-model="name">
|
||||
</label>
|
||||
|
||||
<input type="button" value="添加" @click="add">
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
|
||||
<!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
|
||||
<!-- 给 ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果 -->
|
||||
<!-- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签 -->
|
||||
<transition-group appear>
|
||||
<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
|
||||
{{item.id}} --- {{item.name}}
|
||||
</li>
|
||||
</transition-group>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 创建 Vue 实例,得到 ViewModel
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
id: '',
|
||||
name: '',
|
||||
list: [
|
||||
{ id: 1, name: '赵高' },
|
||||
{ id: 2, name: '秦桧' },
|
||||
{ id: 3, name: '严嵩' },
|
||||
{ id: 4, name: '魏忠贤' }
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.list.push({ id: this.id, name: this.name })
|
||||
this.id = this.name = ''
|
||||
},
|
||||
del(i) {
|
||||
this.list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
![](http://img.smyhvae.com/20180617_1600.gif)
|
||||
|
||||
**改进**:`transition-group`的`tag`属性
|
||||
|
||||
上面的代码中,我们审查一下代码元素会发现,用`transition-group`包裹的元素,会被默认套上一层`<span>`:
|
||||
|
||||
![](http://img.smyhvae.com/20180617_1620.png)
|
||||
|
||||
这个`<span>`虽然没有太大副作用,但是不符合代码规范。为了解决这个问题,我们可以通过`tag`属性给`transition-group`包谷的元素套上一层`<ul>`,然后把现有的`<ul>`注释掉,就可以了。最终代码如下:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<script src="vue2.5.16.js"></script>
|
||||
<style>
|
||||
li {
|
||||
border: 1px dashed #999;
|
||||
margin: 5px;
|
||||
line-height: 35px;
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: hotpink;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.v-enter,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(80px);
|
||||
}
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
/* 下面的 .v-move 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果 */
|
||||
|
||||
.v-move {
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.v-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<div>
|
||||
<label>
|
||||
Id:
|
||||
<input type="text" v-model="id">
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" v-model="name">
|
||||
</label>
|
||||
|
||||
<input type="button" value="添加" @click="add">
|
||||
</div>
|
||||
|
||||
<!-- <ul> -->
|
||||
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
|
||||
<!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
|
||||
<!-- 给 ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果 -->
|
||||
<!-- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签 -->
|
||||
<transition-group appear tag="ul">
|
||||
<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
|
||||
{{item.id}} --- {{item.name}}
|
||||
</li>
|
||||
</transition-group>
|
||||
<!-- </ul> -->
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 创建 Vue 实例,得到 ViewModel
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
id: '',
|
||||
name: '',
|
||||
list: [
|
||||
{ id: 1, name: '赵高' },
|
||||
{ id: 2, name: '秦桧' },
|
||||
{ id: 3, name: '严嵩' },
|
||||
{ id: 4, name: '魏忠贤' }
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.list.push({ id: this.id, name: this.name })
|
||||
this.id = this.name = ''
|
||||
},
|
||||
del(i) {
|
||||
this.list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
这样的话,审查元素的效果如下:
|
||||
|
||||
![](http://img.smyhvae.com/20180617_1621.png)
|
||||
|
||||
|
@ -1,8 +0,0 @@
|
||||
|
||||
|
||||
##
|
||||
|
||||
Vue.component:
|
||||
|
||||
|
||||
帮助我们创建全局组件。
|
@ -1,33 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- beforeCreate和created。
|
||||
|
||||
created之后,就拿到了数据和方法。create一般用来**获取ajax,初始化操作**
|
||||
|
||||
- beforeMount和mounted。
|
||||
|
||||
mounted之后,表示**真实DOM渲染完了,可以操作DOM了**。
|
||||
|
||||
|
||||
- beforeUpdate和updated
|
||||
|
||||
数据发生变化时,会触发这两个方法。不过,我们一般用watch来做。
|
||||
|
||||
- beforeDestory和destoryed
|
||||
|
||||
可以在beforeDestory里**清除定时器、或清除事件绑定**。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user