add Vue 2.x:动画
This commit is contained in:
qianguyihao
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
|
||||
|
||||
|
||||
|
||||
|
||||
## v-cloak
|
||||
@ -255,7 +255,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
|
||||
上方代码的演示结果：
|
||||
|
||||
20180506_2320.png
|
||||
|
||||
|
||||
其实，第二行代码中，只要浏览器中还没有解析到`v-text="name"`的时候，会显示`------++++++`；当解析到`v-text="name"`的时候，name的值会直接替换`------++++++`。
|
||||
|
||||
@ -304,7 +304,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
|
||||
运行结果：
|
||||
|
||||
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
|
||||
|
||||
|
||||
### 写法二：在数组中使用三元表达式
|
||||
|
||||
@ -560,7 +560,7 @@
|
||||
|
||||
效果如下：
|
||||
|
||||
20180509_1500.png
|
||||
|
||||
|
||||
|
||||
### 方式三：对象的遍历
|
||||
@ -619,7 +619,7 @@
|
||||
|
||||
效果如下：
|
||||
|
||||
20180509_1505.png
|
||||
|
||||
|
||||
|
||||
### v-for中key的使用注意事项
|
||||
|
||||
@ -112,7 +112,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
网页显示效果如下：
|
||||
|
||||
20180522_1240.png
|
||||
|
||||
|
||||
### 给过滤器添加多个参数
|
||||
|
||||
@ -169,7 +169,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
```
|
||||
|
||||
|
||||
20180525_2135.png
|
||||
|
||||
|
||||
注意代码中那行重要的注释：括号里的参数代表 function中的 arg2。
|
||||
|
||||
@ -220,7 +220,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
效果如下：
|
||||
|
||||
20180525_2150.png
|
||||
|
||||
|
||||
|
||||
**改进3：同时使用多个过滤器**
|
||||
@ -277,7 +277,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
效果如下：
|
||||
|
||||
20180525_2200.png
|
||||
|
||||
|
||||
上方代码中，添加了多个过滤器，实现的思路是：**将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理** 。
|
||||
|
||||
@ -341,7 +341,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
运行效果：
|
||||
|
||||
20180525_2230.png
|
||||
|
||||
|
||||
### 举例2：时间格式化
|
||||
|
||||
@ -402,7 +402,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
运行结果：
|
||||
|
||||
20180526_2319.png
|
||||
|
||||
|
||||
【荐】**举例2的改进**：（字符串的padStart方法使用）
|
||||
|
||||
@ -467,7 +467,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑
|
||||
|
||||
运行效果如下：
|
||||
|
||||
20180526_2323.png
|
||||
|
||||
|
||||
`pattern`参数的解释：
|
||||
|
||||
|
||||
@ -80,7 +80,7 @@ Vue内置的按键修饰符：
|
||||
|
||||
代码的位置：
|
||||
|
||||
20180527_2340.png
|
||||
|
||||
|
||||
但我们不建议这样做。我们可以通过Vue中的自定义指令来实现这个例子。步骤如下。
|
||||
|
||||
@ -289,7 +289,7 @@ Vue内置的按键修饰符：
|
||||
|
||||
效果：
|
||||
|
||||
20180610_1323.png
|
||||
|
||||
|
||||
**自定义全局指令的简写形式**：
|
||||
|
||||
@ -350,7 +350,7 @@ Vue内置的按键修饰符：
|
||||
|
||||
效果：
|
||||
|
||||
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
|
||||
|
||||
|
||||
### 运行期间的生命周期函数
|
||||
|
||||
@ -97,6 +97,7 @@
|
||||
|
||||
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
|
||||
|
||||
PS：数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。
|
||||
|
||||
|
||||
**举例**：
|
||||
@ -160,7 +161,7 @@
|
||||
|
||||
当我们点击按钮后，运行效果是：
|
||||
|
||||
20180610_1528.png
|
||||
|
||||
|
||||
可以看出：
|
||||
|
||||
@ -176,12 +177,12 @@
|
||||
|
||||
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
|
||||
|
||||
|
||||
PS：可以在beforeDestory里**清除定时器、或清除事件绑定**。
|
||||
|
||||
|
||||
## 生命周期函数图解
|
||||
|
||||
20180610_2130.png
|
||||
|
||||
|
||||
PS：图片来自网络。
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@
|
||||
|
||||
## 使用过渡类名实现动画
|
||||
|
||||
### 官方文档的解释
|
||||
### 官方文档的截图
|
||||
|
||||
过渡类名如下：
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
**3、再加一个tramsform属性进行位移**：
|
||||
@ -159,10 +159,6 @@ PS：第一、第二个是时间点；第三个是时间段。
|
||||
我们在上方代码的基础之上，加一个tramsform属性，让动画有一个位移的效果。完整代码如下：
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
20180615_2205.gif
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -225,6 +221,10 @@ PS：第一、第二个是时间点；第三个是时间段。
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
### 修改过渡类名的前缀
|
||||
|
||||
在上一小段中，`.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
|
||||
|
||||
|
||||
## 使用第三方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
|
||||
|
||||
|
||||
**改进1**：（统一设置入场、出场动画的持续时间）
|
||||
|
||||
@ -473,7 +473,7 @@ animate.css网址：
|
||||
|
||||
我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，我们要紧接着在methods中定义八个函数。
|
||||
|
||||
如果要定义半场动画，做法是：直接在methods中写入场函数，不写离场动画即可。
|
||||
如果要定义半场动画，做法是：直接在methods中写入场动画的函数，不写离场动画的函数即可。
|
||||
|
||||
### 举例：使用钩子函数模拟小球半场动画
|
||||
|
||||
@ -550,7 +550,7 @@ animate.css网址：
|
||||
|
||||
运行效果如下：
|
||||
|
||||
20180616_1618.gif
|
||||
|
||||
|
||||
上面的代码中，有两个地方要注意：
|
||||
|
||||
@ -559,7 +559,7 @@ animate.css网址：
|
||||
|
||||
`el.offsetWidth`这行代码不能少。虽然这行代码没有实际的意义，但是少了之后，动画效果出不来：
|
||||
|
||||
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
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
**改进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>
|
||||
|
||||
```
|
||||
|
||||
运行效果如下：
|
||||
|
||||
|
||||
|
||||
**改进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>
|
||||
```
|
||||
|
||||
运行效果如下：
|
||||
|
||||
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
**改进**：`transition-group`的`tag`属性
|
||||
|
||||
上面的代码中，我们审查一下代码元素会发现，用`transition-group`包裹的元素，会被默认套上一层`<span>`：
|
||||
|
||||
|
||||
|
||||
这个`<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>
|
||||
```
|
||||
|
||||
这样的话，审查元素的效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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…
x
Reference in New Issue
Block a user