一例打尽。。：）

<!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, 动态组件，事件监听的更多相关文章

  1. Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用

    一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...

  2. vue中的事件监听之——v-on vs .$on

    跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...

  3. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  4. vue自定义组件添加原生事件监听

    注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...

  5. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  6. [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

    1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...

  7. Vue学习笔记（二）动态绑定、计算属性和事件监听

    目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...

  8. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  9. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

随机推荐

  1. Docker构建nginx+uwsgi+flask镜像（一）

    前言 笔者之前是从事Java方面的工作,自从18年5月左右来到新的公司,接触到Python,被其简单优雅的语法风格深深吸引,同时,新公司也帮助笔者打开Docker世界的大门,让笔者体会到“一次打包,到 ...

  2. ElasticSearch学习笔记（三）-- 查询

    1. URISearch详解与演示 2. QueryDSL简介 3. 字段类查询简介及match-query 4. 相关性算分 5. match-phrase-query 6. query-strin ...

  3. 如何在一个顶级域名下用两个二级域名访问vps下的两个项目网站--完美解决骗

    本人是原址是http://www.webzhe.com/server/340 后经过本人的实践修改,增加截图,等具体的步骤,完美解决 如何在vps中设置二级域名开通子网站,这个问题涉及到两步:一首先要 ...

  4. python与execl的读写

    [code=python] #复制execl中的部分数据到另一份execl中的相同位置 import xlrd import xlwt import xlutils.copy path1=" ...

  5. sklearn中predict()与predict_proba()用法区别

    predict是训练后返回预测结果,是标签值. predict_proba返回的是一个 n 行 k 列的数组, 第 i 行 第 j 列上的数值是模型预测 第 i 个预测样本为某个标签的概率,并且每一行 ...

  6. hnust 分蛋糕

    问题 B: 分蛋糕 时间限制: 1 Sec  内存限制: 128 MB提交: 2430  解决: 966[提交][状态][讨论版] 题目描述 今天是DK生日,由于DK的朋友很多,所以DK在蛋糕店定制了 ...

  7. python杂七杂八知识点

    1.中文编码问题解决办法:# _*_ coding:UTF8 _*_ 2.numpy.ndArray a = array([[1,2,3], [4, 5, 6]]) 3.numpy.argsort() ...

  8. 软件工程概论课堂测试一————添加新课程（web）

    设计思想 三个文件Class_add.java  add.jsp  addInput.jsp Class_add.java : 内封装方法:连接数据库.向数据库添加课程信息.判断非合理的输入情况.判断 ...

  9. php 值传递和引用传递的区别

    值传递:函数范围内对值的任何改变在函数外部都会被忽略 引用传递:函数范围内对值的任何改变在函数外部也能反映出这些修改 A:按值传递时,php必须复制值.特别是对于大型的字符串和对象来说,这将会是一个代 ...

  10. 基于MAC OS 操作系统安装、配置hadoop

    在Mac上安装Hadoop 对我这个之前从未接触过*nix的用户来说,使用命令行来做一系列的事情还是废了一番功夫.特写这个记录,以做备份. 获取Java 我的Mac运行的操作系统是OS X 10.7 ...