vue——进阶(slot插槽，自定义指令，过滤器)

2024-03-06 15:32:50

一、slot插槽

#指定组件的样式，只用组件的功能
哪里需要就在哪里放插槽： <slot></slot>
1 插槽
    -在组件child中预留插槽
        <div>
            <slot></slot>
            <hr>
            我是首页
            <slot></slot>
            <input type="text">
        </div>
    -父组件中更使用
        <child> 标签，数据</child>
2 具名插槽
        <div>
            <slot name='a'></slot>
            <hr>
            我是首页
            <slot name='b'></slot>
            <input type="text">
        </div>
     -父组件中更使用
        <child> 
        <div slot='a'>放到a中</div>
        <div slot='b'>放到b中</div>
        </child>

1.1 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
//不使用插槽的话，child1里的内容1 2 3 4 显示不出来，哪里写了插槽就在哪里显示

    <child1>
        <ul>
            <li v-for="i in 4">{{i}}</li>
        </ul>
    </child1>
    <hr>
    <child2></child2>
    <hr>
    <child3></child3>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#box',
        data: {
            who: 'child1'
        },
        components: {
            child1: {
                template: `
                <div>
                <slot></slot>
                <hr>
                我是首页
                <slot></slot>
                </div>
                `,

            },
            child2: {
                template: `
                <div>我是商品 </div>
                `,

            },
            child3: {
                template: `
                <div>我是订单 </div>
                `,

            }
        }

    })

</script>
</html>

1.2插槽小案例（一个组件通过插槽控制另一个组件的显示隐藏）

代码演示：点击隐藏child2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <child1>
        <button @click="isShow=!isShow">点我隐藏child2</button>
    </child1>
    <hr>
    <child2 v-if="isShow"></child2>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        components: {
            child1: {
                template: `

                <div>
                <slot></slot>
                </div>
                `,

            },
            child2: {
                template: `
                <div>
                 <ul>
                 <li v-for="i in 4">{{i}}</li>
                </ul>
                 </div>
                `,
            },
     }

    })

</script>
</html>

1.3 具名插槽（指定标签放到组件的某个插槽中）

代码演示：点击隐藏child2，通过名字来指定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <child1>
        <button @click="isShow=!isShow" slot="button1">点我隐藏child2</button>

        <div slot="div1">我是div</div>
    </child1>
    <hr>
    <child2 v-if="isShow"></child2>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        components: {
            child1: {
                template: `

                <div>
                <slot name="button1"></slot>
                <hr>
                <slot name="div1"></slot>
                </div>
                `,

            },
            child2: {
                template: `
                <div>
                 <ul>
                 <li v-for="i in 4">{{i}}</li>
                </ul>
                 </div>
                `,

            },
     }

    })

</script>
</html>

二、自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

    <title>Title</title>
</head>
<body>

<div id="box">

    <!--    <div v-mystyle> 我是div</div>-->
    <!--    <p v-mystyle> 0pppp</p>-->
    <!--    <p > sfasfsdafsd </p>-->

    <div v-mystyle="'green'"> 我是div</div>
    <div v-mystyle="'red'"> 我是div</div>

    <div v-mystyle="color"> 我是div</div>

</div>


</body>
<script>
    //自定义指令,不需要写v使用的时候，加上v-名字

    // Vue.directive('mystyle', {
    //     inserted() {  //在标签上使用这个指令，就会触发inserted的执行
    //         console.log('我执行了')
    //     },
    // })
    //只要使用了我的指令，背景就变红色
    // Vue.directive('mystyle', {
    //     inserted(ev) {  //ev就是dom对象
    //         ev.style.background='red'
    //     },
    // })

    //只要使用了我的指令，背景就变成我传入的颜色
    Vue.directive('mystyle', {
        inserted(ev, color) {  //ev就是dom对象
            console.log(ev)
            console.log(color.value)
            ev.style.background = color.value
        },
        update(el, input) {
            el.style.background = input.value

        }
    })


    var vm = new Vue({
        el: '#box',
        data: {
            color: 'red'
        },
    })

</script>
</html>

三、过滤器

过滤出电影里的内容

json数据：film.json

