Vue学习笔记3——Vue动画、动画钩子函数、列表动画、定义组件、组件中展示数据和响应事件、局部子组件、切换组件

青旅半醒 2022-04-06 06:18 315阅读 0赞

**目录**

一、Vue中的动画

1，使用过渡类名

2，使用第三方 CSS 动画库

3，使用动画钩子函数

4，v-for 的列表过渡

5，列表的排序过渡

二、组件

1，定义Vue组件

（1）全局组件定义的三种方式

（2），组件中展示数据和响应事件

【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象

（3）使用components属性定义局部子组件

2，切换组件

使用flag标识符结合v-if和v-else切换组件

使用:is属性来切换不同的子组件,并添加切换动画

--------------------

代码请参照我的github：

[https://github.com/masterzz/vue-learn][https_github.com_masterzz_vue-learn]

# 一、Vue中的动画 #

官方文档：[https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v2_guide_transitions.html]

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

动画参考图（样式参考）：

# #

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDU5NjEx_size_16_color_FFFFFF_t_70][] ##

## 1，使用过渡类名 ##

（1）HTML结构：

</transition>

</div>

（2）VM 实例：

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue(\{

el: '\#app',

data: \{

isshow: false

\},

methods: \{

myAnimate() \{

this.isshow = !this.isshow;

\});

（3）定义两组类样式：

/\* 定义进入和离开时候的过渡状态 \*/

.fade-enter-active,

.fade-leave-active \{

transition: all 0.2s ease;

position: absolute;

/\* 定义进入过渡的开始状态 和 离开过渡的结束状态 \*/

.fade-enter,

.fade-leave-to \{

opacity: 0;

transform: translateX(100px);

（4）如果要添加一组自己的过滤动画：

dom元素部分：

<h6 v-if="flag2">这是一个H6</h6>

</transition>

style部分（这时候，用my-代替v-）：

.my-enter,

.my-leave-to \{

opacity: 0;

transform: translateY(150px);

.my-enter-active,

.my-leave-active \{

transition:all 0.4s ease;

## 2，[使用第三方 CSS 动画库][CSS] ##

# #

（1）导入动画类库：

（2）定义 transition 及属性：

<transition

enter-active-class="fadeInRight"

leave-active-class="fadeOutRight"

:duration="\{ enter: 500, leave: 800 \}">

</transition>

## 3，使用动画钩子函数 ##

# #

（1）定义 transition 组件以及三个钩子函数：

<transition

@before-enter="beforeEnter"

@enter="enter"

@after-enter="afterEnter">

</transition>

</div>

（2）定义三个 methods 钩子方法：

methods: \{

beforeEnter(el) \{ // 动画进入之前的回调

el.style.transform = 'translateX(500px)';

\},

enter(el, done) \{ // 动画进入完成时候的回调

el.offsetWidth;

el.style.transform = 'translateX(0px)';

done();

\},

afterEnter(el) \{ // 动画进入完成之后的回调

this.isshow = !this.isshow;

（3）定义动画过渡时长和样式：

.show\{

transition: all 0.4s ease;

## 4，[v-for 的列表过渡][v-for] ##

（1）定义过渡样式：

<style>

.list-enter,

.list-leave-to \{

opacity: 0;

transform: translateY(10px);

.list-enter-active,

.list-leave-active \{

transition: all 0.3s ease;

</style>

（2）定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

<transition-group tag="ul" name="list">

</transition-group>

</div>

（3）定义 VM中的结构：

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue(\{

el: '\#app',

data: \{

txt: '',

list: \[1, 2, 3, 4\]

\},

methods: \{

add() \{

this.list.push(this.txt);

this.txt = '';

\});

## 5，列表的排序过渡 ##

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。

*  v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：

.v-move\{

transition: all 0.8s ease;

.v-leave-active\{

position: absolute;

## 相关文章 ##

1.  [vue.js 1.x 文档][vue.js 1.x]
2.  [vue.js 2.x 文档][vue.js 2.x]
3.  [String.prototype.padStart(maxLength, fillString)][String.prototype.padStart_maxLength_ fillString]
4.  [js 里面的键盘事件对应的键码][js]
5.  [pagekit/vue-resource][pagekit_vue-resource]
6.  [navicat如何导入sql文件和导出sql文件][navicat_sql_sql]
7.  [贝塞尔在线生成器][Link 1]

# 二、组件 #

## 1，定义Vue组件 ##

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同：

*  模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
 *  组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

### （1）全局组件定义的三种方式 ###

1.  使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
          template: '<h1>登录</h1>'
        });
        Vue.component('login', login);

1.  直接使用 Vue.component 方法：

Vue.component('register', {
          template: '<h1>注册</h1>'
        });

1.  将模板字符串，定义到script标签种：

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
          template: '#tmpl'
        });

> 注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

### （2），组件中展示数据和响应事件 ###

1.  在组件中，`data`需要被定义为一个方法，例如：

Vue.component('account', {
          template: '#tmpl',
          data() {
            return {
              msg: '大家好！'
            }
          },
          methods:{
            login(){
              alert('点击了登录按钮');
            }
          }
        });

1.  在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的`data`属性中的值，需要使用`this`来访问；

### 【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象 ###

1.  通过计数器案例演示

### （3）使用`components`属性定义局部子组件 ###

1.  组件实例定义方式：

1.  引用组件：

## 2，切换组件 ##

## 使用`flag`标识符结合`v-if`和`v-else`切换组件 ##

1.  页面结构：

1.  Vue实例定义：

## 使用`:is`属性来切换不同的子组件,并添加切换动画 ##

1.  组件实例定义方式：

// 登录组件
        const login = Vue.extend({
          template: `<div>
            <h3>登录组件</h3>
          </div>`
        });
        Vue.component('login', login);
    
        // 注册组件
        const register = Vue.extend({
          template: `<div>
            <h3>注册组件</h3>
          </div>`
        });
        Vue.component('register', register);
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: { comName: 'login' },
          methods: {}
        });

1.  使用`component`标签，来引用组件，并通过`:is`属性来指定要加载的组件：

1.  添加切换样式：

# #

[https_github.com_masterzz_vue-learn]: https://github.com/masterzz/vue-learn
[https_cn.vuejs.org_v2_guide_transitions.html]: https://cn.vuejs.org/v2/guide/transitions.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDU5NjEx_size_16_color_FFFFFF_t_70]: /images/20220406/238c1d86a709414db69a22530cec107a.png
[CSS]: https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%B1%BB%E5%90%8D
[v-for]: https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E7%9A%84%E8%BF%9B%E5%85%A5%E5%92%8C%E7%A6%BB%E5%BC%80%E8%BF%87%E6%B8%A1
[vue.js 1.x]: https://v1-cn.vuejs.org/
[vue.js 2.x]: https://cn.vuejs.org/
[String.prototype.padStart_maxLength_ fillString]: http://www.css88.com/archives/7715
[js]: http://www.cnblogs.com/wuhua1/p/6686237.html
[pagekit_vue-resource]: https://github.com/pagekit/vue-resource
[navicat_sql_sql]: https://jingyan.baidu.com/article/a65957f4976aad24e67f9b9b.html
[Link 1]: http://cubic-bezier.com/#.4,-0.3,1,.33