component组件是Vue学习的重点、重点、重点,重要的事情说三遍。所以你必须学好Vue component。其实组件就是制作自定义的标签,这些标签在HTML中是没有的。比如:<diy></diy>,那我们就开始学习这种技巧吧。
全局化注册组件

html

<div id="app">
<!-- 注册一个全局逐渐 -->
<register></register>
</div>

js

var  demo =  Vue.component('register',{
template:"<h2>{{message}}</h2>",
data:function(){
return{
message:"component注册的全局组件"
}
}
})
new demo().$mount('register') 
 // 或者你这样使用,下面是挂载到#app的意思,你引掉他们,直接用$mount挂载 
// var vm = new Vue({
// el:"#app",
// data:{
// }
// })
局部注册组件

html

<div id="app">
<!-- 注册一个全局逐渐 -->
<register></register>
</div>

js

var  demoTmp ={
template:`<h2>{{message}}</h2>`,
data:function(){
return{
message:"内部组件components"
}
}
}
var vm = new Vue({
el:"#app",
data:{ },
components:{
'register':demoTmp
}
})

Component 初识组件的更多相关文章

  1. Vue2.0 【第二季】第6节 Component 初识组件

    目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...

  2. 022 component(组件)关联映射

    Component关联映射: 目前有两个类如下: 值对象没有标识,而实体对象具有标识,值对象属于某一个实体,使用它重复使用率提升,而且更清析. 以上关系的映射称为component(组件)关联映射 在 ...

  3. Solr学习笔记之5、Component(组件)与Handler(处理器)学习

    Solr学习笔记之5.Component(组件)与Handler(处理器)学习 一.搜索篇 拼写检查(spellCheck) 作用:用来检查用户输入的检索内容是否存在,如果不存在则给它提示出相近或相似 ...

  4. vue19 组建 Vue.extend component、组件模版、动态组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue2.0 【第二季】第8节 Component 父子组件关系

    目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...

  6. vue 初识组件

    Vue.component("greeting",{ template: `<p>{{ name }}大家好 <button v-on:click="c ...

  7. angular2 学习笔记 ( Dynamic Component 动态组件)

    更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...

  8. Extjs 继承Ext.Component自定义组件

    //自定义HTML组件 Ext.define('MyCmp', { extend: 'Ext.Component', renderTpl: [ '<h1 class="title&qu ...

  9. 2-3 【初识组件】顶部 TabBar

    VsCode中使用Emmet神器快速编写HTML代码 1 根组件下面包含了很多的子组件 组件就是控制屏幕的某一个部分,某一个区域 组件是可以相互包含的 组件是定义在类里面的,类里面有属性和方法 注解会 ...

随机推荐

  1. 【Hadoop学习之十三】MapReduce案例分析五-ItemCF

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 推荐系统——协同过滤(Collab ...

  2. Java8函数式编程探秘

    引子 将行为作为数据传递 怎样在一行代码里同时计算一个列表的和.最大值.最小值.平均值.元素个数.奇偶分组.指数.排序呢? 答案是思维反转!将行为作为数据传递. 文艺青年的代码如下所示: public ...

  3. python 安装pandas

    1.pandas有啥用 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的工具.pand ...

  4. Presto 学习

    Presto 基础知识与概念学习可以参考这些博客: presto 0.166概述 https://www.cnblogs.com/sorco/p/7060166.html Presto学习-prest ...

  5. 51nod 1057 N的阶乘 (大数运算)

    输入N求N的阶乘的准确值.   Input 输入N(1 <= N <= 10000) Output 输出N的阶乘 Input示例 5 Output示例 120 压位: 每个数组元素存多位数 ...

  6. [转载]基于 Token 的身份验证

    作者:王皓发布于:2015-08-07 22:06更新于:2015-08-07 22:07 最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twit ...

  7. animate和translate

    transition, transform, tanslate,animation分别为过渡,变换,平移.动画.transform的属性包括:rotate() / skew() / scale() / ...

  8. vue style 的scoped 使用

    1 原理 vue 可以通过在 style标签添加scoped这个属性来控制 组件内的css作用域 <style scoped> @media (min-width: 250px) { .l ...

  9. Python进阶【第一篇】:Python简介

    Python简介 1.Python的由来 Python是著名的“龟叔”Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言. 2.C 和 Python.Ja ...

  10. setfacl 设置文件访问控制列表

    setfacl 设置文件访问控制列表 用法: setfacl [-bkndRLP] { -m|-M|-x|-X ... } file ... 参数: -m, --modify=acl 更改文件的访问控 ...