day04

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量362 收藏 7
点赞数 7
分类专栏： Vue学习之路 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53721382/article/details/135748174
版权

文章目录

组件三大部分

在这里插入图片描述

1.style中的样式 默认是作用到全局的
2.加上scoped可以让样式变成局部样式
scoped原理：
1.给当前组件模板的所有元素，都会添加上一个自定义属性data-v-hash值 用于区分开不通的组件
2.css选择器后面，被自动处理，添加上了属性选择器 div[data-v-hash值]

一个组件的 data 选项必须是一个函数。→ 保证每个组件实例，维护独立的一份数据对象。

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  // data() {
  //   console.log('函数执行了')
  //   return {
  //     count: 100,
  //   }
  // },
  data: function () {
    return {
      count: 100,
    }
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

组件通信

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

父组件向子组件传值

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是父组件
    <!-- 1.给组件标签，添加属性方式 赋值 -->
    <Son :title="myTitle"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端',
    }
  },
  components: {
    Son,
  },
}
</script>

<style>
</style>

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    <!-- 3.直接使用props的值 -->
    我是子组件 {{title}}
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  // 2.通过props来接受
  props:['title']
}
</script>

<style>

</style>

子组件向父组件传值

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是父组件
    <!-- 2.父组件对子组件的消息进行监听 -->
    <Son :title="myTitle" @changTitle="handleChange"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端',
    }
  },
  components: {
    Son,
  },
  methods: {
    // 3.提供处理函数，提供逻辑
    handleChange(newTitle) {
      this.myTitle = newTitle
    },
  },
}
</script>

<style>
</style>

<template>
  <div class="son" style="border: 3px solid #000; margin: 10px">
    我是Son组件 {{ title }}
    <button @click="changeFn">修改title</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  props: ['title'],
  methods: {
    changeFn() {
      // 通过this.$emit() 向父组件发送通知
      this.$emit('changTitle','传智教育')
    },
  },
}
</script>

<style>
</style>

props

<template>
  <div class="app">
    我是父组件
    <BaseProgress :w="width"></BaseProgress>
  </div>
</template>

<script>
import BaseProgress from './components/BaseProgress.vue'
export default {
  data() {
    return {
      width: 30,
    }
  },
  components: {
    BaseProgress,
  },
}
</script>

<style>
</style>

<template>
  <div class="base-progress">
    我是子组件
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  // 1.基础写法（类型校验）
  // props: {
  //   w: Number,
  // },

  // 2.完整写法（类型、默认值、非空、自定义校验）
  props: {
    w: {
      type: Number,
      required: true,
      default: 0,
      validator(val) {
        // console.log(val)
        if (val >= 100 || val <= 0) {
          console.error('传入的范围必须是0-100之间')
          return false
        } else {
          return true
        }
      },
    },
  },
}
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

单向数据流

<template>
  <div class="app">
    <BaseCount :count="count" @changeCount="handleChange"></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
    return {
      count:100
    }
  },
  methods:{
    handleChange(newVal){
      // console.log(newVal);
      this.count = newVal
    }
  }
}
</script>

<style>

</style>

