<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>vue</title>

     <!--

    <script src="vue.js"></script>

    -->

 <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body> 

 <div id="counter-event-example">

  <parent-component></parent-component>

</div>

<script>

Vue.component('child-component', {

  // 有效，因为是在正确的作用域内

  template: '<div>  <h2>我是子组件的标题</h2>  <slot name="content1">    只有在没有要分发的内容时才会显示。  </slot><slot name="content2"></slot>  </div>',

  data: function () {

    return {

      someChildProperty: true

    }

  }

})

Vue.component('parent-component', {

  // 有效，因为是在正确的作用域内

  template: '<div>  <h1>我是父组件的标题</h1>  <child-component>    <p slot="content1">这是一些初始内容</p>    <p slot="content2">这是更多的初始内容</p>  <p> 这个不会显示</p> </child-component></div>',

  data: function () {

    return {

      someChildProperty: true

    }

  }

})

new Vue({

  el: '#counter-event-example'

})

</script>

</body>

</html>

vuejs fatherandson的更多相关文章

  1. TODO：搭建Laravel VueJS SemanticUI

    TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...

  2. 一次页面从Jq到Vuejs+PartialView的迁徙

    题外话 本篇分享不能帮助你入门vue,入门的文章也是无意义的,官方文档http://cn.vuejs.org/v2/guide/ 已经写的不能再清晰了.希望我们勇敢的主动地给自己创造实践的机会. 手里 ...

  3. 使用vuejs框架进行列表渲染

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...

  4. Vuejs学习笔记1

    首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...

  5. 【vuejs小项目——vuejs2.0版本】单页面搭建

    http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...

  6. 【vuejs小项目】一、脚手架搭建工作

    一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...

  7. vuejs的动态过滤

    想要通过vuejs动态过滤(这里动态指得是过滤的条件是动态变化的), 一直没找到好办法, 最蠢的办法当然是两个两个数组,一个作为原始副本数组 一个作为视图数组,这样当过滤条件变化的时候 动态拷贝原始数 ...

  8. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  9. vuejs里封装的和IOS,Android通信模块

    项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致.使用WebViewJavascriptBridge. 其实也是通过拦截url scheme,支持ios6往前的系 ...

随机推荐

  1. spring中bean标签factory-method和factory-bean)详解工厂方法(factory-method和factory-bean)

    转自:http://blog.sina.com.cn/s/blog_6d3c1ec601019f3j.html A.factory-method The name of a factory metho ...

  2. JAXB xml与javaBean的转换

    转自:https://blog.csdn.net/lydong_/article/details/79812626 `1. 1.不认识到犯错,然后得到永久的教训. 也不是所谓的教训吧,真正的教训来自于 ...

  3. [luogu P3813] [FJOI2017] 矩阵填数 解题报告 (容斥原理)

    题目链接: https://www.luogu.org/problemnew/show/P3813 题目: 给定一个 h*w的矩阵,矩阵的行编号从上到下依次为 1..h,列编号从左到右依次1..w. ...

  4. linux ps 命令查看进程状态

    显示其他用户启动的进程(a) 查看系统中属于自己的进程(x) 启动这个进程的用户和它启动的时间(u) 使用“date -s”命令来修改系统时间 比如将系统时间设定成1996年6月10日的命令如下. # ...

  5. Ubuntu14.04下Mongodb官网安装部署步骤（图文详解）（博主推荐）

    不多说,直接上干货! 在这篇博客里,我采用了非官网的安装步骤,来进行安装.走了弯路,同时,也是不建议.因为在大数据领域和实际生产里,还是要走正规的为好. Ubuntu14.04下Mongodb(离线安 ...

  6. Kettle和ETL的基本构成

    不多说,直接上干货! 这里,我说的通俗易懂点,好方便大家的理解. ETL解决方案就像业务流程一样,具有输入.输出,以及一个或多个工作环节,处理步骤.同样的,这些步骤也具有输入和输出,并可以执行将一个输 ...

  7. Glidar测试安装

    在上一篇随笔中,我们完成了对Glidar 仿真器的概念层面的认识.接下来,我们将着手对该该仿真器进行安装测试. 1 依赖库的安装 安装环境为Windows 7 64位+Ubuntu14.04 LTS的 ...

  8. 四个例子实战讲解.htaccess文件rewrite规则（转）

    一.防盗链功能 1 2 3 4 RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+.)?mysite.com/ [NC] Rewrite ...

  9. Thread-local storage

    Thread-local storage (TLS) is a computer programming method that uses static or global memory local ...

  10. 'Upgrade' header is missing

    spring-websocket 握手失败是因为 有拦截器  注释掉拦截器就OK