前端技术Vue学习笔记--004

news2025/10/31 18:01:12

Vue学习

文章目录

  • Vue学习
    • 一、scoped解决样式冲突
    • 二、data必须是一个函数
    • 三、组件通信
      • 3.1、组件关系
      • 3.2、组件通信解决方案
      • 3.3、父传子通信
      • 3.4、子传父通信
      • 3.5、组件通信案例
    • 四、prop语法
      • 4.1、prop语法基础语法
      • 4.2、 <font color = blue>prop校验
      • 4.3、prop&data、单向数据流

一、scoped解决样式冲突

写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

  1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响

  2. 局部样式: 可以给组件加上scoped 属性,可以 让样式只作用于当前组件

scoped原理：

  1. 给当前组件模版的所有元素，都会被添加上一个自定义属性 data-v-hash值 （如：data-v-5f6a9d56）
  2. css选择器后面，被自动处理。添加上了[data-v-hash值]的属性选择器(如：div[data-v-5f6a9d56])

最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到。

如图：
在这里插入图片描述
在这里插入图片描述

二、data必须是一个函数

一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。
每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。

在这里插入图片描述
BaseCount.vue

<template>
  <div class="baseCount">
    
    <button v-on:click="count--" v-show="count >0">-</button>
    <span>{{count}}</span>
    <button @click="count++">+</button>

  </div>
</template>

<script>
export default {

    //data（）函数与data:达成的效果一样
    //data必须是一个函数 --->保证每个组件实例，维护独立的一个数据对象
    data(){
        console.log("1111")
        return {count:999}
        
    }
}
</script>
<style>
</style>

App.vue

<template>
  <div class="app">
    <BaseCount></BaseCount>
    <BaseCount></BaseCount>
    <BaseCount></BaseCount>
  </div>
</template>

<script>

//导入相关组件

import BaseCount from './components/BaseCount.vue'
export default {
  name: 'app',
  components: {
    BaseCount : BaseCount
  }
}
</script>

<style>

</style>

效果
在这里插入图片描述

三、组件通信

组件通信：就是指组件与组件之间的数据传递

  • 组件中的数据是独立的，无法直接访问其它组件的数据
  • 想用其他组件的数据-------组件通信

3.1、组件关系

在这里插入图片描述

3.2、组件通信解决方案

3.3、父传子通信

  1. 父组件通过props将数据传递给子组件
  2. 子组件利用$emit通知父组件修改更新

在这里插入图片描述
通信步骤：

  • 在父组件中，给组件标签，添加属性方式，传值
  • 在子组件通过props进行接收
  • 在子组件中渲染使用

App.vue

<template>
  <div class="app">
   myData: {{myData}}
    <!-- 父传子组件通信 -->
    <!-- 1.给组件标签，添加属性方式，传指 -->
    <BaseSon v-bind:title="myData"></BaseSon>
  </div>
</template>

<script>

//导入子组件
import BaseSon from './components/BaseSon.vue'
export default {
  name: 'app',
  components: {
    BaseSon : BaseSon
  },
  data(){
    return {
      myData  : 'radan学习Vue知识'
    }
  }
}
</script>

<style scoped>
</style>

BaseSon.vue

<template>
  <div class="son" >
    <!-- 3.在子组件中渲染使用 -->
    {{title}}
  </div>
</template>

<script>
export default {
  // 2.通过props进行接受
  props:['title']

}
</script>

<style scoped>
    div{
        border: 3px solid pink;
        margin: 10px;
        width: 260px;
        height: 60px;
    }
</style>

测试
在这里插入图片描述

3.4、子传父通信

通信步骤：

  1. 通过$emit，向父组件发生消息通知（需要在方法中编写）
  2. 父组件要对子组件发送的消息进行监听
  3. 父组件提供处理函数

App.vue

<template>
  <div class="app">
   myData: {{myData}}
   <!-- 2. 父组件要对子组件发送的消息进行监听 -->
    <BaseSon v-bind:title="myData" @changeTitle="handleChange"></BaseSon>
  </div>
</template>

<script>


import BaseSon from './components/BaseSon.vue'
export default {
  name: 'app',
  components: {
    BaseSon : BaseSon
  },
  data(){
    return {
      myData  : 'radan学习Vue知识'
    }
  },
  methods:{
    // 3. 提供处理函数
    handleChange(newTitle){
      // alert(newTitle)
      this.myData=newTitle
    }
  }
}
</script>

