自定义指令

1. 全局定义

    // Vue.directive('focus',function(el){
    //     /* 第一个参数为指令名，第二个为回调其第一个参数el就是元素本身 */
    //     console.log(el)
    //     el.style.background="red"
    // })
    
   

2. 局部定义

       new Vue({
        el:"#app",
        /* 局部的自定义指令 */
        directives:{
            fontsize:{
            //inserted : 当绑定元素插入到DOM中：=>()
                inserted:function(el,binding){
                    console.log(binding)
                    el.style.fontSize = binding.value.fontSize;
                }
            },
    })
   

3. 过滤器

   格式：{ { 内容|fn() } }

   '|'管道符左侧为内容，右侧为方法（可以传值），用方法第二个参数接受

<h1>{{'我真的是卷王，我24小时坐在电脑旁'|fn('宝贝')|fn('亲爱的')}}</h1>
 <script>
        /* 全局过滤器 */
        Vue.filter('fn',function(v,s){
            /* v就是管道符左边的数据 */
            // console.log(v.indexOf('，'))
            // return v.substring(0,v.indexOf('，'))
            return v+s;
        })

        /* 利用过滤器 把 hello 变成 olleh */
        new Vue({
            el:"#app",
            data:{
                msg:'hello'
            },
            /* 局部过滤器 */
            filters:{
                str:function(v,s){
                    return v + s;
                },
                dao:function(v){
                    return v.split('').reverse().join('')
                }
            }
        })
    </script>

4. 组件

   1. 全局组件

<div id="app">

        <!-- 组件名是大写 在浏览器编译的时候会转成小写 导致找不到相应的组件
        可以全变成小写 中间加-来解决 -->
        <div>
            <child-a />
        </div>
        <!-- 所有的组件都需要使用一个div来包裹 -->
        <div>
            <child-b />
        </div>
    </div>

    <!-- <template id="ChildA">
        <div>
            <h1>我是ChildA</h1>
        </div>
    </template> -->
    <!-- 模板的第二种写法 使用template加id -->
    <template id="ChildB">
        <!-- template里面也需要使用div来包裹一下 -->
        <div>
            <h1>我是ChildB</h1>
            <h1>我是ChildB</h1>
            <h1>我是ChildB</h1>
            <h1>我是ChildB</h1>
        </div>
    </template>
    <script src="./vue.min.js"></script>
    <script>
        /* 一定要写在new Vue的前面 */
        /* 全局组件 */
        Vue.component('ChildA',{
            /* 模板的第一种写法 直接写 */
            template:'<h1>我是ChildA</h1>'
        })
        Vue.component('ChildB',{
            template:'#ChildB'
        })
        new Vue({
            el: "#app"
        })