Vue.js之父子组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="demo.css" /> </head> <body> <!--this is my View--> <div id="app"> <parent-component></parent-conponent> </div> <div id="app2"> <my-component></my-conponent> </div> <my-component></my-conponent> </body> <script src="vue.min.js"></script> <script> var Child = Vue.extend({ template: '<p> This is child component</p>' }) var myComponent = Vue.extend({ template: '<div> This is my first component.</div>' }); Vue.component('parent-component', { template: '<div><p> This is Parent component</p><child-component></child-component></div>', components: { 'child-component': Child } }); new Vue({ el: '#app' }) new Vue({ el: '#app2', components: { 'my-component': myComponent } }) </script> </html>
Vue.js之父子组件的更多相关文章
- 转: Vue.js——60分钟组件快速入门(上篇)
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- vue.js 精学组件记录
组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...
- vue.js学习之组件(上篇)
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- Vue.js 的精髓——组件
开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
- Vue.js的动态组件模板
组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...
随机推荐
- runloop和线程有什么关系?
每条线程都有唯一的一个RunLoop对象与之对应的 主线程的RunLoop是自动创建并启动 子线程的RunLoop需要手动启动 子线程的RunLoop创建步骤如下: 获得RunLoop对象后要调用ru ...
- 《Cracking the Coding Interview》——第7章:数学和概率论——题目5
2014-03-20 02:20 题目:给定二维平面上两个正方形,用一条直线将俩方块划分成面积相等的两部分. 解法:穿过对称中心的线会将面积等分,所以连接两个中心即可.如果两个中心恰好重合,那么任意穿 ...
- 使用Html5shiv.js让ie支持html5
ie低版本不支持html5标签,可以引入一段脚本,在ie浏览器中创建html5的标签. 1,可以在网上下载html5shiv的压缩包,引入压缩版的html5shiv.min.js即可. 脚本引用要在h ...
- NGUI-UIScroll View的使用及注意点
项目层次: scrollviewbg是600x150的背景图,Inspector视图如下: panel就是scrollview父容器了,size为600x150,Inspector视图如下: item ...
- 孤荷凌寒自学python第六十三天学习mongoDB的基本操作并进行简单封装2
孤荷凌寒自学python第六十三天学习mongoDB的基本操作并进行简单封装2 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第九天. 今天继续学习mongoDB的简单操作, ...
- android ViewGroup getChildDrawingOrder与 isChildrenDrawingOrderEnabled()
getChildDrawingOrder与 isChildrenDrawingOrderEnabled()是属于ViewGroup的方法. getChildDrawingOrder 用于 返回当前 ...
- hdu 1714 RedField
RedField Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- 像Excel的表格table
推荐:Spread.js 地址:点击打开链接 Demo:点击打开链接
- C#中不用安装Oracle客户端连接Oracle数据库(转)
原文地址:http://www.cnblogs.com/jiangguang/archive/2013/02/19/2916882.html 0.首先,从Oracle网站上下载对应版本的Oracle ...
- 【转】VS常用快捷键
每次在网上搜关于VS有哪些常用快捷键的时候,出来的永远是一串长的不能再长的列表,完全没体现出“常用”二字,每次看完前面几个就看不下去了,相信大家都 有这种感觉.其实我们平时用的真的只有很少的一部分,借 ...