<style scoped>
</style>

BaseSon.vue

<template>
  <div class="son" >
    我是Son组件
    <button @click="changeFn()">修改父组件中的数据</button>
  </div>
</template>

<script>
export default {
  props:['title'],
  methods:{
    changeFn(){
      // alert("你好")
      // 1. 通过$emit，向父组件发生消息通知
      this.$emit('changeTitle','randa不想学习')
    }
  }

}
</script>

<style scoped>
    div{
        border: 3px solid pink;
        margin: 10px;
        width: 260px;
        height: 60px;
    }
</style>

测试
在这里插入图片描述

3.5、组件通信案例

小黑记事本--------------组件版

需求说明：
在这里插入图片描述
App.vue

<template>
  <!-- 主体区域 -->
  <section id="app">
    <TodoHeader @addProject="addProject" ></TodoHeader>
    <!-- 将list中的数据提供给todoMain组件 -->
    <TodoMain :list="list" @changeDel="changeDel"  ></TodoMain>

    <TodoFooter :list="list" @delAll="delAll" v-show=" list.length>0"></TodoFooter>

   
    
    
  </section>
</template>

<script>
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
//A:渲染功能：
        //  1. 提供数据-->提供在公共的父组件中
        //  2. 通过父传子，将数据传递给其他组件
        //  3. 利用 v-for 渲染 

/**
 * B:添加功能
 *      1.收集表单数据 --> v-model
 *      2.监听事件（回车+点击 都要进行添加）
 *      3.子传父将任务名称传递给父组件
 *      4.进行添加 unshift(自己的数据自己负责)
 */


/**
 * C:删除功能
 *      1.监听事件（监听删除的点击）携带id
 *      2.子传父，将删除的id传递给父组件App.vue
 *      3.进行删除 filter（自己的数据自己负责）
 */


/**
 *  D:footer功能
 *      1.底部合计：父传子list--->渲染
 *      2.清空功能：子传父，父修改
 *      3.持久化存储：watch深度监视list的变化-->往本地存储 --->进入页面优先读取本地信息
 */
export default {
  components:{
    TodoFooter:TodoFooter,
    TodoHeader:TodoHeader,
    TodoMain:TodoMain
  },
  data(){
    return {
      //优先读取本地信息
      list:JSON.parse(localStorage.getItem('list')) || [
        {id:1,name: '打篮球'},
        {id:2,name: '打羽毛球'},
        {id:3,name: '看电影'}
      ]
    }
  },
  methods:{
    changeDel(id)
    {
      //按照id删除数组中的元素
       this.list = this.list.filter(item => (item.id != id))
    },
    addProject(value){
          //向数组添加一个元素
            this.list.unshift({
              id  : +new  Date(),
              name : value
            })
            
          },
    delAll(){
      //清空数组中的所有元素
      this.list=[]
      // alert(this.list)
    }
  },
  watch:{
    list:{
      deep: true,
      handler(newValue){
        localStorage.setItem('list',JSON.stringify(newValue))
      }
    }
  }

}
</script>

<style>

</style>

ToDoHeader.vue

<template>
   <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input placeholder="请输入任务" class="new-todo" v-model="inputInfo" />
      <button class="add" @click="addProject">添加任务</button>
    </header>
</template>

<script>
export default {
  data(){
    return{
      inputInfo: ''  //和表单的输入框进行数据绑定
    }
  },
  methods:{
    addProject(){
      if(this.inputInfo.trim() === ''){
        alert("添加的元素不能为空")
        return
      }
      else{
        this.$emit('addProject',this.inputInfo)
        this.inputInfo=''
      }
     
    }
  }
}
</script>

<style>

</style>

ToDOMain.vue

<template>
   <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list" v-for="(item,index) in list" :key="item.id">
        <li class="todo">
          <div class="view">
            <span class="index">{{index +1 }}</span> <label>{{item.name}}</label>
           
            <button @click="del(item.id)" class="destroy"></button>
          </div>
        </li>
      </ul>
      
    </section>
</template>

<script>
export default {
  props:{
    list:Array
  },
  methods:{
    del(value){
      // console.log(value)
      this.$emit('changeDel',value)
    }
  }

}
</script>

<style>

</style>

ToDoFooter.vue

