[Vue学习笔记（小白版）]-2023.8.15

你不会哭的

已于 2023-08-16 19:32:36 修改

阅读量38

点赞数 1

文章标签：学习笔记 vue.js

于 2023-08-16 19:15:24 首次发布

本文链接：https://blog.csdn.net/qq_58325633/article/details/132304861

版权

计算属性

计算属性的重点突出在属性这两个字上，首先它是一个属性，其次这个属性具有计算的能力，这个计算也就是一个函数（方法）。它可以将计算结果缓存起来，也可以想象为缓存。因此，我们可以使用计算属性来描述依赖响应式状态的复杂逻辑。

示例如下：

<div id="app">
  <div>普通方法查看时间{{currentTime1()}}</div>
  <div>计算属性查看时间{{currentTime2}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el:"#app",
    methods: {
      currentTime1: function () {
        return Date.now();
      }
    },
    computed: {
      currentTime2: function (){
        return Date.now();
      }
    }
  });
</script>

首先我们可以看到普通方法和计算属性使用上的区别就是调用方式，普通方法名称后须有“（）”-currentTime1，而计算属性则不必-currentTime2；其次普通方法在“methods”中声明，而计算属性在“computed”中声明。二者具体的声明方式没有区别。

测试发现，普通方法每次执行结果都回改变，而计算属性不会，可以看出结果在缓存中保存。

如果对currentTime2作出如下改动

currentTime2: function (){
        this.message;
        return Date.now();
      }

每次更新message值时才会引起计算属性结果的改变。

slot

插槽，即在组件中留下一个“坑”给变化的元素，示例如下：

<div id="app">
  <todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items>
  </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

  Vue.component("todo",{
    template: '<div>\
                  <slot name="todo-title"></slot>\
                  <ul>\
                    <slot name="todo-items"></slot>\
                  </ul>\
                </div>'
  })
  Vue.component("todo-title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
  })
  Vue.component("todo-items",{
    props: ['item'],
    template: '<li>{{item}}</li>'
  })

  var vm = new Vue({
    el: "#app",
    data: {
      title: 'the study planning of hcz',
      items: ['cuda','vue','pinn','springboot','deep learning']
    }
  })
</script>

自定义事件内容分发

字面意思,就是自定义一个事件.下面示例是利用组件自定义事件,调用Vue实例中的方法去对Vue对象中的数据进行操作,示例如下:

<div id="app">
  <todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="(item,index) in items" :index="index"
                :item="item" @remove="removeItem(index)"></todo-items>
  </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  Vue.component("todo",{
    template: '<div>\
                  <slot name="todo-title"></slot>\
                  <ul>\
                    <slot name="todo-items"></slot>\
                  </ul>\
                </div>'
  })
  Vue.component("todo-title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
  })
  Vue.component("todo-items",{
    props: ['item','index'],
    template: '<li>{{item}}<button @click="remove">删除</button></li>',
    methods: {
      remove: function (index){
        this.$emit('remove','index')
      }
    }
  })
  var vm = new Vue({
    el: "#app",
    data: {
      title: 'the study planning of hcz',
      items: ['cuda','vue','pinn','springboot','deep learning']
    },
    methods: {
      removeItem: function (index){
        this.items.splice(index,1);
      }
    }
  })
</script>

效果如下: