Vue基础（一）ref,component,keepalive,solt，transtion，过滤器filter

认识ref

• ref在标签中绑定可以获取标签信息；绑定在子组件中可以获取子组件的整个子组件，可以查看或改变子组件的元素

<template>
  <div> <Chird ref='childcom' ></Child> </div>
</template>

<script>
  export default{
   data(){},
   methods:{
     ChangeClild(){
       this.$refs.childcom.num++ ; //改变子组件num
    }
   }
   
 }

</script>

Vue组件和keepalive

• component组件标签有is属性；is显示组件；

<component :is='who'></component>
// 指定哪个组件显示

• keepalive组件：当切换组件时，keepalive中会被缓存，keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存
• keepalive的生命周期

activated 当 keepalive 包含的组件再次渲染的时候触发
deactivated 当 keepalive 包含的组件销毁的时候触发

keepalive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

• include包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
• exclude排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
• max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

// exclude的权限要大于include ；
// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive include="[a,b]" exclude="b" max='5'> 
  <component />
</keep-alive>

• 如果想要通过路由缓存，必须在路由中设置mate属性

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不会被缓存的视图组件，比如 Profile！ -->
</router-view>

这里需要注意的是，如果你是通过这种设置meta的方式创建keepAlive的话，keepAlive组件一旦被创建，就不会被销毁了，如果你想通过改变meta的方式销毁keepAlive,这样做是不可行的。
借鉴与文章

solt插槽

• 当你想在组件标签内部放置一个元素，并且让此元素有作用，就是插槽

//父组件
//  像这样在父组件中，在组件标签内部放一个元素 ；正常他是不会显示
 <child>
  <div> 我可以显示么</div>
 </child>

// 子组件>  这时放一个插槽父组件中的<div> 我可以显示么</div>就可以显示
<div>
   <div>我是child</div>
    <solt></solt>
</div>

• 如果需要插槽插到对应位置；插槽中需要加name属性，而内容标签要加solt属性

 <child>
  <div solt='a'> 我可以显示么</div>
  <div solt='b'> 我在上面显示么</div>
 </child>


// 子组件
<div>
    <solt name='b'></solt>
    <div>我是child</div>
    <solt name='a'></solt>
</div>

• vue最新版插槽的写法有所改变但是不论是v-solt还是#写法都必须在<template>中写；不可以写在其他标签；而之前版本可以

 <child>
   <template v-solt:a>
      <div> 我可以显示么</div>
   </template>
   <template  #b>   // 这种# 或者v-solt的写法都是对的
     <div> 我在上面显示么</div>
   </template>
 </child>


// 子组件
<div>
    <solt name='b'></solt>
    <div>我是child</div>
    <solt name='a'></solt>
</div>

transtion 过渡

• 为啦提高用户使用，vue提供transtion标签；他根据标签的变化来显示过渡；
• 实现原理其实是根据虚拟DOM对比来实现；当模拟的虚拟dom发生变化来给transtion标签添加属性name

// 首先我们要会css3语法
// CSS
.my-enter-active{
animation:ccc 1s;
}
.my-leave-active{
 animation:ccc 1s reverse;
}
@keyframes ccc{
 0%{
  transform:translateX(200px)
  opacity:0
  }
 100%{
  transform:translateX(0)
  opacity:1
 } 
}

// 页面
 // 这里name一定对应上边样式；
 //而且样式类名必须遵守 xxx-enter-active；xxx-leave-active
 <transtion  name='my'  appear>
// appear属性：是开始就要执行transtion过渡
    <div v-show='isShow'> 271 </div>  // isShow是布尔值
 </transtion>

• 如果想要控制多个组件的显示隐藏，v-if和v-else是个不错的选择，需要给每个元素提供不同的key让vue进行区分

过滤器filter

• vue中的过滤器分为两种：局部过滤器和全局过滤器
• 过滤器定义方法{{ src|srcfilter }}通过管道符来定义

 // 挂载到vue上是全局定义，这是无参数
Vue.filter（'srcfilter',function(src){  
    return src.toString()
}）
// 有参数,**页面中{{ src|srcfilter('asd','hhh') }}**
Vue.filter（'srcfilter',function(src,t1,t2){  
    return src.toString()
}）

// 局部定义就是在组件中与data函数同级下定义
methods:{},
//定义私用局部过滤器。只能在当前 vue 对象中使用
filter:{
     srcfilter(src){  
      return src.toString()
}
 }

• 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

• 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

如有错误请指出，谢谢