<template>
<!-- 统计和清空 -->
    <footer class="footer">
      <!-- 统计 -->
      <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
      <!-- 清空 -->
      <button class="clear-completed" @click="delAll">
        清空任务
      </button>
    </footer>
</template>

<script>
export default {
  props:{
    list:Array
  },
  methods: {
    delAll(){
      //子传父
    this.$emit('delAll')
    }
    
  }
}
</script>

<style>

</style>

四、prop语法

4.1、prop语法基础语法

  1. prop

定义：组件上注册的一些自定义属性
作用：向子组件传递数据

特点：

  • 可以传递   任意数量   的prop
  • 可以传递   任意类型   的prop
    在这里插入图片描述

4.2、 prop校验

思考：组件的prop可以乱传？
作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示。----->帮助开发者，快速发现错误。

校验语法：

  • 类型校验

数据类型校验：将props数组的形式改为对象的形式

//数据类型校验：将props数组的形式改为对象的形式
  // props:['title']
  props:{
    title: String  //String Boolean Array Object Function等等
  },
  • 非空校验
  • 默认值
  • 自定义校验
  //2.完整写法
  props:{
    title: {
      type: String,//类型校验
      required: true,  //必传属性：父传子的属性没有传就会报错
      default: 'hello radan',//默认值属性：当父组件组没有自定义属性绑定的时候，就会按照默认值进行处理
      //自定义校验
      validator(value){
        console.log(value)
        //对当前的title对应的value是否符合一定的条件
        return true;
      }
    }

注意：validator(value)中的value形参就是父组件传递过来的值

4.3、prop&data、单向数据流

prop&data中谁的数据谁负责

共同点：都可以给组件提供数据。
区别:

  • prop 的数据是外部的 → 不能直接改，要遵循 单向数据流
  • data 的数据是自己的 → 随便改

单向数据流：父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

子组件修改props中的数据

App.vue

<template>
  <div class="app">
   <BaseCount :title="myData" @changeCount="changeFn"></BaseCount>
  </div>
</template>

<script>


import BaseCount from './components/BaseCount.vue'
export default {
  name: 'app',
  components: {
    BaseCount : BaseCount
  },
  data(){
    return {
      myData  : 1
    }
  },
  methods:{
    changeFn(value){
      // alert(value)
      this.myData=value
    }
  }
}
</script>

<style scoped>
</style>

BaseCount.vue

<template>
  <div class="baseCount">
    
    <button v-on:click="countSub" v-show="title >0">-</button>
    <span>{{title}}</span>
    <button @click="countAdd">+</button>

  </div>
</template>

<script>
export default {
  //  1. data中的数据可以在当前组件中随便改
    // data(){
    //     return {count:999}
    // }
  //  2. props中的数据的修改办法：
  props:{
    title:Number
  },
  methods:{
    countAdd(){
        this.$emit('changeCount',this.title+1)
    },
    countSub(){
        this.$emit('changeCount',this.title-1)
    }
    // ,
    // isTrue(value){
    //   console.log(value)
    //   if(value>0)
    //     {
    //       return true
    //     }
    // }
    
  }
}
</script>

<style>
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/896662.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

流程图用什么软件做？这几款常用软件了解一下

流程图用什么软件做？这几款常用软件了解一下

流程图用什么软件做&#xff1f;流程图是在工作中非常常见的一种图形&#xff0c;它可以清晰地展示一个流程的步骤和流向。在工作中&#xff0c;我们经常需要制作各种流程图&#xff0c;如项目流程图、销售流程图等&#xff0c;以便更好地组织和管理工作。那么&#xff0c;应该…
阅读更多...
boot-admin整合flowable官方editor-app源码进行BPMN2-0建模

boot-admin整合flowable官方editor-app源码进行BPMN2-0建模

boot-admin整合flowable官方editor-app源码进行BPMN2-0建模&#xff08;续&#xff09;书接上回 项目源码仓库github项目源码仓库gitee boot-admin 是一款采用前后端分离模式、基于SpringCloud微服务架构的SaaS后台管理框架。系统内置基础管理、权限管理、运行管理、定义管理…
阅读更多...
Spark第三课

Spark第三课

1.分区规则 1.分区规则 shuffle 1.打乱顺序 2.重新组合 1.分区的规则 默认与MapReduce的规则一致,都是按照哈希值取余进行分配. 一个分区可以多个组,一个组的数据必须一个分区 2. 分组的分区导致数据倾斜怎么解决? 扩容 让分区变多修改分区规则 3.HashMap扩容为什么必须…
阅读更多...
【源码篇】ThreadLocal源码解析（主打的就是通俗易懂，言简意赅）

【源码篇】ThreadLocal源码解析（主打的就是通俗易懂，言简意赅）

文章目录 ThreadLocal学习笔记前言1、TheadLocal基本介绍2、ThreadLocal基本使用3、体验ThreadLocal的优点3.1 ThreadLocal与synchronized的比较3.2、ThreadLoca的应用场景 4、ThreadLocal的内部原理4.1 ThreadLocal内部结构4.2 ThreadLocal常用方法分析4.2.1 set原理分析4.2.2…
阅读更多...
10.4K Star！程序员为程序员针对性优化的开源免费笔记

10.4K Star！程序员为程序员针对性优化的开源免费笔记

平时我一直用Notion来记录内容为主&#xff0c;但也一直关注着其他开源产品。上周正好看到一款非常受欢迎的开源免费笔记&#xff0c;今天就推荐给大家&#xff1a;VNote。 VNote一个由程序员为程序员打造的开源笔记应用&#xff0c;基于Qt开发&#xff0c;专注于使用 Markdown…
阅读更多...
视觉三维重建第一课

视觉三维重建第一课

0. 简介 对于视觉而言&#xff0c;想要获得比较精细的地图信息&#xff0c;这离不开地图的三维重建。三维重建&#xff08;3D Reconstruction&#xff09;的定义就是&#xff0c;从一堆二维图像中恢复物体的三维结构&#xff0c;并进行渲染&#xff0c;最终在计算机中进行客观…
阅读更多...
【Math】特征值和奇异值辨析

【Math】特征值和奇异值辨析

奇异值和特征值都描述了一个矩阵的一些特性&#xff0c;但很多情况下&#xff0c;对于两者之间的区别和联系都不太清楚。 本文就这两者进行解析&#xff0c;并对奇异值的一些简单应用进行探索。 奇异值与特征值的定义 奇异值与特征值都被用于描述矩阵作用于某些向量的标量&am…
阅读更多...
智能排水解决方案，设备实时监控+预测分析，真正实现“无人值守”！

智能排水解决方案，设备实时监控+预测分析，真正实现“无人值守”！

什么是矿山排水 随着煤炭开采深度不断增加&#xff0c;地质条件也愈加复杂&#xff0c;井下综采作业会面临越来越高的渗水风险。为确保井下综采作业安全&#xff0c;需要设置大量排水系统&#xff0c;在矿山建设和生产过程中排除进入矿山的地下水和地表水。矿井排水系统是保障…
阅读更多...
【C++】C++ 语言对 C 语言的加强 ① ( 实用性增强 - 变量任意位置定义 | register 关键字增强 - 自动进行寄存器优化 )

【C++】C++ 语言对 C 语言的加强 ① ( 实用性增强 - 变量任意位置定义 | register 关键字增强 - 自动进行寄存器优化 )

文章目录 一、实用性增强 - 变量任意位置定义二、register 关键字增强 - 自动进行寄存器优化 一、实用性增强 - 变量任意位置定义 C 语言定义变量位置 : 在 C 语言中 , 函数作用域中使用到的变量 , 必须在 作用域 开始的位置定义 , 一旦开始编写代码逻辑后 , 在逻辑代码行之间 …
阅读更多...
【100天精通python】Day39：GUI界面编程_PyQt 从入门到实战（下）_图形绘制和动画效果，数据可视化，刷新交互

【100天精通python】Day39：GUI界面编程_PyQt 从入门到实战（下）_图形绘制和动画效果，数据可视化，刷新交互

目录 专栏导读 6 图形绘制与动画效果 6.1 绘制基本图形、文本和图片 6.2 实现动画效果和过渡效果 7 数据可视化 7.1 使用 Matplotlib绘制图表 7.2 使用PyQtGraph绘制图表 7.3 数据的实时刷新和交互操作 7.3.1 数据的实时刷新 7.3.2 交互操作 7.4 自定义数据可视化…
阅读更多...
vue实现穿梭框，ctrl多选，shift多选

vue实现穿梭框，ctrl多选，shift多选

效果图 代码 <template><div class"container"><!--左侧--><div><div class"title">{{ titles[0] }}</div><div class"layerContainer"><div v-for"item in leftLayerArray":key"…
阅读更多...
Flink之时间语义

Flink之时间语义

Flink之时间语义 简介 Flink中时间语义可以说是最重要的一个概念了,这里就说一下关于时间语义的机制,我们下看一下下面的表格,简单了解一下 时间定义processing time处理时间,也就是现实世界的时间,或者说代码执行时,服务器的时间event time事件时间,就是事件数据中所带的时…
阅读更多...
LSTM模型

LSTM模型

目录 LSTM模型 LSTM结构图 LSTM的核心思想 细胞状态 遗忘门 输入门 输出门 RNN模型 LRNN LSTM模型 什么是LSTM模型 LSTM (Long Short-Term Memory)也称长短时记忆结构,它是传统RNN的变体,与经典RNN相比能够有效捕捉长序列之间的语义关联,缓解梯度消失或爆炸现象.同时LS…
阅读更多...
iOS自定义下拉刷新控件

iOS自定义下拉刷新控件

自定义下拉刷新控件 概述 用了很多的别人的下拉刷新控件&#xff0c;想写一个玩玩&#xff0c;自定义一个在使用的时候也会比较有意思。使应用更加的灵动一些&#xff0c;毕竟谁不喜欢各种动画恰到好处的应用呢。 使用方式如下&#xff1a; tableview.refreshControl XRef…
阅读更多...
【CTF-web】buuctf-[CISCN2019 华北赛区 Day2 Web1]Hack World（sql盲注）

【CTF-web】buuctf-[CISCN2019 华北赛区 Day2 Web1]Hack World（sql盲注）

题目链接 根据上图可知&#xff0c;页面中已经告诉我们要从flag表中的flag列取出flag&#xff0c;思考是sql注入。经过抓包发现发post包中的id字段是注入点。 经测试当输入id1时&#xff0c;结果为Hello, glzjin wants a girlfriend.&#xff0c;当id2时&#xff0c;结果为Do y…
阅读更多...
Azure共享映像库构建VM镜像

Azure共享映像库构建VM镜像

什么是Azure共享映像库 Azure共享映像库是一项在Microsoft Azure中以共享方式存储和管理映像的服务。映像是预配置的虚拟机操作系统和应用程序的快照&#xff0c;可以用来创建多个虚拟机实例。通过将映像存储在共享映像库中&#xff0c;用户可以轻松地共享映像给其他Azure订阅…
阅读更多...
MES管理系统如何帮助制造企业打造透明化工厂

MES管理系统如何帮助制造企业打造透明化工厂

在制造型企业的运营中&#xff0c;车间现场管理至关重要。然而&#xff0c;面临着信息传递速度慢、跨部门协作困难、生产进度无法及时掌握、制造品质不良、设备故障不能及时处理等困境&#xff0c;企业需要寻求有效的解决方案。MES生产管理系统作为针对制造企业车间生产过程控制…
阅读更多...
REC 系列 Visual Grounding with Transformers 论文阅读笔记

REC 系列 Visual Grounding with Transformers 论文阅读笔记

REC 系列 Visual Grounding with Transformers 论文阅读笔记 一、Abstract二、引言三、相关工作3.1 视觉定位3.2 视觉 Transformer 四、方法4.1 基础的视觉和文本编码器4.2 定位编码器自注意力的文本分支文本引导自注意力的视觉分支 4.3 定位解码器定位 query 自注意力编码器-解…
阅读更多...
教你手机摄影要知道的技巧

教你手机摄影要知道的技巧

手机摄影已经成为人们记录生活、分享瞬间的重要方式之一。随着手机摄像头技术的不断提升&#xff0c;我们每个人都有机会成为优秀的手机摄影师。然而&#xff0c;要想在手机摄影领域脱颖而出&#xff0c;掌握一些关键的技巧是必不可少的。 1. 了解你的手机摄像头&#xff1a; …
阅读更多...
使用percona-xtrabackup备份MySQL数据

使用percona-xtrabackup备份MySQL数据

xtrabackup备份分为两种 本文参考链接1 本文参考链接2 全量备份 1.备份数据 要创建备份&#xff0c;请xtrabackup使用xtrabackup --backup option. 您还需要指定一个xtrabackup --target-dir选项&#xff0c;即备份的存储位置&#xff0c;如果InnoDB数据或日志文件未存储在同…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023