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. 【转】HTTP429

    转载:http://codewa.com/question/45600.html Q:How to avoid HTTP error 429 (Too Many Requests) python Q: ...

  2. Go语言专题

    基础语法 Go语言配置开发环境 Go语言语法基础 Go语言面向对象 Go语言并发编程 Go语言搭建开发环境 语言库 Go语言fmt包 Go语言字节处理 Go语言字符串处理 Go语言JSON处理 Go语 ...

  3. Porsche Piwis Tester II Diagnostic Tool -Next Generation of PIWIS Tester KTS520

    Porsche Piwis Tester II is the latest inspect equipment of Porsche Company. This is the latest profe ...

  4. 记账本微信小程序开发三

    一.制作登陆界面: 更改全局配置,改颜色,名称: 界面 格式 登录界面 二.页面的跳转 按钮的设置 注册事件 结果

  5. webpack处理媒体文件(图片/视频和音频)

    webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的, 这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于 ...

  6. 数据分析之pandas01

    Series 一.Series Series是一种类似于一维数组的对象,有两部分组成:     .values:一组数据(ndarray类型)     .index: 相关的数据索引标签 二.seri ...

  7. apache编译安装php后需要注意以下配置

    安装后, 编辑apache配置文件 vi /usr/local/apache2/conf/httpd.conf 可以看到 LoadModule php7_module modules/libphp7. ...

  8. pyqt5 点开小窗口

    # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import * from PyQt5.QtCore import * class Fi ...

  9. ELK学习笔记之F5利用EELK进行应用数据挖掘系列(2)-DNS

    0x00 概述 很多客户使用GTM/DNS为企业业务提供动态智能解析,解决应用就近性访问.优选问题.对于已经实施多数据中心双活的客户,则会使用GSLB提供双活流量调度.DNS作为企业业务访问的指路者, ...

  10. JDK源码之Lock接口

    public interface Lock { //阻塞的获取锁,如果获取到锁,从该方法返回 void lock(); //可中断的获取锁,该方法会响应中断,在锁的获取中可以中断当前线程 void l ...