当前位置: 首页 > news >正文

前端学习——Vue (Day4)

组件的三大组成部分

在这里插入图片描述

组件的样式冲突 scoped

在这里插入图片描述

<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script><style scoped>
/* 1.style中的样式 默认是作用到全局的2.加上scoped可以让样式变成局部样式组件都应该有独立的样式,推荐加scoped(原理)-----------------------------------------------------scoped原理:1.给当前组件模板的所有元素,都会添加上一个自定义属性data-v-hash值data-v-5f6a9d56  用于区分开不通的组件2.css选择器后面,被自动处理,添加上了属性选择器div[data-v-5f6a9d56]
*/
div{border: 3px solid blue;margin: 30px;
}
</style>

在这里插入图片描述

data 是一个函数

在这里插入图片描述

App.vue<template><div class="app"><baseCount></baseCount><baseCount></baseCount><baseCount></baseCount></div>
</template><script>
import baseCount from './components/BaseCount'
export default {components: {baseCount,},
}
</script><style>
</style>
<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default {// data必须是一个函数 -> 保证每个组件实例,维护独立的一个数据data() {return {count: 100,}},
}
</script><style>
.base-count {margin: 20px;
}
</style>

在这里插入图片描述

在这里插入图片描述

组件通信

在这里插入图片描述

不同的组件关系 和 组件通信方案分类

在这里插入图片描述

组件通信解决方案

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

什么是 prop

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

props 校验

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

prop & data、单向数据流

在这里插入图片描述

综合案例

在这里插入图片描述

//App.vue<template><!-- 主体区域 --><section id="app"><ToDoHeader @add="handleAdd"></ToDoHeader><ToDoMain @del="handleDel" :list="list"></ToDoMain><ToDoFooter @clear="handleClear" :list="list"></ToDoFooter></section>
</template><script>
import ToDoHeader from './components/ToDoHeader.vue'
import ToDoMain from './components/ToDoMain.vue'
import ToDoFooter from './components/ToDoFooter.vue'// 渲染功能
// 1. 提供数据 -> 在App.vue
// 2. 通过父传子,将数据传递给ToDoMain
// 3. 利用v-for渲染// 添加功能
// 1. 收集表单数据 -> v-model
// 2. 监听事件 (回车+点击 都要进行添加)
// 3. 通过子传父,将任务名称传递给父组件App.vue// 删除功能
// 1. 监听删除点击事件(携带id)
// 2. 子传父,将删除id传递给App.vue
// 3. 进行删除filter// 底部合计:父传子list -> 渲染// 清空功能:子传父 -> 父组件进行清空操作// 持久化存储:watch深度监视list的变化 -> 往本地存储 -> 进入页面优先读取本地export default {data () {return {list:JSON.parse(localStorage.getItem('list')) || [{ id: 1, name:'打篮球'},{ id: 2, name:'看电影'},{ id: 3, name:'逛街'},]}},methods:{handleAdd(todoName){this.list.unshift({id:+new Date(),name:todoName})},handleDel(id){this.list = this.list.filter(item=>item.id!==id)},handleClear(){this.list=[]}},watch:{list:{deep:true,handler (newValue) {localStorage.setItem('list',JSON.stringify(newValue))}}},components: {ToDoHeader,ToDoMain,ToDoFooter}
}
</script><style></style>
//ToDoHeader
<template><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input @keyup.enter="handleAdd" v-model="todoName" placeholder="请输入任务" class="new-todo" /><button @click="handleAdd" class="add">添加任务</button></header>
</template><script>
export default {data(){return {todoName: ''}},methods:{handleAdd(){if(this.todoName.trim() === ''){alert('输入任务不能为空')return}this.$emit('add',this.todoName)this.todoName=''}}
}
</script><style></style>
//ToDoMain
<template><!-- 列表区域 --><section class="main"><ul class="todo-list"><li v-for="(item,index) in list" :key="item.id" class="todo"><div class="view"><span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label><button @click="handleDel(item.id)" class="destroy"></button></div></li></ul></section>
</template><script>
export default {props:{list:Array},methods:{handleDel(id){this.$emit('del',id)}}
}
</script><style></style>
//ToDoFooter
<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 {props:{list:Array},methods:{clear(){this.$emit('clear')}}
}
</script><style></style>

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

非父子通信 (拓展) - event bus 事件总线

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

