vue总结

过滤器
过滤器的定义
全局定义
Vue.filter(“过滤器的名字”,function (data（原数据）,…其他参数（format格式）){
return “最终显示的值”
})

私有定义
new Vue({
filters:{
// key： 过滤器的名字
// value: 处理函数
名字:function(data,…其他参数){
return '最终的结果"
}
}
})

过滤器的使用
通过管道符使用

{{name | 过滤器的名字 }}
// 可以有多个过滤器
{{name | 过滤器的名字 | 其他的过滤器的名字 | …}}
// 可以传参
{{name | 过滤器的名字(参数)}}

注意事项
过滤器用在插值表达式和属性绑定

自定义指令
定义指令
全局定义
Vue.directive(‘指令的名字’,{
bind(el,binding){
// el 绑定的dom
// binding 指令的基本信息
// name: 指令名
// rawName: 指令完整名字
// value: 指令的值
// expression: 表达式
// arg: 指令的参数
// modifiers: 指令的修饰符
// def 可以调用别的声明周期函数
},
inserted(el){},
update(el){},
})

私有定义
new Vue({
directives:{
//key 指令名
//value 指令的配置
名字:{
bind(el,binding){
// el 绑定的dom
// binding 指令的基本信息
// name: 指令名
// rawName: 指令完整名字
// value: 指令的值
// expression: 表达式
// arg: 指令的参数
// modifiers: 指令的修饰符
// def 可以调用别的声明周期函数
},
inserted(el,binding){},
update(el,binding){},
}
}
})
使用指令

八个生命周期函数：
beforeCreate: 创建之前，在这个阶段获取不到data上的数据，在这个阶段可以进行界面的重定向
created: 实例创建之后，在这个阶段可以获取到data上的数据了，这也是我们最早可以初始化数据的地方
beforeMount： 界面挂载之前，已经获取到了要渲染模板，但是还没渲染到界面上
mounted：界面挂载之后，这个界面已经渲染好了，如果有一些组件初始化依赖于界面的话，需要在这个阶段进行初始化
beforeUpdate： 更新之前， data已经更新，但是还没渲染到界面上。这里在界面更新之前，最后操作一下data。 注意的是，不能在异步操作中修改data
updated: 更新之后，界面已经和data一致了。 如果有些组件在dom更新之后需要重新渲染的话，可以在这里进行。
beforeDestroy: 界面销毁之前。 清除定时器，监听的事件。
destroyed： 界面销毁之后

接口请求
vue-resource
使用
引入脚步（放在Vue之后）
在实例中可以通过this.$http发送请求get请求this.$http.get(地址,配置).then(res=>{}).catch(err=>{})
post请求
// 默认是json
// 发送formdata的时候， 加一个配置emulateJSON: true
this.$http.post(地址,请求体,配置).then(res=>{}).catch(err=>{})

aixos
http://www.axios-js.com/zh-cn/docs/#axios-config

get请求：
axios.get(地址？).then(res=>{})
post请求
// json {}
// application/x-www-form-urlencoded URLSearchParams()
// multipart/form-data FormData()
const formdata = new FormData()
formdata.append(“参数名”,参数值)

axios.post(地址，请求体).then(res=>{})

Vue中的动画效果

使用动画的步骤
把需要添加动画的元素通过标签包裹起来
编写相应的样式
.v-enter
.v-enter-active
.v-enter-to
.v-leave
.v-leave-active
.v-leave-to
.v-enter {
opacity: 0;
transform: translateX(-100%);
}

    .v-enter-active,
    .v-leave-active {
        transition: all 1s ease;
        font-size: 50px;
    }

    .v-enter-to,
    .v-leave {
        opacity: 1;
        transform: translateX(0);
    }

    .v-leave-to {
        opacity: 0;
        transform: translateX(100%);
    }

通过v-if或者v-show可以切换动画的进场和离场

希望动画一开始就有
在transition上加个appear

给不同的标签设置不同的动画
给transition加个name的属性
编写指定的样式
.名字-enter
名字-enter-active
名字-enter-to
…

使用第三方的动画库
https://animate.style/

步骤
引入第三方动画的css

给transition上加上进场和离场的动画效果

欢迎来到天亮教育

enter-active-class leave-active-class 注意事项，使用animate的时候前面需要加上animate__animated

duration
指定动画的激活时长，就是指定动画激活的样式在标签上的持续时间

进场和离场一样
<transition appear enter-active-class=“animate__animated animate__bounceInLeft”
leave-active-class=“animate__animated animate__backOutRight”
duration=“1000”

进场和离场分别指定
<transition appear enter-active-class=“animate__animated animate__bounceInLeft”
leave-active-class=“animate__animated animate__backOutRight”
:duration="{enter:3000,leave:1000}"

动画的钩子函数
before-enter

enter

done 结束函数，调用它之后
after-enter

