Vue --- 组件练习
一
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) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 200px;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
<body>
<!--2、有以下广告数据（实际数据命名可以略做调整）-->
<!--ad_data = {-->
<!--tv: [-->
<!--{img: 'img/101.jpg', title: 'tv1'},-->
<!--{img: 'img/102.jpg', title: 'tv2'},-->
<!--{img: 'img/103.jpg', title: 'tv3'},-->
<!--{img: 'img/104.jpg', title: 'tv4'},-->
<!--],-->
<!--phone: [-->
<!--{img: 'img/201.jpg', title: 'phone1'},-->
<!--{img: 'img/202.jpg', title: 'phone2'},-->
<!--{img: 'img/203.jpg', title: 'phone3'},-->
<!--{img: 'img/204.jpg', title: 'phone4'},-->
<!--]-->
<!--}-->
<!--i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据-->
<!--ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）-->
<div id="add">
<h2 @click="t1">电视</h2>
<h2 @click="p1">手机</h2>
<div class="wrap" v-if="tt">
<my-tv v-for="t2 in holl.tv" :im="t2.img" :tit="t2.title" ></my-tv>
</div>
<div class="wrap" v-if="pp">
<my-tv v-for="p2 in holl.phone" :im="p2.img" :tit="p2.title" ></my-tv>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let ad_data = {
tv: [
{img: 'img/101.jpg', title: 'tv1'},
{img: 'img/102.jpg', title: 'tv2'},
{img: 'img/103.jpg', title: 'tv3'},
{img: 'img/104.jpg', title: 'tv4'},
],
phone: [
{img: 'img/201.jpg', title: 'phone1'},
{img: 'img/202.jpg', title: 'phone2'},
{img: 'img/203.jpg', title: 'phone3'},
{img: 'img/204.jpg', title: 'phone4'},
]
};
let myTv={
props:['im','tit'],
template :`
<div class="box">
<img :src="im" alt="">
<h2>{{ tit }}</h2>
</div>
`,
};
let myPh={
props:['im','tit'],
template :`
<div class="box">
<img :src="im" alt="">
<h2>{{ tit }}</h2>
</div>
`,
};
new Vue({
el:'#add',
data:{
holl:ad_data,
tt:'',
pp:''
},
components:{
myTv,
myPh
},
methods:{
t1(){
this.tt=1
},
p1(){
this.pp=1
}
}
})
</script>
</html>
二
页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 200px;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
.gg {
margin-top: 615px;
margin-left: 45%;
}
</style>
<body>
<!--3、在第2题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）-->
<!--i）当没有点击任何广告，h2 标签显示：未选中任何广告-->
<!--ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中-->
<div id="add">
<h2 @click="t1">电视</h2>
<h2 @click="p1">手机</h2>
<div class="wrap" v-if="tt">
<my-tv v-for="t2 in holl.tv" :im="t2.img" :tit="t2.title" @tb="tb1"></my-tv>
</div>
<div class="wrap" v-if="pp">
<my-ph v-for="p2 in holl.phone" :im="p2.img" :tit="p2.title" @ppb="pbb1"></my-ph>
</div>
<h2 class="gg">{{ h2 }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let ad_data = {
tv: [
{img: 'img/101.jpg', title: 'tv1'},
{img: 'img/102.jpg', title: 'tv2'},
{img: 'img/103.jpg', title: 'tv3'},
{img: 'img/104.jpg', title: 'tv4'},
],
phone: [
{img: 'img/201.jpg', title: 'phone1'},
{img: 'img/202.jpg', title: 'phone2'},
{img: 'img/203.jpg', title: 'phone3'},
{img: 'img/204.jpg', title: 'phone4'},
]
};
let myTv={
props:['im','tit'],
template :`
<div class="box" @click="tt1">
<img :src="im" alt="">
<h2>{{ tit }}</h2>
</div>
`,
methods:{
tt1(){
this.$emit('tb',this.tit)
}
}
};
let myPh={
props:['im','tit'],
template :`
<div class="box" @click="bb1">
<img :src="im" alt="">
<h2>{{ tit }}</h2>
</div>
`,
methods:{
bb1(){
this.$emit('ppb',this.tit)
}
}
};
new Vue({
el:'#add',
data:{
holl:ad_data,
tt:'',
pp:'',
h2:'未选中任何商品',
},
components:{
myTv,
myPh
},
methods:{
t1(){
this.tt=1
},
p1(){
this.pp=1
},
tb1(a){
this.h2=a
},
pbb1(a){
this.h2=a
}
}
})
</script>
</html>
Vue --- 组件练习的更多相关文章
- vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- vue组件，撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
随机推荐
- js确定取消—js确定取消判断
国瑞前端: js确定取消,在html界面中,有css模拟的模态框,这样显示的就会更好看一些,那么javascript有没有自带的弹框呢,当然是有的,接下来我就来给大家介绍一下把: js确定取消-警告框 ...
- Delphi文字转语音TTS【支持选择语音库，播放，暂停，开始，停止，生成语音文件，设置音量，设置语速】
作者QQ:(648437169) 点击下载➨文字转语音TTS [Delphi 文字转语音TTS]调用系统自带的TTS组件,支持XP,vista,win7,win8,win10系统,支持选择语音库,播放 ...
- 「UR#5」怎样更有力气
「UR#5」怎样更有力气 解题思路 考虑没有限制的情况,一定是把操作离线下来,按照边权从小到达做.可以发现,如果没有限制,完全图是多余的,直接拿树边进行合并就可以了.我们要做这么一件事情,把每个点属于 ...
- 24H玩转 Grafana 被工程师称相当专业，如何做到？
国庆假期发生了两件小事,其一是我默默度过 35 周岁生日,其二是玩了下grafana `并在节后第一天被工程师 M 称赞:相当专业. 1.我为什么要玩 grafana 呢? 数月前我提交了一份数据后台 ...
- Hadoop2.x 集群搭建
Hadoop2.x 集群搭建 一些重复的细节参考Hadoop1.X集群完全分布式模式环境部署 1 HADOOP 集群搭建 1.1 集群简介 HADOOP 集群具体来说包含两个集群:HDFS 集群和YA ...
- mysql 5.7 非正常安装，无法启动 服务没有报告任何错误
以前,完整安装mysql5.7程序时,由于程序太大,可以将安装缓存目录中的安装文件(较小)复制出来后,留以后使用. mysql--win32.msi 2 mysql-5.7.17-winx64.msi ...
- sqoop从mysql导数据到hive报错：Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
背景 使用sqoop从mysql导数据到hive,从本地服务器是可以访问mysql的(本地服务器是hadoop集群的一个datanode),但是sqoop导数据的时候依然连接不上mysql 报错如下: ...
- Fiddler-在fiddlerscript中修改某个请求的请求头内容
1.进入 OnBeforeRequest函数 在里面添加如下代码 if(oSession.fullUrl.Contains("url")){// //headers中添加测试参数 ...
- python爬虫-房天下-登录
房天下-登录 本次爬取的网址为:https://passport.fang.com 一.分析请求 输入用户名和密码,点击登录按钮 请求的参数为: uid: 123456789 pwd: 64ccd42 ...
- AngularJS重型前端框架
一.AngularJs AngularJs是一种前端的重型框架,而现在正在被Aue.js所取代.而Aue的和AngularJs大同小异. AngularJs核心功能有MVC.模块化.自动化双向数据绑定 ...