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 ...
随机推荐
- hadoop集群之Datenode无法启动解决办法
hadoop集群之Datenode无法启动解决办法 我们在启动hadoop集群的时候,通过jps查看进程,发现namenode RM和Secondary NameNode都有,但datanode没有启 ...
- sourceInsight *** more bytes are required
现象:用sourceinsight修改的文件无法保存,提示 No enough space to save "XXX", xxx more bytes are required. ...
- PAT、PMT、SDT详解
下面针对解复用程序详细分析一下PAT,PMT和SDT三类表格的格式. 如下图,四个频道复用 PAT---Program Association Table,节目关联表 .PAT表携带以下信息: (1) ...
- convlstm学习资料
https://guanfuchen.github.io/post/markdown_blog_ws/markdown_blog_2017_11/convolutional_lstm_network_ ...
- springboot整合jersey
https://blog.csdn.net/xiongpei00/article/details/76576420
- 编译caffe遇到的问题
1. failed to see hdf5.h https://askubuntu.com/questions/629654/building-caffe-failed-to-see-hdf5-h 2 ...
- mongodb 部署
安装mongodb-3.4 1)将安装包上传至服务器 2)对压缩文件进行解压 tar -zxvf mongodb-linux-x86_64-suse12-v3.4-latest.tar.gz 3)把解 ...
- json字符串数组判断其中
嘴挺笨的描述不清,直接看图,console.log(data1)是下图 获取的table中的数据组成的json对象(这里我不明白json对象啊json字符串啊json数组啊.我只会- 需要啥就转换成啥 ...
- 【JAVA进阶】——myEclipse连接mysql启动数据库服务
背景: DRP项目要求使用Oracle数据库,但目前由于种种原因,暂时还装不了Oracle.但也不能闲着啊,就拿mysql来试试.安装完mysql以后,使用myEclipse连接数据库,就一直报错,报 ...
- vs 2012 未能找到与约束contractName Microsoft.VisualStudio.Utilities...匹配的导出
系统自动更新后,打开项目进行维护时,居然出错了,报的错误信息为“未能找到与约束contractName Microsoft.VisualStudio.Utilities...匹配的导出” 上网查了下, ...