<template>
  <div class="base-count">
    <button @click="handleSub">-</button>
    <span>{{ count }}</span>
    <button @click="handleAdd">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
  // data () {
  //   return {
  //     count: 100,
  //   }
  // },
  // 2.外部传过来的数据 不能随便修改
  props: {
    count: {
      type: Number,
    },
  },
  methods: {
    handleSub() {
      this.$emit('changeCount', this.count - 1)
    },
    handleAdd() {
      this.$emit('changeCount', this.count + 1)
    },
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

综合案例

App.vue

<template>
  <section id="app">
    <!--3. 使用组件-->
    <Header @add="add"></Header>
    <Main :list="list" @del="del"></Main>
    <Footer :list="list" @clear="clear"></Footer>

  </section>
</template>

<script>

// 渲染功能：
// 1.提供数据： 提供在公共的父组件 App.vue
// 2.通过父传子，将数据传递给TodoMain
// 3.利用 v-for渲染

// 添加功能：
// 1.手机表单数据  v-model
// 2.监听事件（回车+点击都要添加）
// 3.子传父，讲任务名称传递给父组件 App.vue
// 4.进行添加 unshift（自己的数据自己负责）
// 5.清空文本框输入的内容
// 6.对输入的空数据 进行判断

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

// 底部合计：父传子  传list 渲染
// 清空功能：子传父  通知父组件 → 父组件进行更新
// 持久化存储：watch深度监视list的变化 -> 往本地存储 ->进入页面优先读取本地数据


// 1. 导入组件
import Header from "@/components/Header";
import Main from "@/components/Main";
import Footer from "@/components/Footer";


export default {
  // 2. 引用组件
  components: {Footer, Main, Header},
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [
        {id: 1, name: '打篮球'},
        {id: 2, name: '看电影'},
        {id: 3, name: '逛街'},
      ]
    }
  },
  methods: {
    add(name) {
      if (name.trim() === '') {
        alert("请输入名称")
        return
      }
      this.list.unshift({
        id: +new Date(),
        name: name
      })
    },
    del(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },
    clear(list) {
      this.list = list
    }
  },
  // 持久化到本地需要
  watch: {
    list: {
      deep: true, //深度监视
      handler(newVal) {
        localStorage.setItem('list', JSON.stringify(newVal))
      }
    }
  }
}
</script>

<style>

</style>

Header.vue

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

<script>
export default {
  name: "Header",
  data() {
    return {
      name: ''
    }
  },
  methods: {
    add() {
      this.$emit("add",this.name)
      this.name = ''
    }
  }
}
</script>

<style scoped>

</style>

Main.vue

<template>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for="(item,index) in list" :key="item.id">
        <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 {
  name: "Main",
  props: {
    list: {
      type: Array
    }
  },
  methods: {
    del(id) {
      this.$emit("del",id)
    }
  }
}
</script>

<style scoped>

</style>

Footer.vue

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

<script>
export default {
  name: "Footer",
  props: {
    list: {
      type: Array
    }
  },
  methods: {
    clear() {
      this.$emit("clear",[])
    }
  }
}
</script>

<style scoped>

</style>

由于我的子组件命名不规范（没有写成大驼峰的形式）所以需要在vue.config.js中添加一行代码 lintOnSave: false // 关闭语法检查错误

非父子通信

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

指令进阶

v-model

<template>
  <div class="app">
    <input type="text" v-model="msg1" />
    <br />
    <!-- v-model的底层其实就是：value和 @input的简写 
		$event 用于在模板中，获取事件的形参
	-->
    <input type="text" :value="msg2" @input="msg2 = $event.target.value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: '',
    }
  },
}
</script>

<style>
</style>

sync修饰符

在这里插入图片描述

ref 和 $refs

<template>
  <div class="app">
    <h4>父组件 -- <button>获取组件实例</button></h4>
    <BaseForm ref="baseForm"></BaseForm>
  </div>
</template>

<script>
import BaseForm from './components/BaseForm.vue'
export default {
  components: {
    BaseForm,
  },
  methods: {
   getMsg() {
     this.$refs.baseForm.getFormData()
   },
    resetMsg() {
      this.$refs.baseForm.resetFormData()
    }
  }
}
</script>

<style>
</style>

<template>
  <div class="app">
    <div>
      账号: <input v-model="username" type="text">
    </div>
     <div>
      密码: <input v-model="password" type="text">
    </div>
    <div>
      <button @click="getFormData">获取数据</button>
      <button @click="resetFormData">重置数据</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: 'admin',
      password: '123456',
    }
  },
  methods: {
    getFormData() {
      console.log('获取表单数据', this.username, this.password);
    },
    resetFormData() {
      this.username = ''
      this.password = ''
      console.log('重置表单数据成功');
    },
  }
}
</script>

<style scoped>
.app {
  border: 2px solid #ccc;
  padding: 10px;
}
.app div{
  margin: 10px 0;
}
.app div button{
  margin-right: 8px;
}
</style>

$nextTick

