vue小东西

1.自定义指令：（有局部和全局的俩种方式）
    eg:<h1 v-bg="'red'">点我变红色</h1>
    directive：{
        bg:function(el,binding){
            console.log(el)     //el指的是，挂在自定义指令的标签元素
            el.style.backgroundColor = binding.value    //value指的是自定义指令内绑定的值
        }
    }

2.插槽：slot(默认有一个默认的插槽名 default slot) 插槽相当于一个占位符，在组建内给自己占一个位置，如果要来随时可以来，位置永远在
eg://hello是组件名，hello这个组件内有三个插槽，分别是name为h,p,f的三个slot, 在使用插槽的时候可以在任何标签使用，
##使用方法为 <标签名 slot="(在组件内定义的插槽的名字)"></标签名>
eg:
    <hello>
       <header slot="h">header</header>
       <p slot="p"><hello></hello></p>
       <footer slot="f">footer</footer>
    </hello>
输出结果：
    header                  //slot - name - h
    hello component         //slot - name - p
    hello component         //这个输出是组件内没有slot的输出
    footer                  //slot - name - f
------------------------------------------------------------------
let hello = {
    // default slot 只有一个default slot 使用命名
    template:"<div><slot name='h'></slot><h1>hello component</h1><slot name='p'></slot><slot name='f'></slot></div>",
}
3.keep-alive(组件的缓存)
eg: (在data内定义一个公共的值flag，并且在components里面注册俩个组件one和two，
通过点击事件将（one或two进行传递给flag, 用keep-alive特有的"is"进行判断，
is后面的值为组件名， :is="flag" [flag此时为one或two,为俩组件名])
#-----------------------------------------------------------------
<a @click="toggle('one')">one</a> || <a @click="toggle('two')">two</a>
<keep-alive exclude="one">
    <div :is="flag"></div>
</keep-alive>

注：被坑了半天的include和exclude的值应该是keep-alive中的组组件中定义的name。。
   nclude 使该标签作用于所有name属性的值跟此标签 include的属性值一致的vue页面
   exclude 使该标签不作用于所有iname属性的值跟此标签 exclude的属性值一致的vue页面