Vue的组件,过滤器，自定义

自定义属性

 <div id="app">
        <input type="text" v-focus="{background:'yellow'}">
        <!-- <input type="text" v-bg>
        <input type="text" v-bg>
        <div style="width: 100px;height: 30px;border:1px solid #ccc;" v-bg>

        </div> -->
        <!-- 元素身上使用驼峰命名的属性 fontSize 在浏览器编译元素身上的属性的时候会转化为小写fontsize
        导致两者的名字不一致 从而作用不生效 -->
        <p v-fontsize="{fontSize:'50px'}" v-sty="{background:'red',color:'yellow'}">我是kw47的卷王</p>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        /* 全局自定义指令 简写方式 （不适用于focus()方法 ）*/
        /* 定义指令要方法实例化Vue对象的前面 */
        // Vue.directive('focus',function(el){
        //     /* 回调的第一个参数就是元素本身 */
        //     console.log(el)
        //     el.style.background="red"
        // })

        /* 全局自定义指令 全面的写法 */
        Vue.directive('focus',{
            /*  当绑定元素插入到 DOM 中 */
            inserted:function(el,binding){
                console.log(binding)
                el.focus();
                el.style.background = binding.value.background;
            }
        })

       
        /* 全局定义一个自定义指令v-focus 让加上v-focus的input框可以 自动获取焦点 */
        
        new Vue({
            el:"#app",
            /* 局部的自定义指令 */
            directives:{
                fontsize:{
                    inserted:function(el,binding){
                        console.log(binding)
                        el.style.fontSize = binding.value.fontSize;
                    }
                },
                sty(el,binding){
                    el.style.color = binding.value.color;
                    el.style.background = binding.value.background;
                }
            }
        })
        /* 使用局部自定义指令v-sty 实现 你传入的color background 加了自定义指令的元素能变成相对应的样式 */

组件

• 组件（Component）的概念：组件即自定义控件
• 组件的用途：组件能够封装可重用代码，扩展HTML标签功能
• 组件的本质：自定义标签
• 组件的分类
• 全局组件
• 作用域：不同作用域内均可使用
• 局部组件
• 作用域：只在定义该组件的作用域内可以使用
• 注意：
• 组件和Vue实例类似，需要注册后才可以使用 组件最好都要用div包裹一下，不容易出错，

<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"
        })

过滤器

<!-- 使用v-属性 style设置display:none 实现渲染优化 -->
    <div id="app" v-cloak>
        <!-- | 过滤器的管道符 -->
        <h1>{{'你是个大聪明'|fn('宝贝')|fn('亲爱的')}}</h1>
        <h1>{{'大聪明'|str('金牌讲师')}}</h1>
        <h1>{{msg|dao}}</h1>
    </div>
    <script src="./vue.min.js"></script>
    <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('')
                }
            }
        })