Vue.js备忘记录(四)-CSDN博客

本文链接：https://blog.csdn.net/finedayforu/article/details/104513966

一. vue过滤器 //文本格式化

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方：双花括号插值和v-bind表达式

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

        <!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<!-- 过滤器可以串联 -->
{{ message | filterA | filterB }}

你可以在一个组件的选项中定义本地的过滤器：

        filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

        Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

注意:过滤器的第一个参数已经被规定死了,永远都是过滤器管道符号前面的那个数据

二. 数组中的那些方法是响应式的?

我们知道,我们可以用v-for遍历数组, 那么数组中那些方法是改变自身的?只有改变自身的方法才不用重新赋值吧

1.以下方法是响应式的

        let arr =['a','b','c','d']
//1 push数组最后面添加元素
arr.push('e')

//2.pop删除最后一个元素
arr.pop()

//3.shift删除第一个元素
arr.shift()

//4.unshift 数组最前面添加元素
arr.unshift('e') 

//5.splice 删除/插入/替换元素
arr.splice(2,1) //从2开始删除1个
arr.splice(2,0,'f') //从2之后插入元素
arr.splice(2,1,'f') //替换2之后的元素(从2删除1个元素,再添加一个元素)

//6.sort排序
arr.sort()

//7. reverse()反序
arr.reverse()

2.以下方法不是响应式的

通过索引值改变数组内容不是响应式的

        this.arr[2]='f'

如何解决?

        this.arr.splice(2,1,'f')
//或者
Vue.set(this.arr,2,'f')     //vue方式

三. 插槽 slot

插槽的目的是提高组件的拓展性, 就像电脑的USB插槽.

解决子组件模板太过固化不灵活的问题,这时候我们给模板预备插槽

比如:

下面的例子,不同的导航栏存在区别,同时又有共性,

我们可以定义一个组件,这个组件里有三个插槽,每个插槽里都可以传入不同的东西,这使得这个导航栏组件可以应用的更广

这里我们的思想是: 抽取共性,保留插槽

1.插槽的基本使用

定义插槽<slot>默认值</slot>

            let template=`
    <div>
      <p>下面让你自由发挥,你给我啥我显示啥</p>
      <slot></slot>    <--这就是个插槽,里面的内容由调用者决定  -->
    </div>
    `

这样子组件就有插槽了,父组件调用时可以往里面插入东西了

        <子组件> 把要插入的内容写在这,可以是任何标签 </子组件>

2.具名插槽

        <slot name="left"></slot>    <--这个插槽名叫left  -->
<slot name="center"></slot>

调用时: 要在插入的标签中使用 slot="插槽名" 来插入

        <子组件> <插入的标签 slot="left"></插入的标签> </子组件>

例:神还原上面的京东截图 😂

        <!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>

<body>
  <div id='app'>
    <cpn>
      <span slot="left">三</span>
      <span slot="center">JD<input type="text" placeholder="🔍这是一个搜索框"></span>
      <button slot="right">登录</button>
    </cpn>
    <cpn><input slot="center" type="text" placeholder="🔎这是一个搜索框"></cpn>
    <cpn><strong slot="center">"购物车"</strong></cpn>
    <cpn>
      <table slot="center" style="display: inline-block;">
        <tr>
          <td> 📍商品 </td>
          <td> 评价 </td>
          <td> 详情 </td>
          <td> 推荐 </td>
        </tr>
      </table>
    </cpn>
    <cpn></cpn>
  </div>
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  <script>

    let template = `
    <div>
      <slot name="left"><</slot>
      <slot name="center"><span>默认显示一个span</span></slot>
      <slot name="right">...</slot>
    </div>
    `
    const cpn = {
      template,
    }
    const vm = new Vue({
      el: '#app',
      components: {
        cpn
      }
    })
  </script>
</body>

</html>

3. 作用域插槽

父组件通过作用域插槽拿到子组件数据,但是按照父组件自己的方式展示

要做到这一点,我们要在子组件模板中声明slot时 v-bind动态绑定数据源

在父组件调用时,标签中加入slot-scope='slot' 来获取slot标签

然后用slot.data获取数据,用来展示

        <!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>

<body>
  <div id='app'>
    <cpn></cpn>
    <cpn>
      <div slot-scope='slot'>
        <span v-for="item in slot.data" >{{item}} - </span>       父组件的展示
      </div>
    </cpn>
  </div>
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
  <script>

    let template = `
    <div>   
    <slot :data='languages'>    //子组件用列表来展示
      <ul>
        <li v-for="language in languages" :key="language">{{language}}</li>
      </ul>
    </slot> 
    </div> 
    `
    const cpn = {
      template,
      data() {
        return {
          languages: ['c', "python", 'javascript', 'c#', 'DART', 'JAVA']
        }
      },
    }
    const vm = new Vue({
      el: '#app',
      components: {
        cpn
      }
    })
  </script>
</body>

</html>