add Vue 2.x:动画

This commit is contained in:
qianguyihao 2018-06-17 16:44:13 +08:00
parent e19e6c7e2f
commit 0caa6890ed
9 changed files with 494 additions and 112 deletions

View File

@ -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
## 推荐的技术博客

View File

@ -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);
// 获取 后面的所有字符

View File

@ -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的使用注意事项

View File

@ -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`参数的解释:

View File

@ -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否则看不到加粗的效果。

View File

@ -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 @@
- destroyedVue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
PS可以在beforeDestory里**清除定时器、或清除事件绑定**。
## 生命周期函数图解
20180610_2130.png
![](http://img.smyhvae.com/20180610_2130.png)
PS图片来自网络。

View File

@ -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)

View File

@ -1,8 +0,0 @@
##
Vue.component
帮助我们创建全局组件。

View File

@ -1,33 +0,0 @@
- beforeCreate和created。
created之后就拿到了数据和方法。create一般用来**获取ajax初始化操作**
- beforeMount和mounted。
mounted之后表示**真实DOM渲染完了可以操作DOM了**。
- beforeUpdate和updated
数据发生变化时会触发这两个方法。不过我们一般用watch来做。
- beforeDestory和destoryed
可以在beforeDestory里**清除定时器、或清除事件绑定**。