vue-插槽，动态组件和过滤器

最新推荐文章于 2024-07-07 03:45:49 发布

Duxiangtao

最新推荐文章于 2024-07-07 03:45:49 发布

阅读量374

点赞数

本文链接：https://blog.csdn.net/Duxiangtao/article/details/90648262

版权

插槽（slot）

slot 插槽
作用：可以让我们在组件中书写内容

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="app">
        <Father>
            <p slot="first">111</p>
            <p slot="second">222</p>
        </Father>
        <p>这里是app自己内部标签</p>
    </div>
    <template id="father">
        <div>
            <slot name="first"></slot>
            <h3>hello</h3>   
            <slot name="second"></slot>
        </div>
    </template>
</body>
<script>
    Vue.component( 'Father', {
        template: '#father'
    })
    new Vue({
        el: '#app'
    })
</script>
</html>

动态组件

动态组件：
动态组件是vue内部提供了一个叫做component的组件，这个组件身上可以通过绑定is属性来进行组件的切换
keep-alive组件可以进行组件的内容缓存，将组件的内容存入浏览器缓存中，这样可以大大的节省街切换的事件
keep-alive 和 component动态组件两者常常一起搭配使用
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="name = name === 'A'?'B':'A'">切换</button>
        <keep-alive>
            <component :is="name"></component>
        </keep-alive>
    </div>
</body>
<script>
    Vue.component( 'A', {
        template: '<h3>aaaaaaa</h3>'
    })
    Vue.component( 'B', {
        template: '<h3>bbbbbbbbb</h3>'
    })
    new Vue({
        el: '#app',
        data: {
            name: 'A'
        }
    })
</script>
</html>

过滤器

过滤器：
vue 1.x内部提供提供了 10 个过滤器，这10个过滤器是针对数字纸币符号日期大小写小数位数等的格式化

  什么叫过滤器？
    格式化数据的一个工具
    举例：  12.22225   ---> 12.2 
        Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time)  -- >   2019/05/28

  过滤器一样也有两种声明形式
    全局声明
      Vue.filter(过滤器名称，回调函数)  回调函数中有一个参数value
      value值就表示的是格式化数据的值
    局部声明

          new Vue({
            filters: {
              '过滤器名称'： function( value ){
                return
              }
            }
          })

    过滤器的回调函数必须有返回值

    如何使用使用过滤器？
      我们用一个叫做管道符的来使用过滤器

      举例： 
          数据 | 过滤器名称

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

</head>
<body>
    <div id="app">
        <p> {{ money|Rmb }} </p>
        <p> {{ lowcase|uppercase }} </p>
    </div>
</body>
<script>
    Vue.filter( 'Rmb', function ( val ) {
        return ` ￥${val} `
    })
    new Vue({
        el: '#app',
        data: {
            money: 122.31,
            lowcase: 'asdsadaswqedvdfbfb',
        },
        filters: {
            'uppercase': function ( val ) {     
                return ` ${val.toUpperCase()} `
            }
        }
    })
</script>
</html>

Duxiangtao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-插槽，动态组件和过滤器

动态组件动态组件：动态组件是vue内部提供了一个叫做component的组件，这个组件身上可以通过绑定is属性来进行组件的切换keep-alive组件可以进行组件的内容缓存，将组件的内容存入浏览器缓存中，这样可以大大的节省街切换的事件keep-alive 和 component动态组件两者常常一起搭配使用实例：<!DOCTYPE html><html lang=...
复制链接

扫一扫