Vue过滤器，自定义指令，组件

Vue过滤器(全局过滤器，局部过滤器)

注意(filter全局，filters局部)

            <div id="box" v-cloak>
                <!-- | 过滤器的管道符 -->
                <!-- 可以传参，也可以不传 -->
                <p>{{'安达,市多'|fn('--嗷嗷')}}</p>
                <p>{{'阿萨德'|str('--紧迫')}}</p>
            </div>
            <script src="./node_modules/vue/dist/vue.min.js"></script>
            <script>
                /* 全局过滤器 */
                Vue.filter('fn',function(v,s){
                    /* v就是管道符左边的数据 */
                    /* s就是管道符右边的数据 */
                    return v.substring(0,v.indexOf(','))+s
                })

                new Vue({
                    el:'#box',
                    /* 局部过滤器 */
                    filters:{
                        str:function(v,s){
                            拼接管道符左边和右边的数据 return出去
                            return v+s
                        }
                    }
                })
            </script>
            
            返回结果
            console.log
            安达--嗷嗷
            阿萨德--紧迫

Vue组件

             <div id="box">
                <!-- 组件名是大写在浏览器编译的时候会转成小写导致找不到相应的组件 -->
                <!-- 可以都小写，中间加 - 解决 -->
                <!-- 所有组件都要用一个div包裹 -->
                <div>
                    <child1 /></child1>
                </div>
                <div>
                    <child2/></child2>
                </div>
            </div>
            
            <!-- 模板的第二种写法 使用template加ID -->
            <template id="child2">
                <div>
                    <h1>我是chilid 2</h1>
                    <h1>我是chilid 2</h1>
                </div>
            </template>
            
            <script src='./node_modules/vue/dist/vue.min.js'></script>
            <script>
                ☆使用组件必须写在实例化Vue之前
                /* 全局组件 */
                        /* 模板第一种写法 */
                        child1就是标签名
                Vue.component('child1',{
                    template:`<h1>我是chilid 1</h1>`
                })
                
                Vue.component('child2',{
                    和template ID对应
                    template:"#child2"
                })
                new Vue({
                    el:'#box'        
                })
            </script>

Vue自定义指令

            <div id="app">
                <input type="text" v-focus="{background:'red'}">
                <p v-fontsize="{fontSize:'50px'}">123</p>
                <p v-sty="{color:'red',background:'yellow'}" >
                   abc
                </p>
            </div>
            <script src="./node_modules/vue/dist/vue.min.js"></script>
            <script>
                 /* 全局自定义属性（简写方式），不适用于foucs()方法 */
                 /* 定义指令要方法实例化vue对象的前面 */
                 /* 回调的第一个参数就是元素本身 */
                 /* Vue.directive('focus',function(el){
                     el.style.width='100px'
                     el.focus()  
                 }) */

                 /* 当绑定元素插入到DOM中 */
                 Vue.directive('focus',{
                    inserted:function(el,bind){
                        console.log(bind);
                        el.focus()
                        el.style.background=bind.value.background
                    }
                 })

                 /* 局部自定义属性 */
                new Vue({
                    el:'#app',
                    directives:{
                        fontsize:{
                            inserted:function(el,bind){
                                console.log(bind);
                                el.style.fontSize=bind.value.fontSize
                            }
                        },
                        sty:{
                            inserted:function(el,binding   ){
                                el.style.color=binding.value.color
                                el.style.background=binding.value.background
                            }
                        }
                    }
                })



            </script>