<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<script src="../../js/vue.js"></script>
<div id="app">
<see-see :column-list="columnList">
<template slot-scope="seeSlotScope">
<commodity-list :commodity-list="seeSlotScope.seerow">
<template slot-scope="slotScope">
<commodity :commodity="slotScope.row" @parent-click="itemClick"></commodity>
</template>
</commodity-list>
</template>
</see-see>
</div>
<template id="seeSee">
<div>
<div class="row">
<div v-for="item in columnList">
<div>{{item.columnName}}</div>
<!-- 填充commodityList-->
<slot :seeRow="item.commodityList"></slot>
</div>
</div>
<div class="row">
seeSee圈footer
</div>
</div>
</template>
<template id="commodityList">
<div>
<div v-for="item in commodityList" class="col-md-4">
<slot :row="item"></slot>
</div>
</div>
</template>
<template id="commodity">
<div>
<img style="height:100px":src="commodity.pic"></img>
<div>
<a @click="onCommodityClick(commodity)">{{commodity.desc}}</a>
</div>
</div>
</template>
<script>
const seeSee= {
template: '#seeSee',
props: {columnList:Array}
}
const commodityList={
template: '#commodityList',
props:{commodityList: Array}
}
const commodity = {
template: '#commodity',
props:{commodity: Object},
methods: {
onCommodityClick(commodity){
this.$emit('parent-click', commodity)
}
}
}
const app = new Vue({
el: '#app',
data: {
message: '你好',
columnList: [
{columnName: '有好货', commodityList:
[
{pic:'1.jpg',url:'http://1.jpg',desc:'第一张图片'},
{pic:'2.jpg',url:'http://2.jpg',desc:'第二张图片'},
{pic:'5.jpg', ur:'http://5.jpg',desc:'第五张图片'}
]
},
{columnName: '爱逛街', commodityList:
[
{pic:'3.jpg',url:'http://3.jpg',desc:'第三张图片'},
{pic:'4.jpg',url:'http://4.jpg',desc:'第四张图片'},
{pic:'6.jpg',url:'http://6.jpg',desc:'第六张图片'}
]
}
]
},
components: {
commodity,
commodityList,
seeSee
},
methods: {
itemClick(item){
console.log('图片点击了', item)
}
}
})
</script>
</body>
</html>
vue基础学习代码342234
需积分: 5 77 浏览量
2022-03-19
18:26:53
上传
评论
收藏 898KB 7Z 举报
vue-learn.7z （42个子文件） 
vue-learn .idea 
vue-learn.iml 458B modules.xml 270B workspace.xml 43KB vueLearn 12-前端模块化 03-webpack 笔记 379B 01-为什么要有模块化 02-ES6的模块化实现 笔记 513B 05-es6补充 
02-声明式编程和命令式编程.html 405B 01-为什么放弃var.html 711B 03-js中常用的三个函数.html 2KB 05-补充 0B
1.jpg 47KB 09-v-model使用 04-v-model修饰符.html 555B 03-v-model结合其他input使用.html 3KB 02-v-model使用原理.html 909B 01-基本使用.html 369B 10-组件使用 02-全局组件和局部组件.html 827B 03-组件的语法糖写法.html 491B 04-组件的data是函数.html 601B 05-为什么组件的data是函数.html 892B 07-子组件向父组件传递.html 1KB 06-组件通信-父组件向子组件传递数据.html 1KB 01-基本使用.html 783B js vue.js 336KB 06-for循环 01-vue数组下标无法感知.html 327B .idea vueLearn.iml 458B codeStyleSettings.xml 281B modules.xml 268B workspace.xml 40KB 11-组件高级 03-作用域插槽.html 2KB 02-具名插槽.html 675B 01-插槽的基本使用.html 769B 04-作用域插槽的实际使用 2.jpg 195KB 1.jpg 47KB 6.jpg 199KB 3.jpg 86KB 5.jpg 161KB 03-添加bootstrap.html 3KB 4.jpg 125KB 04-伪代码.html 2KB 01-不拆分文件.html 2KB 02-作用域插槽三级组件使用.html 2KB 07-新指令练习 01-过滤器.html 931B 99-todo 01-webpack需要学习 48B
评论0