<transition @before-enter=“beforeEnter” @enter=“enter” @after-enter=“afterEnter”>

列表动画
如何使用
transition-group替代transition
v-for的每一项必须要加上key
通过tag设置标签
其他都和transition用法一样

列表的平滑切换
通过v-move结合v-leave-active让列表切换更平滑

.v-move{
transition: all .5s ease;
}
.v-leave-active {
position: absolute;
}
组件的概念
概念：
对一段前端UI界面的抽象。

从UI界面的角度出发，把之前界面按照功能拆分成一个个组件，方便重用。

好处
可复用，定义一次，可以多次调用
提高代码的可维护性
高内聚、 低耦合

组件化和模块化的区别
模块化： 从代码功能逻辑的角度触发。 把js代码按照功能拆成一个一个模块
组件化：从UI角度出发，把界面拆成了一个个组件

组件的使用
定义组件

1. 通过Vue.extend
   Vue.extend({
   template:’’,
   …
   })
2. 通过对象的方式定义组件
   

声明组件
全局声明 Vue.component(‘组件名’,组件配置)
私有声明
Vue里components的属性可以进行私有声明
key 组件名字
value 组件的配置

使用组件
当成标签的方式去使用
当名字是驼峰命名的时候，转成-连接

组件的切换
通过v-if或者v-show切换
通过vue内置component组件切换
is属性对应就是要显示的组件的名字

动画效果
和之前动画的使用方式一样，把要切换的组件用transition包裹起来就行了。

需要指定动画的切换顺序，希望先离开，在进入可以设置transition的mode

注意事项
data必须写成函数，函数必须返回对象
template只能有一个根标签
引用组件的时候，把驼峰变成-连接

父组件向子组件传参
为什么父组件要向子组件传参
因为我们组件每次引用的时候，大体结构是一样的，但是有些数据是不一样。这个时候这些不同的数据就需要在引用组件的时候传递进来。

如何声明组件的参数
可以通过props声明哪些参数是需要传递进来的

通过数组声明
const comp = {
props:[‘参数1’,‘参数2’]
}
通过对象声明，指定参数类型
const comp = {
props:{
参数1: String,
参数2: [String,Number,Array]
}
}
指定参数默认值
const comp = {
props:{
参数1: {
type:String,
default:""
},
参数2: {
type:[String,Number,Array],
default(){
return 默认值
}
}
}
}

如何使用参数
使用的时候和data一样使用就行了，可以通过this访问到这些参数，但是这个参数是只读的，不能修改它

引用的时候如何传递参数
通过标签的属性传递参数

<comp 参数名=“参数值” :参数名2=“参数值”>

注意事项
props参数是只读的，不能修改
传参的时候，如果驼峰命名要转成-连接
声明参数的时候如果是引用类型，默认值要用函数设置

子组件向父组件传递信息
在组件设计过程中，有的时候是需要向调用它的地方传递一些信息的，比如说点击了某些按钮，或触发了某些条件，我们可能需要通知父组件做出一些相应

在这里，我们子组件向父组件传递信息的时候，是通过事件方式的传递的。

在子组件中定义事件
通过$emit 去触发事件

this.$emit(“事件名字”,事件源数据)

在引用子组件的时候可以绑定一个数据
<son @事件名=“处理函数($event)”>

methods:{

处理函数(e){
// e就是事件源的数据，只要子组件一触发 这个事件 就会触发这个处理函数并且得到相应的数据
}
}

属性的覆盖
在引用子组件的时候，可以在标签上设置一些属性的，如id、name、class、style等

这些属性会直接设置到组件的根标签上
如果根标签上有重复的属性引用的时候设置的属性会覆盖之前的属性。
对于class和style不会进行覆盖，而是进行合并操作
如果想在组件中获取到父组件传递过来的属性的话，通过this.$attrs.属性名 获取。（这里不会获取到在props上设置的属性）

插槽作用
可以给组件传递一些html的数据。

怎么使用
我们在组件标签内部写的html代码都会被放到组件内部template里的位置。

如果希望把指定的html放到指定的位置(命名插槽)
书写方式
子组件

父组件

头部

设计组件的时候需要考虑的问题
组件的props（组件有哪些数据需要传递进来）
组件的slot（组件有哪些html需要传递进来）
组件的事件（组件有哪些事件）
做好一个组件，如果这个组件要被很多人用的化，我们需要提供一个使用文档。

做出来 -> 做好 -> 分享

ref做什么的？
获取dom
获取组件的实例

怎么用
给需要获取的dom或者组件添加ref属性，相当与给这个组件或者dom起了个名字
this.$refs.名字可以获取到这个dom或者组件
获取到组件之后
可以拿到组件的数据
可以调用组件的方法
可以理解为拿到了这个组件的this
…

