2020-09-11，过滤器、过渡动画、组件、vue-cli脚手架的安装使用

内容：过滤器、过渡动画、组件、vue-cli脚手架
内容还是比较重要的，脚手架让我们开发更加方便与整洁

日期：2020-9-11

一、过滤器

作用：是对页面中展示的数据进行处理。

1.局部定义

new Vue({
	el:
	....
	filters:{
		过滤器名称(形参){
			业务逻辑
			return 处理结果;
		},
		过滤器名称N(形参){
			业务逻辑
			return 处理结果;
		},
	}

})

在挂载点内通过管道符“|”来使用定义好的过滤器

<标签名>{{ 变量名 | 过滤器名称 }}</标签名>

管道符左边的值会默认作为过滤器的第一个形参进行传递，然后在过滤器中对数据进行处理并返回结果即可。

2.全局定义

当前页面中的所有vue实例都可以使用的过滤器用全局的方式进行定义。

语法：

Vue.filter('过滤器名称1',function(形参){...return 结果})
Vue.filter('过滤器名称N',function(形参){...return 结果})
new Vue({})
...

注意：全局定义的过滤器，要在所有的vue实例化之前进行定义。

3.过滤器传参

管道符左边的值会默认作为过滤器的第一个形参进行传递，如果想要传递额外的其他参数，则需要在管道符右边使用过滤器的后面加上括号进行其他参数的传递。

定义过滤器

Vue.filter('过滤器名称',function(形参1,形参N){...return 结果})

使用过滤器

<div id="app">
	变量名 | 过滤器名称(实参N...)
</div>

二、过渡动画

在v-if、v-show、动态组件切换，可以给指定的标签添加上transition之后可以添加指定的过渡动画效果。

1.内置类名

进入

​ 进入前 动画名-enter

​ 进入中 动画名-enter-acitve

​ 进入后 动画名-enter-to

离开

​ 离开前 动画名-leave

​ 离开中 动画名-leave-active

​ 离开后 动画名-leave-to

只要给指定的元素用transition标签包裹起来之后，vue会自动的嗅探元素的状态变化，匹配到不同的类名，从而使用不同类名对应的样式。

(1)匿名动画

示例代码：

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: #f00;
    }
    /* 进入状态 离开状态 */
    .v-enter,.v-leave-to{
    	opacity: 0;
    }
    .v-enter-active,.v-leave-active{
    	transition: all 4s;
    }
    .v-enter-to,.v-leave{
    	opacity: 1;
    }
</style>
<div id="app">
    <transition>
    	<div class="box" v-show="isshow"></div>
    </transition>
    <button @click="isshow=!isshow">切换</button>
</div>

实际开发中，只会用进入前、离开后，进入中、离开中

(2)具名动画

可以给transition标签设置一个name属性，来区分不同的过渡动画效果

进入

​ 进入前 name属性值-enter

​ 进入中 name属性值-enter-acitve

​ 进入后 name属性值-enter-to

离开

​ 离开前 name属性值-leave

​ 离开中 name属性值-leave-active

​ 离开后 name属性值-leave-to

2.第三方插件-animate.css

(1)下载animate.css或者直接引入

npm i animate.css

<link rel="stylesheet" href="../../node_modules/animate.css/animate.css"/>

或者

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

(2)使用animate.css

<div id="app">
    <button @click="isshow=!isshow">切换</button>
    <!-- enter-active-class 设置元素进入时的动画 -->
    <!-- leave-active-class 设置元素离开时的动画 -->
    <transition 
        enter-active-class="animate__animated animate__bounceIn"
        leave-active-class="animate__animated animate__bounceOutDown"
    >
    	<div class="box" v-show="isshow"></div>
    </transition>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
        	isshow:true
        }
    })
</script>

三、组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。

1.局部注册

new Vue({
	el...
	components:{
		组件名称:{
			template:"组件的模板内容"
		}
	}
})

使用：

在挂载点内以<组件名>这样的方式来使用组件，在挂载点内组件名称的地方，vue解析之后就会把组件的template模板中的内容展示出来。

2.全局注册

局部注册的组件仅能在当前实例的挂载点内使用，如果需要在多个vue实例中使用同一个组件，就需要使用全局注册的方式来注册这个组件。

语法：

Vue.component('组件名',{template:"模板内容"})
new Vue({})
new Vue({})
...

3.注意事项

Do not use built-in or reserved HTML elements as component id: div

1.不能使用系统内置的标签名作为组件名

2.组件名称使用系统内置的名字全大写也不行，浏览器会把大写字母解析成小写

Unknown custom element: - did you register the component correctly?

3.组件未正确的注册就使用了

如果组件名称中确实包含大写字母，在使用组件时，要把大写字母换成-小写字母

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

4.组件的template中只能有一个根标签。

4.template的使用

vue中提供了一个template标签，它和其中的内容不会被浏览器直接解析出来。

因为组件的template属性使用字符串方式进行编写，没有语法提示，编写起来不方便且不容易维护，所以我们可以把template属性和template标签结合起来使用。

<div id="app">
        <one></one>
        <two></two>
    </div>
    <template id="one">
        <div>
            <h2>这是one组件的内容</h2>
            <p>这是一个段落</p>
        </div>
    </template>
    <template id="two">
        <div>
            <h3>这是two组件</h3>
        </div>
    </template>
    <script>
        new Vue({
            el:"#app",
            components:{
                one:{
                    // 告知当前组件的template属性使用哪个template标签中的内容作为模板内容
                    template:"#one"
                },
                two:{
                    template:"#two"
                }
            }
        })
    </script>

5.组件中的data要是一个函数

受数据类型的影响，对象类型数据复用时，会影响数据的变化，在组件中定义data时，不能使用对象类型，要使用函数，在函数中返回一个新的对象，这样在复用组件时，每使用一次就会返回一个新的对象空间来存储数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template的使用</title>
    <script src="../../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 直接使用vue根实例上的数据 -->
        <p>数量：{{ num }}<button @click="num++">增加</button></p>
        <p>数量：{{ num }}<button @click="num++">增加</button></p>
        <p>数量：{{ num }}<button @click="num++">增加</button></p>
        <hr>
        <!-- 复用组件 -->
        <v-count></v-count>
        <v-count></v-count>
        <v-count></v-count>
    </div>
    <template id="count">
        <p>数量：{{ num }}<button @click="num++">增加</button></p>
    </template>
    <script>
        var vCount = {
            template:"#count",
            data(){
                return{ num:100 }
            }
        }
        new Vue({
            el:"#app",
            components:{ vCount},
            data:{ num:100 }
        })
    </script>
</body>
</html>

四、vue-cli脚手架

4.4+

2.9.6

1.安装

(1)webpack

npm i webpack -g

(2)vue-cli

npm i vue-cli -g

2.初始化项目

进入一个指定的目录，最好不是c盘

vue init webpack 项目名称

项目名称不要包含中文和空格

初始化过程:

Project name (mydemo)  项目名称
Project description (A Vue.js project) 项目描述
Author (ming <fanmingjian@offcn.com>) 项目作者
Vue build (Use arrow keys) 项目运行方式
> Runtime + Compiler: recommended for most users
Install vue-router? (Y/n) 是否安装vue路由 n
Use ESLint to lint your code? (Y/n) n
Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM

3.运行项目

进入项目根目录，执行命令

npm run dev

4.项目运行流程

index.html

src/main.js

src/App.vue

src/自定义组件