vue的基础用法（4）

过滤器的使用

是在不改变原始数据的情况下 修改数据的显示形式
过滤器可以是串联使用的
当数据发生改变的时候 过滤器就会重新计算
过滤器使用的时候 使用"|"连接 叫做管道符

<div id="app">
        <input type="text" v-model="msg">
        <h2>{{msg}}</h2>
        <h2>{{msg| addStr| addStr2}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>


    const app = new Vue({
        el: "#app",
        data: {
            msg: "你好吗？"
        },

        //过滤器
        filters: {
            addStr(value) {
                console.log(value);
                return value + "吃了吗？"
            },
            addStr2(value) {
                console.log(value);
                return value + "吃*把你"
            }
        }
    })
</script>

vue组件的介绍

1.组件是可复用的vue实例
2.他带有一个名字 我们注册的时候可以自定义
3.组件的使用 直接把组件的名称当做标签来使用
4.组件的命名也不能有大写字母 如果多个单词 使用 - 连接
5.组件的使用的时候 页面中必须有一个顶级的vue实例 我们直接把组件名称作为标签放在顶级vue对象里面
6.组件的取值 采用的是组件内部的数据 不能往上找，也不能往下找

<sb></sb>
    <div id="app">
        <sb></sb>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component("sb", {
        data() {
            return {
                info: "天好热"
            }
        },
        template: "<h2>{{info}}</h2>"
    })
    const app = new Vue({
        el: "#app",
        data: {
            info: "欢迎光临"
        }
    })
    </script>

模板的抽取

<!-- 开发环境版本，包含了有帮助的命令行警告 jquery.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 抽取组件模板 -->
<script id="com" type="text/html">
    <div>
        <h2>计数器--{{num}}</h2>
        <input type="button" value="点我添加" @click="num++">
    </div>
   
</script>

<div id="app">
        <jishuqi></jishuqi>
        <jishuqi></jishuqi>
        <jishuqi></jishuqi>
        <jishuqi></jishuqi>
    </div>
<script>
    Vue.component("jishuqi", {
        data() {
            return {
                num: 0
            }
        },
        template: "#com"
    })
    const app = new Vue({
        el: "#app",
    })
</script>