Vue 过渡动画组件脚手架安装

最新推荐文章于 2022-05-09 20:09:19 发布

ILove_bugs

最新推荐文章于 2022-05-09 20:09:19 发布

阅读量429

点赞数

分类专栏： Vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ilove_bugs/article/details/121545309

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.过渡动画(了解)

1.一般对元素的添加,修改或者删除时,需要使用过渡动画
2.在大型应用中,使用过渡动画一般在导航切换
3.在vue中使用过渡动画的地方:
         v-if(条件判断)
         v-show(条件展示)
         动态组件(component)
总结:一般实现过渡动画需要结合CSS样式.

1-1 transition组件

在vue中系统提供了一个组件为transition,将需要实现过渡动画的元素被transition组件进行包裹即可.

语法:
    <transition>
        实现过渡动画的元素
   </transition>

1-2 内置的过渡类名

.v-enter            #动画进入时的状态
.v-enter-active     #动画激活时的状态
.v-enter-to         #动画进入结束时的状态

.v-leave            #动画离开时的状态
.v-leave-active     #动画离开激活时的状态
.v-leave-to         #动画离开结束时的状态

系统中如果没有为transition组件设置name属性,则使用默认的类名前缀:v-


<style>
    .box{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: red;
        top: 40px;
        
    }
    /* 
        .box
        离开：从20-> 300 消失
        进入：从300-> 20 显示
        也可以结合透明度
     */

     .v-leave,.v-enter-to{
        left:20px;
        opacity: 1;
     }
     .v-leave-active,.v-enter-active{
         transition: all 1.5s;
     }
     .v-leave-to,.v-enter{
         left: 300px;
         opacity: 0;
     }


</style>
<body>
    <div id="app">

        <button @click="isShow = !isShow">显示与隐藏</button>

        <transition>
            <div class="box" v-show="isShow"></div>
        </transition>
        

    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow:true
        },
        methods: {
        }
    })
</script>

系统中如果为transition组件设置name属性,则使用name属性值作为过渡动画的类名前缀,比如 name="ab": eg .ab-


<style>
    .box{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: red;
        top: 40px;
        
    }
    /* 
        .box
        离开：从20-> 300 消失
        进入：从300-> 20 显示
        也可以结合透明度
     */

     .ab-leave,.ab-enter-to{
        left:20px;
        opacity: 1;
     }
     .ab-leave-active,.ab-enter-active{
         transition: all 1.5s;
     }
     .ab-leave-to,.ab-enter{
         left: 300px;
         opacity: 0;
     }


</style>
<body>
    <div id="app">

        <button @click="isShow = !isShow">显示与隐藏</button>

        <transition name="ab">
            <div class="box" v-show="isShow"></div>
        </transition>
        

    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow:true
        },
        methods: {
        }
    })
</script>

注意：一般只写进入的动画。

1-3.配置animate.css实现过渡动画

animate.CSS网址 :Animate.css | A cross-browser library of CSS animations.

中文网：animate.css动画演示_dowebok

注意：去中文复制名称的时候，前面要加 animate__

 enter-active-class:进入激活时的类名  一般用进入的
 leave-active-class:离开激活时的类名
 
 animate__animated : 是基础类
 animate__backInRight / animate__fadeOutTopLeft

<style>
    .box {
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: red;
        top: 40px;

    }
</style>


<body>
    <!-- 
        1. 下载 animate.css
     -->
     <!-- 2. 引入animate.css -->
     <link rel="stylesheet" href="node_modules/animate.css/animate.css">
    <div id="app">
        <button @click="isShow = !isShow">显示与隐藏</button>

        <!-- 
             enter-active-class:进入激活时的类名  一般用进入的
             leave-active-class:离开激活时的类名

             animate__animated: animate库的基础类 必须加
             3. 从官网copy想用的动画名
         -->
        <transition 
         enter-active-class="animate__animated animate__zoomInDown"
         leave-active-class="animate__animated animate__headShake"
        >
            <div class="box" v-show="isShow"></div>
        </transition>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow:false
        },
        methods: {
        }
    })
</script>

2.组件(重点)

前端模块化的升级版。

node:commonjs规范

es6:es6的模块化规范

模块化指的是：js层面上的封装，模块化不能解决html和css的封装。最直接的好处就是代码能够复用。

但前端不仅仅是js。还html（字体、图片）、css、js，这些东西要复用，前端提出了一个组件化思想。（就是模块化的升级版）

2-1.定义

组件(component)在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,为了分工明确,可以使用组件对一些抽象的功能进行封装.

2-2.作用

提高代码的复用率

2-3.组件注册

局部注册组件

* 1.组件名为自定义
* 2.组件的值是一个Object
* 3.组件中要展示的模板内容,存放在template选项中

<style>
    .box{
        border:1px solid salmon;
        margin: 10px;
    }
</style>
<body>
    <div id="app">
        <!-- 2. 使用one组件 -->
        <one></one>
        <one></one>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        },
        components:{
            //key:{}
            //1. 注册了one组件
            one:{
                template:'<div class="box">my is one component</div>'
            }
        }
    })
</script>

全局注册组件

书写格式:
	Vue.component('自定义的组件名',{template:'在模板中展示的内容'})

全局注册组件和局部注册组件的区别

全局注册组件:可以在任何vue实例使用
局部注册组件:只能在当前vue实例使用

<style>
    .box{
        border:1px solid salmon;
        margin: 10px;
    }
</style>
<body>
    <div id="app">
        <h2>app</h2>
        <one></one>
        <one></one>
        <two></two>
    </div>

    <div id="root">
        <h2>root</h2>
        <two></two>
        <one></one>
    </div>