<template><div class="base-a">我是A组件(接受方)<p>{{msg}}</p>  </div>
</template><script>
import Bus from '../utils/EventBus'
export default {data() {return {msg: '',}},created() {// 在A组件(接收方),进行监听Bus的事件(订阅消息)Bus.$on('sendMsg', (msg) => {// console.log(msg)this.msg = msg})},
}
</script><style scoped>
.base-a {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>
<template><div class="base-b"><div>我是B组件(发布方)</div><button @click="sendMsgFn">发送消息</button></div>
</template><script>
import Bus from '../utils/EventBus'
export default {methods: {sendMsgFn() {// 在B组件(发送方),触发事件的方式传递参数(发布消息)Bus.$emit('sendMsg', '今天天气不错,适合旅游')},},
}
</script><style scoped>
.base-b {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>
<template><div class="base-c">我是C组件(接受方)<p>{{msg}}</p>  </div>
</template><script>
import Bus from '../utils/EventBus'
export default {data() {return {msg: '',}},created() {Bus.$on('sendMsg', (msg) => {// console.log(msg)this.msg = msg})},
}
</script><style scoped>
.base-c {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>

在这里插入图片描述

在这里插入图片描述

进阶语法

v-model 原理

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
子组件

<template><div><select :value="value" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props:{value:String},methods:{handleChange(e){this.$emit('input',e.target.value)}}
}
</script><style>
</style>

父组件

<template><div class="app"><BaseSelect :v-model="selectId"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>

在这里插入图片描述

.sync 修饰符在这里插入图片描述

子组件

<template><div v-show="visible" class="base-dialog-wrap"><div class="base-dialog"><div class="title"><h3>温馨提示:</h3><button @click="close" class="close">x</button></div><div class="content"><p>你确认要退出本系统么?</p></div><div class="footer"><button @click="yes">确认</button><button @click="no">取消</button></div></div></div>
</template><script>
export default {props:{visible:Boolean},methods:{close(){this.$emit('update:visible',false)},yes(){this.$emit('update:visible',false)},no(){this.$emit('update:visible',false)}}
}
</script><style scoped>
.base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px;
}
.base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;
}
.base-dialog .content {margin-top: 38px;
}
.base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px;
}
.footer {display: flex;justify-content: flex-end;margin-top: 26px;
}
.footer button {width: 80px;height: 40px;
}
.footer button:nth-child(1) {margin-right: 10px;cursor: pointer;
}
</style>

父组件

<template><div class="app"><button @click="isShow = true">退出按钮</button><BaseDialog:visible.sync="isShow"></BaseDialog></div>
</template><script>
import BaseDialog from "./components/BaseDialog.vue"
export default {data() {return {isShow:false}},methods: {},components: {BaseDialog,},
}
</script><style>
</style>

在这里插入图片描述

ref 和 $refs

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

Vue异步更新、$nextTick

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

http://www.lryc.cn/news/98541.html

相关文章:

  • 如果你是一个嵌入式面试官,你会问哪些问题?
  • 学习笔记十三:云服务器通过Kubeadm安装k8s1.25,供后续试验用
  • 【Maven】Maven配置国内镜像
  • ChatGPT有几个版本,哪个版本最强,如何选择适合自己的?
  • pg_standby备库搭建
  • RNNLSTM
  • 到底什么是前后端分离
  • 【React】精选5题
  • MUR2080CT- ASEMI二极管的特性和应用
  • 安全测试国家标准解读——资源管理和内存管理
  • 3D元宇宙游戏,或许能引爆新的文娱消费增长点
  • (学习笔记-IP)IP基础知识
  • 神经数据库:用于使用 ChatGPT 构建专用 AI 代理的下一代上下文检索系统 — (第 2/3 部分)
  • 一文6个概念从0到1带你成功入门自动化测试【0基础也能看懂系列】
  • C++OpenCV(5):图像模糊操作(四种滤波方法)
  • 关于质数筛——数论
  • Spring Boot 应用程序生命周期扩展点妙用
  • 【Nodejs】操作mongodb数据库
  • SQL-每日一题【619.只出现一次的最大数字】
  • 紫光FPGA试用--软件篇
  • PDF添加水印以及防止被删除、防止编辑与打印
  • el-tree转换为表格样式的记录2
  • MS1826B HDMI 1进4出 视频拼接芯片
  • Spring之注解
  • 【UniApp开发小程序】悬浮按钮+出售闲置商品+商品分类选择【基于若依管理系统开发】
  • 一百三十三、Hive——Hive外部表加载含有JSON格式字段的CSV文件数据
  • rust gtk 桌面应用 demo
  • 《嵌入式 - 工具》J-link读写MCU内部Flash
  • 算法练习-LeetCode1071. Greatest Common Divisor of Strings
  • Nuget不小心用sudo下载后怎么在user里使用