vue插槽用法(极客时间Vue视频笔记)
vue插槽
插槽是用来传递复杂的内容，类似方法
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div class="app">
<todo-list>
<todo-item v-for="item in classList" :title="item.title" :prize="item.prize">
<!--分发内容，类似java里面的aop吧
//2.5版本以后的插槽用法-->
<template v-slot:pre-icon>
<span>前置插槽</span>
</template>
<!--2.5版本之前用法-->
<span slot="suf-icon">后置插槽</span>
</todo-item>
</todo-list>
</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: {
title: String,
prize: {
type: Number,
default: 40
},
},
//默认插槽
template: `<li>
<slot name="pre-icon"></slot>
<button>删除</button>
课程名:{{title}}
价格:{{prize}}
<slot name="suf-icon"></slot>
<slot><span>默认插槽</span></slot>
</li>`,
data: function () {
return { }
},
methods: {
}
})
Vue.component('todo-list', {
template: `
<ul>
<slot ></slot>
</ul>
`, data: function () {
return { }
}
})
var vm = new Vue({
el: '.app',
data: {
message: 'hello world',
showMessage: false,
title: "是否删除",
classList: [
{
title: '课程1',
prize: 50 },
{
title: '课程2',
prize: 80
}
]
},
methods:{
},
})
</script>
</body> </html>
vue插槽用法(极客时间Vue视频笔记)的更多相关文章
- vue组件事件(极客时间Vue视频笔记)
vue组件核心:事件 <body> <div class="app"> <todo-list></todo-list> {{mess ...
- vue组件注册(极客时间Vue视频笔记)
vue组件注册 组件是为了方便代码复用,只需引入组件即可在不同的地方使用想同的功能代码 <body> <div class="app"> <todo- ...
- 极客时间-vue开发实战学习（ant-design vue作者）
vue基础 属性 事件 插槽 指令(Directives) 生命周期 底层原理 vue生态 路由管理器vue Router 状态管理器vuex 同构Nuxt vue实战 实战项目-ant-desing ...
- 第一个vue程序(极客时间Vue视频笔记)
第一个vue程序 <body> <div class="app"> {{message}}--{{message+','+message}} <div ...
- java爬虫系列第四讲-采集"极客时间"专栏文章、视频专辑
1.概述 极客时间(https://time.geekbang.org/),想必大家都知道的,上面有很多值得大家学习的课程,如下图: 本文主要内容 使用webmagic采集极客时间中某个专栏课程生成h ...
- 【视频合集】极客时间 react实战进阶45讲 【更新中】
https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...
- 极客时间_Vue开发实战_汇总贴
视频地址: https://time.geekbang.org/course/intro/163 https://github.com/tangjinzhou/geektime-vue-1 电脑dem ...
- 左耳朵耗子：我为什么要在极客时间 App 开设独家专栏？
参考链接:https://www.infoq.cn/article/2018/01/why-geektime 不少朋友都知道我在极客时间App 上开了一个收费专栏<左耳听风>,这个专栏会开 ...
- "做中学"之“极客时间”课程学习指导
目录 "做中学"之"极客时间"课程学习指导 所有课程都可以选的课程 Java程序设计 移动平台开发 网络攻防实践 信息安全系统设计基础 信息安全专业导论 极客时 ...
随机推荐
- ZROI 19.08.01 树上数据结构
1.总览 LCT 链分治(树剖) 点/边分治 2.点分治 一棵树,点有\(0/1\),多次修改,询问最远的两个\(1\)距离. 建出点分树,每个子树用堆维护:①最远的\(1\)距离:②它的每个儿子的① ...
- JAVA笔记16-生产者消费者问题
http://www.cnblogs.com/happyPawpaw/archive/2013/01/18/2865957.html import java.util.*; public class ...
- Java面试之基础篇（5）
41.a.hashCode() 有什么用?与 a.equals(b) 有什么关系? hashCode() 方法对应对象整型的 hash 值.它常用于基于 hash 的集合类,如 Hash ...
- 实验 5 Spark SQL 编程初级实践
实验 5 Spark SQL 编程初级实践 参考厦门大学林子雨 1． Spark SQL 基本操作 将下列 json 数据复制到你的 ubuntu 系统/usr/local/spark 下,并 ...
- AJAX - 服务器 响应
AJAX - 服务器 响应 服务器响应 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性.大理石构件来图加工 属性 描 ...
- 【深入理解CLR】1:CLR的执行模型
将源代码编译成托管模块 下图展示了编译源代码文件的过程.如图所示,可用支持 CLR 的任何一种语言创建源代码文件.然后,用一个对应的编译器检查语法和分析源代码.无论选用哪一个编译器,结果都是一个托管模 ...
- [BZOJ2560]串珠子：状压DP+容斥原理
分析 为什么我去年6月做过这道题啊,估计当时抄的题解. 具体做法就是令\(f[S]\)表示保证连通点集\(S\)的方案数,\(g[S]\)表示不保证连通点集\(S\)的方案数. 容易想到: \[g[S ...
- selenium+键盘鼠标
一.简单操作 1.点击(鼠标左键)页面按钮:click() 2.请空输入框:clear() 3.输入字符串:send_keys() 二.模拟键盘 模拟键盘的操作需要先导入键盘模块:from selen ...
- 1.Python编程基础
1. 其实,程序指的就是一系列指令,用来告诉计算机做什么,而编写程序的关键在于,我们需要用计算机可以理解的语言来提供这些指令. 虽然借助 Siri(Apple).Google Now(Android) ...
- Linux安装部署FTP服务器
Linux安装部署FTP服务器 本文章会将安装FTP服务器的步骤以及一些遇到的问题来记录下 因为项目中要与第三方对接数据,需要用到FTP服务器以提供他们每天上传数据,因为之前在本地的VMware虚 ...