VUE组件及过滤器

组件

• 组件（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('')
                }
            }
        })