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. base_review

    简述Python的字符串驻留机制. - 字符串驻留是一种仅保存一份相同且不可变字符串的方法. - 原理 - 系统维护interned字典,记录已被驻留的字符串对象. - 当字符串对象a需要驻留时,先在 ...

  2. ExtJS5入门

    https://www.cnblogs.com/xiaoliu66007/p/7988060.html

  3. mysql的sql执行计划详解

    实际项目开发中,由于我们不知道实际查询的时候数据库里发生了什么事情,数据库软件是怎样扫描表.怎样使用索引的,因此,我们能感知到的就只有 sql语句运行的时间,在数据规模不大时,查询是瞬间的,因此,在写 ...

  4. Java国际化号码验证方法,国内手机号正则表达式

    Java国际化号码验证方法,国内手机号正则表达式 中国电信号段 133.149.153.173.177.180.181.189.199 中国联通号段 130.131.132.145.155.156.1 ...

  5. echo 命令详解

    echo命令用于在shell中打印shell变量的值,或者直接输出指定的字符串. 选项 -e:激活转义字符. 使用-e选项时,若字符串中出现以下字符,则特别加以处理,而不会将它当成一般文字输出: \a ...

  6. Elasticsearch集群内的原理

        一个运行中的 Elasticsearch 实例称为一个 节点,而集群是由一个或者多个拥有相同 cluster.name 配置的节点组成, 它们共同承担数据和负载的压力.当有节点加入集群中或者从 ...

  7. Python进阶【第十一篇】模块(下)之常用模块

    内置模块是Python自带的功能,在使用内置模块相应的功能时,需要[先导入]再[使用] 一.time模块 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳 ...

  8. String小案例(**)、包装类型和普通数据类型的转换(拆装箱)

    ###String用法: package StringTest; /**功能: * 判断Java文件名是否正确,判断邮箱格式是否正确 * 其中:合法的文件名应该以.java结尾 * 合法的邮箱名至少包 ...

  9. Hbuilder安装

    ---恢复内容开始--- ---恢复内容结束---

  10. NGINX转发代理情况下,获取客户单真实IP

    编译时加上http_realip_module 模块 realip模块生效的前提是:直接连接nginx的ip是在set_real_ip_from中指定的. 原机配置: set_real_ip_from ...