前端框架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代码 界面
随机推荐
- ViewPlane类定义
这个类主要是记录了所有跟视图窗口有关的数据,用于显示. 类声明: #pragma once #ifndef __VIEWPLANE_HEADER__ #define __VIEWPLANE_HEADE ...
- 用固态U盘让你的办公环境随身移动
有些人因为家中的电脑设备没有办公环境,或者是软件太多装起来麻烦,以及环境不同步等原因上下班总是背着电脑,其实大可不必,只要将系统装进U盘,就可以让你的办公环境随身移动.在公司时启动U盘系统工作,下班后 ...
- Java 可重入锁的那些事（一）
本文主要包含的内容:可重入锁(ReedtrantLock).公平锁.非公平锁.可重入性.同步队列.CAS等概念的理解 显式锁 上一篇文章提到的synchronized关键字为隐式锁,会自动获取和自动释 ...
- 计算机的主存储器（RAM）
主存储器是存放指令和数据的,并能由 CPU 直接随机存取的存储器.主要由存储体.控制线路.地址寄存器.数据寄存器和地址译码电路五部分组成.
- 万物皆可集成系列：低代码释放用友U8+深度价值（2）—数据拓展应用
在上一篇内容我们介绍了如何利用低代码开发套件实现低代码应用与U8+系统的对接集成,本次给大家带来的是如何将用友U8+系统中的数据进行价值扩展和实际应用. 我们以生产物料齐套分析为例来说明如何利用低代码 ...
- 技术管理进阶——技术Leader需要数据思维
原创不易,求分享.求一键三连 假设我长得很漂亮,拥有众多追求者,但是初出闺房的我对这世界上的男人毫无认知,那么该如何选择呢?这真是一个问题! 妈妈说,愿意为我花钱的男人未必爱我,但不愿意为我花钱的男人 ...
- 动态规划——leetcode55、跳跃游戏
1.题目描述: 2.解题方法:动态规划 动态规划解题步骤: 1.确定状态: 最后一步:如果能跳到最后一个下标,我们考虑他的最后一步到n-1(最后一个下标),这一步是从 i 跳过来的,i<n-1 ...
- 做自动化测试选择Python还是Java？
你好,我是测试蔡坨坨. 今天,我们来聊一聊测试人员想要进阶,想要做自动化测试,甚至测试开发,如何选择编程语言. 前言 自动化测试,这几年行业内的热词,也是测试人员进阶的必备技能,更是软件测试未来发展的 ...
- Arrays.asList()你真的知道怎么用吗？
发现问题 前几天在看别人的项目的时候,发现一个问题,简单复现一下这个问题 // 注意这是一个Integer对象的数组哦 Integer[] arr = new Integer[]{9999,88,77 ...
- 【金九银十必问面试题】站在架构师角度分析问题，如何解决TCC中的悬挂问题
"如何解决TCC中的悬挂问题"! 一个工作了4年的Java程序员,去京东面试,被问到这个问题. 大家好,我是Mic,一个工作了14年的Java程序员 这个问题面试官想考察什么方面的 ...