路由的概念
后端路由：根据不同URL地址，服务端响应不同的资源。
前端路由：针对于单页面应用来说，根据不同的地址，展示不同的界面，称之为前端路由。

怎么使用路由
引入路由的js
创建路由实例。 new VueRouter
配置地址和组件的映射关系。 routes
把路由实例挂载到vue上。 Vue实例上有个router属性
指定路由到这个地址之后，组件显示的位置

登录组件

<script>
    const login = {
        template: "#login"
    }
</script>


<template id="register">
    <div>
        注册组件
    </div>
</template>

<script>
    const register = {
        template: "#register"
    }
</script>


<div id='app'>
    路由测试
    <!-- 5. 在界面上预留一个路由组件渲染的位置 -->
    <router-view></router-view>
</div>
<script>

    // 2. 创建路由的实例
    const router = new VueRouter({
        // 3. 配置组件和地址的映射关系
        routes: [
            {
                path: "/login",
                component: login
            },
            {
                path: "/register",
                component: register
            }
        ]
    })

    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
        // 4. 建立路由实例和vue实例的关系。 把路由挂载到vue实例上
        router
    })
</script>

路由重定向 redirect

const router = new VueRouter({
// 3. 配置组件和地址的映射关系
routes: [
{
path: ‘/’,
// 把当前地址，重定向指定地址
redirect: “/login”
},
{
path: “/login”,
component: login
},
{
path: “/register”,
component: register
}
]
})

路由的跳转
通过router-link设置跳转

to： 即将跳转的地址
tag： 渲染的标签

跳转传参
query参数：
如何传递
通过？拼接参数，多个参数用 &连接

如果获取这个参数
this.$route.query.参数名

params参数（url地址参数）
先定义在使用
// 使用params传参的化，首先要定义参数
const router = new VueRouter({
routes: [
{
path: ‘/’,
redirect: “/list”
},
{
path: “/list”,
component: list
},
{
// 定义了id和name两个参数
path: “/detail/:id/:name”,
component: detail
}
]
})

如何传参
url的指定位置，放置这些参数

/detail/10/名字

这个“10”就作为id

这个“名字”就作为name

如何获取这个参数
this.$route.params.参数名

区别
params必传，query不传也可以跳转
params使用前要先声明，query可以直接使用
params是通过this.$route.params获取，query通过this.$route.query获取的

路由跳转进阶
可以通过对象进行跳转
对象中有以下属性

path： 跳转的地址
name： 路由的名字
params： url参数
query： query参数（？后面拼接的参数）

{{item.name}}

// 通过name进行跳转

{{item.name}}

  const router = new VueRouter({
        routes: [
            {
                path: '/',
                redirect: "/list"
            },
            {
                path: "/list",
                component: list
            },
            {
                path: "/detail/:id/:name",
                component: detail,
              //   声明了name
                name: "detail"
            }
        ]
    })

路由的函数式跳转
当我们需要进行一些业务逻辑之后再跳转的时候，就可以用到函数式跳转

this.$router可以进行函数式跳转

this.$router.push()跳转到指定页面this.$router.replace() 这个会替换掉当前界面，当前界面就会从页面栈里被移除
this.$router.back()返回上一级this.$router.go() 跳转到指定的界面

路由的嵌套写法
对于我们的项目来说，我们大多数情况下，会有一些界面元素是所有界面都包含的，这个时候如果我们在每个界面都写这些元素是很麻烦的，也不利于维护，这个时候，我们就可以把这些页面抽象层界面布局。我们界面布局通过路由嵌套来实现的。

image.png

如何定义
在配置路由的时候通过children这个属性配置当前路由的子路由

const router = new VueRouter({
rotues:[
{
path:"/index",
component:indexLayout,
// 指定indexLayout的子路由
children:[
{
// 不加/代表相对路径，完整路径会拼上父路由的路径 /index/list
path:“list”,
// 这个组件会被渲染在父路由对应的组件的的位置
component:list
}

  ]
}

]

})
怎么访问到它
访问到 它之后，它被放在哪里了

命名路由
默认情况下一个地址只能对应一个组件，但是有时候可以需要一个地址对应多个组件，这个时候就要用到命名路由

component改成components
components对应的是一个对象
key是路由的名字
value是路由对应的组件
设置routerView的时候，可以给routerView指定名字了

激活路由的样式
被匹配到的路由的router-link上会有个router-link-active的样式，我们通过设置这个样式设置激活标签的样式
被完全匹配到的路由的router-link上会有router-link-exact-active的样式。
指定成特殊的样式
在实例化路由的时候配置
linkActiveClass
linkExactActiveClass

路由的元数据
可以给路由设置一些元数据的属性，当我们跳转到这个路由的时候就可以通过$route.meta拿到这些数据

如何设置
const router = new VueRouter({
routes:[
{
path:“地址”,
component:组件,
meta:{
元数据
}
}
]
})

怎么获取
this.$route.meta