没有合适的资源?快使用搜索试试~ 我知道了~
Day04_vue组件_组件通信_todo案例(1).pdf
需积分: 0 0 下载量 7 浏览量
2023-05-03
22:10:11
上传
评论
收藏 8.05MB PDF 举报
温馨提示
试读
70页
Day04_vue组件_组件通信_todo案例(1).pdf
资源推荐
资源详情
资源评论
Day04
知识点自测
√
this指向
√
=作用
今日学习目标
1. 能够理解vue组件概念和作用
2. 能够掌握封装组件能力
3. 能够使用组件之间通信
4. 能够完成todo案例
1. vue组件
let obj = {
fn: function(){
// this指向此函数的调用者
},
fn () {
// this指向当前函数的调用者 (如果都是在vue里, this指向
的都是vue实例对象)
},
fn: () => {
// this指向外层函数作用域this的值
}
}
obj.fn();
axios().then(res => {
// 这里的this的值是多少哦?
})
let a = 10;
let b = a;
b = 20; // 基础类型, 单纯的值的赋值
let a = {name: "哈哈"};
let b = a; // a变量的值是引用类型, a里保存的是对象在堆的内存地
址, 所以b和a指向同一个对象 (引用类型=是内存地址的赋值)
b.name = "刘总";
1.0_为什么用组件
以前做过一个折叠面板
需求: 现在想要多个收起展开的部分
方案1: 复制代码
代码重复 冗余
不利于维护
效果:
步骤:
1. 案例用less写的样式, 所以下载
2. 模板标签 - 在这个基础上, 把==要复用的多复制几份==
yarn add less [email protected] -D
<template>
<div id="app">
<h3>案例:折叠面板</h3>
<div>
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span class="btn" @click="isShow = !isShow">
{{ isShow ? '收起' : '展开' }}
</span>
</div>
<div class="container" v-show="isShow">
<p>寒雨连江夜入吴, </p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问,</p>
<p>一片冰心在玉壶。</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
}
}
}
</script>
<style lang="less">
body {
background-color: #ccc;
#app {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
h3 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 1em;
}
.title h4 {
3. 上面复制3份, 发现变化一起变化
解决方案: 不同的部分, 用不同的isShow变量
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #ccc;
padding: 0 1em;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
}
}
</style>
<template>
<div id="app">
<h3>案例:折叠面板</h3>
<div>
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span class="btn" @click="isShow = !isShow">
{{ isShow ? '收起' : '展开' }}
</span>
</div>
<div class="container" v-show="isShow">
<p>寒雨连江夜入吴, </p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问,</p>
<p>一片冰心在玉壶。</p>
</div>
</div>
<div>
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span class="btn" @click="isShow1 = !isShow1">
{{ isShow1 ? '收起' : '展开' }}
</span>
</div>
<div class="container" v-show="isShow1">
<p>寒雨连江夜入吴, </p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问,</p>
<p>一片冰心在玉壶。</p>
</div>
</div>
<div>
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span class="btn" @click="isShow2 = !isShow2">
{{ isShow2 ? '收起' : '展开' }}
</span>
</div>
<div class="container" v-show="isShow2">
<p>寒雨连江夜入吴, </p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问,</p>
<p>一片冰心在玉壶。</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
isShow1: false,
isShow2: false
}
}
}
</script>
<style lang="less">
body {
background-color: #ccc;
#app {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
h3 {
text-align: center;
}
.title {
display: flex;
剩余69页未读,继续阅读
资源评论
hotday1
- 粉丝: 5
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功