Vue中插槽和过滤器的深入讲解

目录

• 插槽

• 什么是插槽？
• 插槽内容
• 编译作用域
• 后备内容
• 具名插槽

• 概念
• 语法
• 全局过滤器
• 局部过滤器
• 练习

// slot.vue
<template>
  <div>
    <div>
      <!--分发内容的内容会被承载到这个slot标签位置 -->
      <slot></slot>
    </div>
    <p>账号: <input /></p>
    <p>密码: <input type="password" /></p>
    <button>登录</button>
  </div>
</template>
<script>
export default {};
</script>
<style>
</style>

// SlotTest.vue
<template>
  <div>
    <slotCom>
        <h2>我是分发到slot的内容</h2>
    </slotCom>
  </div>
</template>
<script>
// 引入
import slotCom from "../views/slot";
export default {
  components: {
    slotCom
  },
}
</script>
<style>
</style>

<navigation-link url="/profile">
  Logged in as {{ user.name }}
</navigation-link>

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  /*  这里的 `url` 会是 undefined，因为其 (指该插槽的) 内容是
      _传递给_ <navigation-link> 的而不是
      在 <navigation-link> 组件*内部*定义的。
  */
</navigation-link>

// 一个按钮组件，设置后备内容为文字Submit
<button type="submit">
  <slot>Submit</slot>
</button>
// 当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：
<submit-button></submit-button>
// 后备内容“Submit”将会被渲染：
<button type="submit">
  Submit
</button>
// 但是如果我们提供内容：
<submit-button>
  Save
</submit-button>
// 则这个提供的内容将会被渲染从而取代后备内容：
<button type="submit">
  Save
</button>

// login-component.vue
<template>
    <div>
        <div>
            <slot>后备内容</slot>
        </div>
        <p>
            账号: <slot name="user"></slot>
        </p>
        <p>
            密码: <slot name="psd"></slot>
        </p>
        <button>登录</button>
        <slot></slot>
    </div>
</template>
// 使用
<login-component>
        <h2>我是分发到slot的内容</h2>
        <template v-slot:user>    
            <!-- 这里所有的内容都会被插入到name="user" 插槽中 -->
            <div>
                123
            </div>
        </template>
        <input slot="psd" type="password" placeholder="这个元素会被插入到name=psd 插槽中">
        <component-a slot="psd"></component-a> 
</login-component>

<login-component>
            <h2>我是分发到slot的内容</h2>
            <template #user>    
                这里所有的内容都会被插入到name="user" 插槽中
                <div>
                    123
                </div>
            </template>
            <template #psd>    
               <input type="password" placeholder="这个元素会被插入到name=psd 插槽中">
            </template>
</login-component>

<div id="app">
    {{str | capitalize}}  // Hello
</div>
// 单词首字母大写
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
    el: '#app',
    data: {
        str: 'hello'
    }
})

<div id="app">
    <div v-for="(f,i) in friends" :key="i">
        <h3>姓名: {{f.name}} </h2>
        <p>年龄: {{f.age}}</p>
        <p>性别: {{f.sex|getSex}}</p>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            friends: [{
                    name: 'Max',
                    sex: 0,
                    age: 19
                },
                {
                    name: 'Jack',
                    sex: 1,
                    age: 22
                },
                {
                    name: 'Jacose',
                    sex: 1,
                    age: 19
                },
                {
                    name: 'Tim',
                    sex: 1,
                    age: 18
                },
                {
                    name: 'Jimmy',
                    sex: 0,
                    age: 20
                },
                {
                    name: 'Tom',
                    sex: 0,
                    age: 19
                },
            ]
        },
        filters: {
            getSex(type) {
                if (type === 0) {
                    return '男'
                }
                return '女'
            }
        }
    })
</script>

<div>{{'hello' | substr(3,4)}}</div>
<script>
{
    filters: {
       substr(str,start,end) {
           return str.substr(start,end)
       } 
    }
}
</script>

// 例
<p>{1599639292100 | getTemplateTimeByDate('YYYY-MM-dd hh:mm:ss')}</p> -> 2020-09-09 15:04:56
<p>{1599639292100 | getTemplateTimeByDate('YYYY-M-d h:m:s')}</p> -> 2020-9-9 15:4:6
<p>{1599639292100 | getTemplateTimeByDate('YYYY年M月d日 hh:mm')}</p> -> 2020年9年9 15:04
new Vue({
    el: '#app',
    data: {
        date: new Date().getTime()
    },
    filters: {
        getTemplateTimeByDate(date, template) {
            date = new Date(date)
            let TimeObj = {
                'Y+': date.getFullYear(),
                '(M+)': date.getMonth() + 1,
                '(d+)': date.getDate(),
                '(h+)': date.getHours(),
                '(m+)': date.getMinutes(),
                '(s+)': date.getSeconds()
            }
            for (key in TimeObj) {
                let reg = new RegExp(key)
                if (reg.test(template)) {
                    console.log(RegExp.$1)
                    let time = TimeObj[key]
                    // 判断当前模板时间是 两位 还是 一位的
                    // 如果是两位 个位数时间需要前面加零, 1 -> 01 
                    // 如果是一位 不用加零操作
                    if (RegExp.$1.length > 1) {
                        time = time >= 10 ? time : '0' + time
                    }
                    template = template.replace(reg, time)
                }
            }
            return template
        }
    }
})
</script>