前端框架Vue------＞第二天学习（1）插槽
欢迎加入刚建立的社区：http://t.csdn.cn/Q52km
加入社区的好处：
1、专栏更加明确、便于学习
2、覆盖的知识点更多、便于发散学习
3、大家共同学习进步
3、不定时的发现金红包（不多哈）
10 、插槽内容
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>插槽内容</title>
</head>
<body style="background-color: pink">
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in items" v-bind:item=item></todo-items>
</todo>
</div>
<script>
//定义 待办事项组件
Vue.component("todo",{
template: '<div><slot name=\'todo-title\'></slot><ul><slot name=\'todo-items\'></slot></ul></div>'
});
//定义待办事项-标题-组件
Vue.component("todo-title",{
props:['title'],
template: "<div>{{title}}</div>"
});
//定义待办事项-内容组件
Vue.component("todo-items",{
props:['item'],
template:"<li>{{item}}</li>"
});
var app = new Vue({
el:"#app",
data:{
title:"插槽1",
items:['A','B','C']
}
})
</script>
</body>
</html>
11 、自定义事件
不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：
this.$emit('myEvent')
则监听这个名字的 kebab-case 版本是不会有任何效果的：
<my-component v-on:my-event="doSomething"></my-component>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>插槽内容</title>
</head>
<body style="background-color: pink">
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item=item v-bind:index="index" v-on:remove="removeItems"></todo-items>
</todo>
</div>
<script>
//定义 待办事项组件
Vue.component("todo",{
template: '<div><slot name=\'todo-title\'></slot><ul><slot name=\'todo-items\'></slot></ul></div>'
});
//定义待办事项-标题-组件
Vue.component("todo-title",{
props:['title'],
template: "<div>{{title}}</div>"
});
//定义待办事项-内容组件
Vue.component("todo-items",{
props:['item','index'],
template:"<li>{{index}}=====>{{item}} <button v-on:click='remove'>删除</button></li> ",
methods:{
remove:function () {
this.$emit("remove")
}
}
});
var app = new Vue({
el:"#app",
data:{
title:"插槽1",
items:['A','B','C']
},
methods: {
removeItems:function (index) {
this.items.splice(index,1)
}
}
})
</script>
</body>
</html>
前端框架Vue------＞第二天学习（1）插槽的更多相关文章
- 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 前端框架 Vue 初探
一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...
- 前端框架VUE——安装及初始化
本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...
- 前端框架Vue------＞第一天学习、Vue学习的路径、Vue官网（1）
文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...
- 前端框架vue学习笔记：环境搭建
兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...
- 今日前端框架Vue学习笔记
在线网页网址http://xingxunxinxi.com/StudentCourse/first.html代码 界面
随机推荐
- Python 车主之家全系车型（包含历史停售车型）配置参数爬虫
本文仅供学习交流使用,如侵立删!demo下载见文末 车主之家全系车型(包含历史停售车型)配置参数爬虫 先上效果图 环境: win10 ,Contos7.4 python3.9.4 pycharm202 ...
- Dolphin Scheduler 1.2.0 部署参数分析
本文章经授权转载 1 组件介绍 Apache Dolphin Scheduler是一个分布式易扩展的可视化DAG工作流任务调度系统.致力于解决数据处理流程中错综复杂的依赖关系,使调度系统在数据处理流程 ...
- 【沥血整理】灰度（二值）图像重构算法及其应用（morphological reconstruction）。
不记得是怎么接触并最终研究这个课题的了,认识我的人都知道我是没有固定的研究对象的,一切看运气和当时的兴趣.本来研究完了就放在那里了,一直比较懒的去做总结,但是想一想似乎在网络上就没有看到关于这个方面的 ...
- 如何定义 Java 的回调函数，与 JavaScript 回调函数的区别
JavaScript 中的回调函数 在 JavaScript 中经常使用回调函数,比如:get 请求.post 请求等异步任务.在我们请求之前以及请求之后,都需要完成一些固定的操作,比如:请求之前先从 ...
- 基于 .NET 6 的轻量级 Webapi 框架 FastEndpoints
大家好,我是等天黑. FastEndpoints 是一个基于 .NET 6 开发的开源 webapi 框架,它可以很好地替代 .NET Minimal APIs 和 MVC ,专门为开发效率而生,带来 ...
- Clickhouse基准测试实践
1.概述 本篇博客将对MySQL.InfluxDB.Clickhouse在写入时间.聚合查询时间.磁盘使用等方面的性能指标来进行比较. 2.内容 比较的数据集,是使用的Clickhouse官网提供的6 ...
- 简易的AutoPlayCarousel 轮播控件
原理是使用StackPanel 的margin属性的偏移来实现轮播的效果 废话不多说直接上代码 AutoPlayCarousel核心代码 [ContentProperty(nameof(Childre ...
- 二 代理模式【Proxy Pattern】 来自CBF4LIFE 的设计模式
什么是代理模式呢?我很忙,忙的没空理你,那你要找我呢就先找我的代理人吧,那代理人总要知道被代理人能做哪些事情不能做哪些事情吧,那就是两个人具备同一个接口,代理人虽然不能干活,但是被代理的人能干活呀. ...
- windows下Inno Setup打包
基于inno setup的windos打包,主要脚本语言inno script.下载地址:https://jrsoftware.org/isdl.php相关打包教程:https://blog.csdn ...
- 食之无味？App Startup 可能比你想象中要简单
请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...