A作业（必做）
1、有以下广告数据（实际数据命名可以略做调整）
ad_data = {
tv: [
{img: 'img/tv/001.png', title: 'tv1'},
{img: 'img/tv/002.png', title: 'tv2'},
{img: 'img/tv/003.png', title: 'tv3'},
{img: 'img/tv/004.png', title: 'tv4'},
],
phone: [
{img: 'img/phone/001.png', title: 'phone1'},
{img: 'img/phone/002.png', title: 'phone2'},
{img: 'img/phone/003.png', title: 'phone3'},
{img: 'img/phone/004.png', title: 'phone4'},
]
}
i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据
ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
2、在第1题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.wrap:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="app">
<div>
<h3 @click="is_open = 'tv'">电视</h3>
<h3 @click="is_open = 'phone'">手机</h3>
<div class="wrap" style="float:left;" v-if="is_open === 'tv'">
<local-tag @action="actionFn" v-for="tv_data in ad_data.tv" :data="tv_data"></local-tag>
</div>
<div class="wrap" style="float:left;" v-else>
<local-tag @action="actionFn" v-for="phone_data in ad_data.phone" :data="phone_data"></local-tag>
</div>
</div>
<h2>{{ h2 }}</h2>
</div>
<script src="js/vue.js"></script>
<script>
let ad_data = {
tv: [
{img: 'img/tv/002.jpg', title: 'tv1'},
{img: 'img/tv/002.jpg', title: 'tv2'},
{img: 'img/tv/002.jpg', title: 'tv3'},
{img: 'img/tv/002.jpg', title: 'tv4'},
],
phone: [
{img: 'img/phone/001.jpg', title: 'phone1'},
{img: 'img/phone/001.jpg', title: 'phone2'},
{img: 'img/phone/001.jpg', title: 'phone3'},
{img: 'img/phone/001.jpg', title: 'phone4'},
]
};
let localTag = {
props: ['data'],
template: `
<div>
<img :src="data.img" alt="" width="80" style="margin: 5px;" @click="f1">
<p style="text-align:center;">{{ data.title }}</p>
</div>
`,
data() {
return {
ad_data,
data: data,
}
},
methods: {
f1() {
this.$emit('action', this.data.title)
}
}
};
new Vue({
el: '#app',
data: {
ad_data: ad_data,
h2: '未选中任何广告',
is_open: '',
},
components: {
localTag
},
methods: {
click1() {
console.log(111)
},
actionFn(a) {
this.h2 = a + '被选中'
}
}
})
</script>
</body>
</html>
B作业（选做）
1、给自己电脑中配置好vue环境，创建一个vue项目，可以参考课件中的 vue项目创建.md
2、预习视频， 尝试在项目基础上完成A作业（利用vue文件，创建视图组件，页面小组件，组件的导入、渲染以及传参）