Vue：动态组件、事件的发射、自定义指令、过滤器

最新推荐文章于 2023-09-23 08:12:33 发布

洪布斯

最新推荐文章于 2023-09-23 08:12:33 发布

阅读量727

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45631813/article/details/103688680

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

动态组件：

<body>
    <div id="app">
        <button @click="btnClick('com1')">首页</button>
        <button @click="btnClick('com2')">动态</button>
        <!-- 在模板中使用一个组件，可以直接使用组件名作为标签使用，
                也可以通过任一标签（一般使用component标签）+ is="组件名" 的形式使用 -->
        <!-- <com1></com1>
            <component is="com2"></component> -->

        <!-- 如果把is绑定到某个变量上，这个变量在多个组件名之间切换，可以实现动态切换组件的效果 -->
        <!-- <component :is="c"></component> -->

        <!-- 默认情况下，从组件1切换到组件2，组件1会被销毁，从组件2再切回到组件1会重新被创建； -->
        <!-- 如果不需要这种重新创建的效果，希望组件被切出时继续存在内存，切回重新使用原来的组件，
            那么需要把动态切换组件写在 keep-alive 标签中 -->
        <keep-alive>
            <component :is="c"></component>
        </keep-alive>
    </div>
</body>


<script src="vue.js"></script>
<script>
    var com1 = {
        template: "<div><h1>com1组件</h1><input></div>",
        mounted() {
            console.log("com1渲染完成");
        },
        destroyed() {
            console.log("com1销毁完成");
        },
    }

    var com2 = {
        template: "<div><h1>com2组件</h1><input></div>",
        mounted() {
            console.log("com2渲染完成");
        },
        destroyed() {
            console.log("com2销毁完成");
        },
    }

    var app = new Vue({
        data: {
            c: "com1"
        },
        methods: {
            btnClick(c) {
                this.c = c;
            }
        },
        components: {
            com1,
            com2
        }
    }).$mount("#app");
</script>

事件的发射：

<body>
    <div id="app">
        <p>这里展示的是第{{page}}页的内容</p>

        <hr>

        <!-- v-on指令除了可以直接监听系统事件之外，还可以监听子组件发射的事件
            子组件一旦发射了这个事件，父组件中绑定的函数就会调用 -->
        <!-- <pagtion :value="page" @input="pageChanged"></pagtion> -->
        <pagtion v-model="page" @input="page=arguments[0]"></pagtion>
    </div>
</body>


<script src="vue.js"></script>

<script id="com" type="text/html">
    <div>
        <button @click="previousClick">上一页</button>
        <span>当前页：{{value}}</span>
        <button @click="nextClick">下一页</button>
    </div>
</script>

<script>
    Vue.component("pagtion", {
        template: "#com",
        props: ["value"],
        methods: {
            // 子组件不能直接修改父组件的传值，如果子组件需要修改父组件的数据时，需要"通知"父组件让父组件自己修改。
            // 子组件不能给父组件传值，但是可以给父组件发射事件，通过发射事件通知父组件修改自己data中的某个数据。
            // this.$emit()组件对象用于给父组件发射事件（特别注意：不能给父组件的父组件发射事件）
            // 参数1：事件名  参数2、参数3……：事件所附加的参数 
            previousClick() {
                this.$emit("input", this.value - 1);
            },
            nextClick() {
                this.$emit("input", this.value + 1);
            }
        },
        created() {
            console.log(this.$el);
        },
        mounted() {
            console.log(this.$el);
        },
    });

    var app = new Vue({
        el: "#app",
        data: {
            page: 1
        },
        methods: {
            pageChanged(p) {
                console.log("我的page要发生改变了");
                this.page += p;
                if (this.page <= 1) {
                    this.page = 1;
                }
            }
        },
    });
</script>

自定义指令：

<body>
    <div id="app">
        <!-- vue中允许自定义指令，但是vue是基于组件的框架，对于页面功能的封装更多的是使用组件，
            只有对于页面原生元素的初始化设置，才写在指令中 -->
        <span v-drag>使用全局注册的指令</span>
        <br>
        <input v-focus type="text">
    </div>
</body>


<script src="vue.js"></script>
<script>
    // 全局注册一个指令
    // 参数1：指令的名字    参数2：指令的配置对象
    Vue.directive("drag", {
        // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
        bind() {
            console.log("bind");
        },
        // 当被绑定的元素插入到 DOM 中时调用（被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。）
        // 参数就是指令所在元素的原生标签元素对象
        inserted(el) {
            console.log("inserted");
            el.style.position = "relative";
            // 当前元素绑定鼠标摁下事件
            el.onmousedown = function (e) {
                // 定义变量，保存上一次鼠标事件的坐标
                var lastPointX = e.pageX;
                var lastPointY = e.pageY;
                // 给document绑定鼠标移动事件
                document.onmousemove = function (e) {
                    var offsetX = e.pageX - lastPointX;
                    var offsetY = e.pageY - lastPointY;
                    // 获取el元素坐标的left和top
                    var left = el.style.left ? el.style.left : 0;
                    var top = el.style.top ? el.style.top : 0;
                    // 添加增量
                    left = parseInt(left) + offsetX + "px";
                    top = parseInt(top) + offsetY + "px";
                    // 重新赋值给el标签
                    el.style.left = left;
                    el.style.top = top;
                    // 更新上次的点
                    lastPointX = e.pageX;
                    lastPointY = e.pageY;
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                }
            }
        },
        update() {

        }
    });

    var app = new Vue({
        el: "#app",
        // 局部注册指令
        directives: {
            focus: {
                inserted(el) {
                    console.log(el);
                    el.focus()
                }
            }
        }
    });
</script>

过滤器：

<body>
    <div id="app">
        <input type="text" v-model.number="money">
        <p>{{money | currency("￥",2) | test }}</p>
    </div>
</body>


<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            money: 89999
        },
        methods: {

        },
        computed: {

        },
        // Vue.js2.0已经移除了内置过滤器
        // 使用filters来自定义过滤器
        filters: {
            // 每一个过滤器都是一个过滤函数，第一个参数是要过滤的值，从第二参数开始是过滤器使用时传递的参数，函数需要返回过滤后的值。
            currency: function (v, sym = "$", fixed = 0) {
                // 在vue中不建议过滤器参与业务逻辑，所以过滤函数中不能通过this访问组件对象（this=window）
                // console.log(this);
                v = !v ? 0 : v;
                // 保留小数位
                var n = v.toFixed(fixed);
                // 隔三位加逗号 
                var start = fixed == 0 ? 0 : fixed + 1;
                var n = n.split("").reverse();
                for (var i = start + 3; i < n.length; i += 4) {
                    n.splice(i, 0, ",");
                }
                return sym + n.reverse().join("");
            },
            test(v) {
                return v + "哈哈"
            }
        }
    });
</script>

洪布斯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue：动态组件、事件的发射、自定义指令、过滤器

动态组件：<body> <div id="app"> <button @click="btnClick('com1')">首页</button> <button @click="btnClick('com2')">动态</button> <!-- 在模板中使用...
复制链接

扫一扫