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. 准备spring

    下载对应版本:http://repo.spring.io/libs-release-local/org/springframework/spring/ Spring下载:https://spring. ...

  2. flask 自定义验证器(行内验证器、全局验证器)

    自定义验证器 在WTForms中,验证器是指在定义字段时传入validators参数列表的可调用对象,下面来看下编写自定义验证器. 行内验证器 除了使用WTForms提供的验证器来验证表单字段,我们还 ...

  3. php 网站301重定向设置代码实战案例

    php 网站301重定向设置代码实战案例 301重定向就是页面永久性移走的意思,搜索引擎知道这个页面是301重定向的话,就会把旧的地址替换成重定向之后的地址. 302重定向就是页面暂时性转移,搜索引擎 ...

  4. GUI相应鼠标事件

    function varargout = GUI18(varargin) % GUI18 MATLAB code for GUI18.fig % GUI18, by itself, creates a ...

  5. <转>jmeter(五)JDBC Request

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  6. How to install john deere service advisor 4.2.005 on win 10 64bit

    How to install john deere service advisor 4.2.005 with the February 2016 data base disks on a machin ...

  7. 模拟ATM的功能

    import java.io.FileReader; import java.io.FileWriter; import java.io.PrintWriter; import java.util.A ...

  8. 不懂RPC实现原理怎能实现架构梦

    RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些传输协议的存在 ...

  9. 为了好好看球,学霸们用深度学习重建整个比赛3D全息图

    http://mp.ofweek.com/vr/a745673021206 周四晚上11点,万众瞩目的世界杯终于开踢了,虽然意大利.荷兰.智利.中国(手动滑稽)等强队没能进入本届世界杯,但C罗梅西谁主 ...

  10. 用WPE+CCproxy+自动代理截取安卓游戏封包

    wpe三件套:https://pan.baidu.com/s/19gI2GPZ0iuu4wpKljCOn4A 用WPE+CCproxy+自动代理截取安卓游戏封包>>