[基础学习]Vue+高阶函数+父子组件通信+插槽

最新推荐文章于 2024-10-07 17:08:53 发布

刘刘哒

最新推荐文章于 2024-10-07 17:08:53 发布

阅读量583

点赞数

分类专栏：基础学习+常复习文章标签： vue

本文链接：https://blog.csdn.net/weixin_55371434/article/details/115384966

版权

基础学习+常复习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了MVVM设计模式中的关键概念，包括计算属性、侦听器（Watch）和事件绑定。计算属性提供缓存机制，提高性能；侦听器用于响应数据变化；事件绑定则用于处理用户交互。同时，文章讨论了Vue中的v-model双向绑定、数组操作如filter、map和reduce，以及组件化开发的基本原理。此外，还涵盖了父子组件通信、路由创建以及插槽的使用等核心概念。

摘要由CSDN通过智能技术生成

mvc mvvm设计模式

m后台数据 v图形界面 c事件绑定
在这里插入图片描述

计算属性 Computed

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
总结
计算属性运算能力强如果内容和名字没有发生改变计算属性会立即返回之前的计算结果，而不必再次执行函数。

侦听器Watch

<div id="watch-example">
        <p>
            Ask a yes/no question:
            <input v-model="question">
        </p>
        <p></p>
    </div>

 var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',

        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question(val) {
                console.log(val);
                this.answer(val)
            }
        },

        methods: {
            answer(val) {
                console.log('answer' + val);
            }
        }
    })

事件绑定

当我们需要循环的索引和内容同时也需要事件对象的时候可以$event
在这里插入图片描述

重点思想-点击列表-当前列表变色

1.绑定点击事件

<li v-for='item,index in starts' @click='toggle(index)' :key='index' :class="{active: index === currentIndex}">

2.声明一个 currentIndex: 0 由于每次循环都会自动创建一个li
这段代码会依次比对 :class="{active: index === currentIndex}"
在这里插入图片描述
3.每次点击把点击到的index给currentIndex即可实现点击思维

 toggle(index) {
                this.currentIndex = index
            }

v-model 双向绑定表单

原理
利用v-on:input监听用户的输入事件一旦输入就会调用

        <input type="text" v-model='message'>//第二种		
        <input type="text" :value='message' @input='inputChange'>//第二种
        <input type="text" :value='message' @input='message = $event.target.value'>//第三种方式
        <h2>{{message}}</h2>

        data: {
            message: '哈哈哈'
        },
        methods: {
            inputChange(e) {
                this.message = e.target.value
            },
        }

值绑定

总结把后台获取的数据值绑定过去
在这里插入图片描述

在这里插入图片描述

修饰符

在这里插入图片描述

高阶函数-数组遍历方式

for in遍历的是可枚举的属性；for of遍历迭代器

filter过滤对数组的每一项做出判断

true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中
false:当返回false时，函数内部会过滤掉这次的n

map计算对数组中的每一项做出变化

 const nums = [10, 20, 111, 222, 444, 40, 50]
    const new123 = nums.filter((item) => item < 100).map((item) => item * 2 )
    console.log(new123);//(4) [20, 40, 80, 100]

reduce 对数组中所有内容进行汇总至少两个值有三个

[20, 40, 80, 100]
reduce((preValue,Value)=>{},0)前一个与当前的 0是汇总的状态
第一次 pre 0 : value 20 ;0+20
第二次 pre 20 :value 40; 20+40=60
第三次 pre 60 : value 80; 60 + 80 = 140
地四处 pre140 : value 100 ; 140 +100 = 240
需求过滤小于<100的值对其每一个值*2 再让它们全部先加

const nums = [10, 20, 111, 222, 444, 40, 50]
    const new123 = nums.filter((item) => item < 100).map((item) => item * 2).reduce((pre, now) => pre + now)
    console.log(new123);240

组件化

组件的注册方式了解

**全局组件注册可以在多个挂载的Vue实例使用 **
在这里插入图片描述
局部组件注册
在实例内部注册只能给app这个实例中使用

根组件

父子组件通信

子组件想要获取父组件的数据需要通过几步操作 props属性保存的是父组件传过来的值
父组件需要获取子组件的数据；子组件可以用$emit发射过来
子组件内类data必须是函数才能保存变量为什么组件data 必须是函数?
因为函数是复杂数据类型在栈中储存的是地址，在堆中储存的才是值每个组件实例存储的值相互不影响
组件实例每次调用data方法都会返回这个Obj 返回的是同一个对象那么所有组件获取的值都是同步的我们希望是组件是独立的
在这里插入图片描述