<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button>确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button>编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
    }
  },
  methods: {
    handleEdit() {
      // 1. 显示输入框（异步dom更新）
      this.isShowEdit = true

      // 2. 让 输入框 获取焦点   $nextTick 异步dom更新后立刻执行
      this.$nextTick(() => {
        this.$refs.inp.focus()
      })
    }
  },
}
</script>

<style>
</style>
TZ丶旭哥
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python_day04_循环练习
Demon_and_Angle_的博客
11-10 3417
python_day04_循环练习 1、求两个数最大公约数 2、整数反转：如12345，输出54321 3、1~10之间的整数相加，得到累加值大于20的当前数 4、输入从周一至周五每天的学习时间（以小时为单位），并计算每日平均学习时间。 5、输出10000以下的完全数。如果一个正整数等于除它本身之外其它所有除数之和，就称之为完全数。 如6就是第一个完全数，因为6=1+2+3 6、用户玩游戏，每次玩5局（效果图如下） (1)不足5局则不能晋级 (2)在5局游戏中，如果80%达到80分以上，为一级，如果 60%
复习day04
weixin_46743838的博客
03-05 769
二叉树的递归遍历和迭代遍历实现
前端学习--Day04
Cure The World的博客
08-25 1616
1.css基本概念 2.选择器 3.三种连接方式 4字体相关属性
黑马头条项目练习（day04）
szw2377132528的博客
03-11 1296
黑马头条项目
瑞吉外卖-全网最全笔记-Day04
eadzsdad的博客
04-20 6240
黑马教程-瑞吉外卖，基于流行的Spring Boot、mybatis plus等技术框架进行开发，带领学员体验真实项目开发流程、需求分析过程和代码实现过程。能够收获：锻炼需求分析能力、编码能力、bug调试能力，增长开发经验。
day04文件包含
欧气满满大顺顺的博客
04-16 1222
Python基础day04 作业解析【3道 字典题】
upward
01-04 1898
Python基础day04 作业解析【3道 字典题】
cgb2106-day04
cgblpx的博客
07-29 4436
标题 标题 标题
CGBTN2107_DAY04复习
程序媛泡泡的博客
08-04 4288
DAY04 复习 1. 变量 1.2成员变量 位置：类里方法外 作用范围：在整个类中都生效，类消失，变量才会消失 注意：成员变量不是必须手动初始化，会赋予对应类型的默认值 1.3 局部变量 位置：方法里/局部代码块里 作用范围：当方法/局部代码块结束，变量也随之释放 注意：使用时必须手动初始化 1.3 对应类型的默认值 注意：除了8大基本类型以外，引用类型的默认值是null 2 方法 2.1 方法定义的格式 方法的定义就是方法的“说明书”，是指，你的方法如何定义，使用时就怎么使用，比如方法定义了参数，那么
Note_Logistics_Day04
Maynor996的博客
05-20 1450
stypora-copy-images-to: img typora-root-url: ./ Logistics_Day04：业务服务器和大数据服务器 01-[复习]-上次课程内容回顾 主要讲解2个方面内容：物流项目业务数据（数据库部署）和OGG 实时采集Oracle数据库表的数据。 1、物流项目业务数据 实际物流快递公司来说，有很多业务系统，使用不同类型数据库存储数据，在此仅仅以2个业务系统为例 - 物流系统Logistics 使用Oracle数据库 - CRM系统客户关系管理系统 .
Day04
03-13
第04天
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 664
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 159
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1102
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 753
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 350
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
用vue实现json模版编辑器
qq_44428688的博客
05-14 529
设想业务逻辑是拖拽控件生成表单 动手做了一个简单的demo 业务的原型图设想如下所示其中使用的技术主要是vuedragger。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1038
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
Duplicate class found in the file 'D:\BJ230821\soft\text\day04\Java04\Day11\src\com\itguigu\homework02\Swan.java'
09-08
根据提供的引用内容[1]，在文件路径'D:\BJ230821\soft\text\day04\Java04\Day11\src\com\itguigu\homework02\Swan.java'中发现了重复的类。这说明在该文件中存在两个或更多同名的类。这种情况通常会导致编译错误或...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值