{
  "coming": [
    {
      "id": 1240838,
      "haspromotionTag": false,
      "img": "http://p1.meituan.net/w.h/movie/38dd31a0e1b18e1b00aeb2170c5a65b13885486.jpg",
      "version": "",
      "nm": "除暴",
      "preShow": false,
      "sc": 8.6,
      "globalReleased": true,
      "wish": 76513,
      "star": "王千源,吴彦祖,春夏",
      "rt": "2020-11-20",
      "showInfo": "今天50家影院放映79场",
      "showst": 3,
      "wishst": 0,
      "comingTitle": "11月20日 周五"
    },
    {
      "id": 1228788,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/w.h/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg",
      "version": "",
      "nm": "一秒钟",
      "preShow": false,
      "sc": 8.6,
      "globalReleased": true,
      "wish": 54493,
      "star": "张译,刘浩存,范伟",
      "rt": "2020-11-27",
      "showInfo": "今天11家影院放映12场",
      "showst": 3,
      "wishst": 0,
      "comingTitle": "11月27日 周五"
    },
    {
      "id": 1358968,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/w.h/movie/d33858dbfc207da3b36c0dc7fff7a8bb2028677.jpg",
      "version": "",
      "nm": "汪汪队立大功之超能救援",
      "preShow": false,
      "sc": 8.3,
      "globalReleased": true,
      "wish": 24833,
      "star": "杨鸥,韩娇娇,李敏妍",
      "rt": "2020-11-13",
      "showInfo": "今天5家影院放映7场",
      "showst": 3,
      "wishst": 0,
      "comingTitle": "11月13日 周五"
    },
    {
      "id": 345809,
      "haspromotionTag": false,
      "img": "http://p1.meituan.net/w.h/moviemachine/7c4ba9633635503044a8f8fb6426aa8d416264.jpg",
      "version": "v2d imax",
      "nm": "隐形人",
      "preShow": false,
      "sc": 8.4,
      "globalReleased": true,
      "wish": 9894,
      "star": "伊丽莎白·莫斯,奥利弗·杰森-科恩,阿尔迪斯·霍吉",
      "rt": "2020-12-04",
      "showInfo": "今天21家影院放映30场",
      "showst": 3,
      "wishst": 0,
      "comingTitle": "12月4日 周五"
    },
    {
      "id": 1330790,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/w.h/movie/88e54f3e670789ba1f08e48a5f1170c1188102.jpg",
      "version": "",
      "nm": "明天你是否依然爱我",
      "preShow": false,
      "sc": 0,
      "globalReleased": false,
      "wish": 217699,
      "star": "杨颖,李鸿其,黄柏钧",
      "rt": "2020-12-24",
      "showInfo": "2020-12-24 下周四上映",
      "showst": 4,
      "wishst": 0,
      "comingTitle": "12月24日 周四"
    },
    {
      "id": 1277751,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/w.h/movie/303c2e671cc4df875c151d688ecbd8962085989.jpg",
      "version": "v2d imax",
      "nm": "赤狐书生",
      "preShow": false,
      "sc": 7.7,
      "globalReleased": true,
      "wish": 177525,
      "star": "陈立农,李现,哈妮克孜",
      "rt": "2020-12-04",
      "showInfo": "今天26家影院放映43场",
      "showst": 3,
      "wishst": 0,
      "comingTitle": "12月4日 周五"
    },
    {
      "id": 1225578,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/w.h/moviemachine/cf7d6942f2aa9189cce20519b490b6b1879487.jpg",
      "version": "",
      "nm": "野性的呼唤",
      "preShow": false,
      "sc": 9.2,
      "globalReleased": true,
      "wish": 14703,
      "star": "哈里森·福特,丹·史蒂文斯,凯伦·吉兰",
      "rt": "2020-11-13",
      "showInfo": "今天暂无场次",
      "showst": 3,
      "wishst": 0,
      "comingTitle": "11月13日 周五"
    },
    {
      "id": 1302281,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/w.h/moviemachine/1d2b4985d0187b437d41a73994ba2e191607376.jpg",
      "version": "",
      "nm": "奇妙王国之魔法奇缘",
      "preShow": true,
      "sc": 0,
      "globalReleased": false,
      "wish": 20309,
      "star": "卢瑶,张洋,陈新玥",
      "rt": "2020-12-26",
      "showInfo": "2020-12-26 下周六上映",
      "showst": 4,
      "wishst": 0,
      "comingTitle": "12月26日 周六"
    },
    {
      "id": 1301902,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/w.h/movie/f686425a1ad1f502254abef593d508bf428685.jpg",
      "version": "",
      "nm": "沉默东京",
      "preShow": false,
      "sc": 5.8,
      "globalReleased": true,
      "wish": 52,
      "star": "佐藤浩市,石田百合子,西岛秀俊",
      "rt": "2020-12-04",
      "showInfo": "今天暂无场次",
      "showst": 3,
      "wishst": 0,
      "comingTitle": ""
    },
    {
      "id": 1286015,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/w.h/moviemachine/a0c6d6e130abe399e4cba58be2b1f871840268.jpg",
      "version": "",
      "nm": "宝可梦：超梦的逆袭 进化",
      "preShow": false,
      "sc": 8.2,
      "globalReleased": true,
      "wish": 53255,
      "star": "松本梨香,大谷育江,市村正亲",
      "rt": "2020-12-04",
      "showInfo": "今天10家影院放映10场",
      "showst": 3,
      "wishst": 0,
      "comingTitle": "12月4日 周五"
    }
  ]
}

json数据

前端：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li v-for="item in dataList">
            <h2>{{item.nm}}</h2>
            <p>主演：{{item.star}}</p>
            <img :src="item.img | repUrl" alt="">
        </li>
    </ul>
</div>

</body>
<script>
    // 过滤器
    Vue.filter('repUrl', function (url) {
        return url.replace('w.h','128.180')
    })
    let vm = new Vue({
        el: '#box',
        data: {
            dataList: ''
        },
        mounted() {
            axios.get("http://127.0.0.1:5000/").then(res => {
                console.log(res.data.coming)
                this.dataList = res.data.coming
            }).catch(err => {
                console.log(err);
            })
        }
    })
</script>
</html>

后端：main.py

import json

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    print('请求来了')
    with open('film.json', mode='rt', encoding='utf-8') as f:
        dic = json.load(f)
    res = jsonify(dic)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res

if __name__ == '__main__':
    app.run()

码农公寓

一、slot插槽

1.1 基本使用

1.2插槽小案例（一个组件通过插槽控制另一个组件的显示隐藏）

1.3 具名插槽（指定标签放到组件的某个插槽中）

二、自定义指令

三、过滤器

json数据：film.json

前端：index.html

后端：main.py

相关文章