</body>
<script src="vue.js"></script>
<script>

   // Vue.component( 组件名,Object )
   Vue.component( 'two',{
       template:'<div>my is two ,global component</div>'
   } )

    new Vue({
        el: '#app',
        data: {
        },
        components:{
            //key:{}
            //1. 注册了one组件
            one:{
                template:'<div class="box">my is one component</div>'
            }
        }
    })


    new Vue({
        el:'#root'
    })
</script>

2-4.组件名称

* 组件名称
  组件名称为自定义
  不能现有标签作为组件名, eg: div  p img  span
  不能使用现有标签的大写作为组件名. eg: DIV  Div  dIV
  建议组件名称使用小驼峰声明, 在视图中调用时,将首字母大写转为  "-小写"即可
  在template模板中.有且只能有一个根节点. 如果内容需要换行时,使用模板字符串

<body>
    <div id="app">
        <DIV>123</DIV>  <!-- <div></div> -->
        <!-- <ONE></ONE>
        <one1></one1> -->

        <v-two></v-two>
        <v-three></v-three>
        <v-three></v-three>

        <v-lun-bo></v-lun-bo>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        },
        components:{
            //1. 名称的问题，不要有大写
            one1:{
                template:'<div>my is one</div>'
            },
            //2. 使用小驼峰式命名
            vTwo:{
                template:'<div>my is two</div>'
            },
            //3. template中的标签，有且只有一个根节点
            vThree:{
                template:`
                    <div>
                        <div>my is three</div>
                        <h2>my is h2</h2>
                    </div>
                `
            },
            //注册轮播图组件
            vLunBo:{
                template:`
                    <div id="focus">
                        <ul>
                            <li>1图</li>
                            <li>2图</li>
                        </ul>    
                    </div>
                `
            }
        }
    })
</script>

2-5.template模板

<body>
    <div id="app">
        <v-one></v-one>
    </div>


    <template id="one">
        <div>
            my is one component
        </div>
    </template>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        },
        components:{
            vOne:{
                template:'#one'
            }
        }
    })
</script>

注意:

	1.一个根组件是一个Vue实例   采用关键字 new
		根组件中有很多选项:  el  data methods  watch computed filters template render components 8个钩子函数
	2.一个组件是一个VueComponent实例
		组件中同样有很多选项: template data methods watch computed filters render 8个钩子函数

2-6.data的用法

根组件中data是一个对象

在js中对象类型的变量本事是属于引用类型,不管数据被复用多少,次数的数据都是处于共享状态,一旦data数据发生不改变,那么所有复用的地方都会发生改变

data声明为函数

* 组件时可复用的vue实例,组件一旦被创建好之后,就有可能被复用在各个地方,不管组件
* 被复用了多少次,他们之间的数据都应该是相互独立,互不影响的.
* 基于以上原理,data被声明为函数返回值的形式,不管组件被复用多少次,组件之间都是相互独立
* 的,这就相当于为每一份组件开辟一个独立的空间.各个空间维护着各自的数据.

案例：深刻理解data函数

<style>
    .box{
        border: 2px solid red;
        padding: 20px;;
    }
</style>
<body>
    <div id="app">
        <h2>app</h2>
        <v-one></v-one>
        <v-one></v-one>
    </div>
</body>
<script src="vue.js"></script>
<script>

    /*
        1. 组件与组件之间都是封闭的状态，或者理解为独立的状态

    */ 
    new Vue({
        el: '#app',
        data: {
            username:'app实例上的username'
        },
        components:{
            vOne:{
                template:`
                    <div class="box">
                        my is one
                        <hr>
                        {{num}}
                        <hr>
                        <button @click="num++">+1</button>
                    </div>
                `,
                data(){
                    return {
                        num:0
                    }
                }
            }
        }
    })
</script>

2-7.组件的嵌套: 不用练

要会拆组件

组件其实就是个vue实例对象，但是除了el属性其它都有，同时组件中的data是个函数。

3.脚手架安装(重点)

快速的把我们所需项目结构给搭建好。

3-1.下载安装脚手架

一定得先安装node/npm/webpack

1.npm i @vue/cli -g    #全局安装脚手架
2.vue -V    #查看版本

3-2.通过脚手架创建项目

方式一: 一问一答

vue create 项目名称

1) 一问一答

2）

3） package.json

4) 不保存此记忆

5）启动项目

进入项目目录执行 npm run serve

方式二：可视化面板的方式

注意：不要有中文路径。

vue ui

创建
选择npm和.git
手动选择
vue 2的版本

3-3.项目目录

- myapp
	- node_modules 项目依赖
    - public 存放静态资源的
    - src 真正要开发的目录
    	- assets 存放静态资源
        - components 存放.vue后缀的文件：
			*.vue 单文件组件
        App.vue  视图的主入口文件   <div id="app"></div>
		main.js  项目的入口文件
    .gitignore  git忽略的配置文件
    babel.config.js  babel的配置，配置es6解析 
    package.json 项目配置文件
    package-lock.json 锁子，记录了包的真正的地址
    readme.md 读我

Vuter

.vue 后缀的文件就是一个组件。单文件组件

ILove_bugs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 过渡动画组件脚手架安装

1.过渡动画(了解)1.一般对元素的添加,修改或者删除时,需要使用过渡动画2.在大型应用中,使用过渡动画一般在导航切换3.在vue中使用过渡动画的地方: v-if(条件判断) v-show(条件展示) 动态组件(component)总结:一般实现过渡动画需要结合CSS样式.1-1 transition组件在vue中系统提供了一个组件为transition,将需要实现过渡动画的元素被transition组件进行包裹即可.语法:
复制链接

扫一扫