Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听
一例打尽。。:)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="demo.css" /> </head> <body> <div id="app"> <ul> <li @click="currentView = 'home'" >Home</li> <li @click="currentView = 'list'" >List</li> <li @click="currentView = 'detail'" >Detail</li> </ul> <keep-alive> <component :is="currentView"></component> </keep-alive> <br/> <component :is="currentView"></component> <br/><br/> <my-slot> <p slot="title"> {{title}}</p> <div slot="content"> {{ content}} </div> </my-slot> <br/><br/> <comp-a></comp-a> <comp-b></comp-b> </div> </body> <script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script> <script> Vue.component('my-slot', { template: '<div> \ <div class="title"> \ <slot name="title"></slot> \ </div> \ <div class="content"> \ <slot name="content"></slot> \ </div> \ </div>' }) var bus = new Vue(); var vm = new Vue({ el: "#app", data: { currentView: 'home', title: "This is a title", content: "This is the content" }, components: { home: { template: '<div> \ <p>Home</p> \ <ul> \ <li v-for="item in items"> {{ item }} </li> \ </ul> \ </div>', data: function() { return { items: [] } }, active: function(done) { var that = this; setTimeout(function() { that.items = [1, 2, 3, 4, 5]; done(); }, 1000) } }, list: { template: '<div>List</div>' }, detail: { template: '<div>Detail</div>' }, compA: { template: '<div> \ <input type="text" v-model="name" /> \ <button @click="create">增加</button> \ </div>', data: function() { return { a: "" } }, methods: { create: function() { bus.$emit('create', {name: this.name}); this.name=''; } } }, compB: { template: '<ul> \ <li v-for="item in items">{{ item.name }} </li> \ </ul>', data: function() { return { items: [] } }, mounted() { var that = this; bus.$on('create', function(data){ that.items.push(data); }) } } } }) </script> </html>
Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听的更多相关文章
- Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用
一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...
- vue中的事件监听之——v-on vs .$on
跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- vue自定义组件添加原生事件监听
注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- Vue学习笔记(二)动态绑定、计算属性和事件监听
目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
随机推荐
- oracle(sql)基础篇系列(三)——数据维护语句、数据定义语句、伪列
DML语句 insert 向表中插入新的记录 --三种插入方式 --(1)不写字段的名字,直接按照字段的顺序把值逐个往里插 insert into dept2 values(50,'DANAME',' ...
- 《Cracking the Coding Interview》——第5章:位操作——题目5
2014-03-19 06:22 题目:将整数A变成整数B,每次只能变一个二进制位,要变多少次呢. 解法:异或,然后求‘1’的个数. 代码: // 5.5 Determine the number o ...
- CentOS搭建pptpd服务笔记
pptpd.rpm 包下载.http://poptop.sourceforge.net/yum/stable/packages/ 参考资料:http://www.oschina.net/questio ...
- iOS笔记056 - UI总结02
九宫格布局 UICollectionViewController 创建控制器一定要指定默认的布局样式. // 加载一个九宫格布局的控制器,必须指定布局样式 UICollectionViewFlowLa ...
- JMeter学习笔记(十) 计数器
前面写了导出文件接口的测试,对于导出文件的文件名称,为了不重复(即不覆盖之前的文件),可以添加一个计数器来设置不同的index,另外也可以借助函数助手. 下面是我使用到的关于计数器的简单应用,其他的自 ...
- 你的第一个自动化测试:Selenium 自动化测试
前言: 让你掌握自动化测试暂时脱离手工点点点,本章节让你掌握 Selenium 如何定位.判定.操作元素(实现业务逻辑) 一. 前期准备 1.准备以下工具 1.Selenium下载地址:立即下载 2. ...
- python自动化运维篇
1-1 Python运维-课程简介及基础 1-2 Python运维-自动化运维脚本编写 2-1 Python自动化运维-Ansible教程-Ansible介绍 2-2 Python自动化运维-Ansi ...
- PC Server远程管理卡用户管理脚本实现
1.IPMI工作原理图: 2.脚本实现流程图: 3.适配服务器机型: 4.演示效果: 5.实现代码: #!/usr/bin/env bash # Author : JACK ZHAO # Date : ...
- python中的re模块,常用函数介绍
参考: http://www.cnblogs.com/tina-python/p/5508402.htm ======== 1,预定义字符集,可以写在字符集[....]中 \d 数字: \D 非数字 ...
- mssql 格式化字符串 /时间 年月日时分秒
比如:1 想格式化 000001,100 格式化为000100: 思路是这样的 1000000 +格式化的数字 取后6位: select right(cast(power(10,6) as var ...