Component 初识组件
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 初识组件的更多相关文章
- Vue2.0 【第二季】第6节 Component 初识组件
目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...
- 022 component(组件)关联映射
Component关联映射: 目前有两个类如下: 值对象没有标识,而实体对象具有标识,值对象属于某一个实体,使用它重复使用率提升,而且更清析. 以上关系的映射称为component(组件)关联映射 在 ...
- Solr学习笔记之5、Component(组件)与Handler(处理器)学习
Solr学习笔记之5.Component(组件)与Handler(处理器)学习 一.搜索篇 拼写检查(spellCheck) 作用:用来检查用户输入的检索内容是否存在,如果不存在则给它提示出相近或相似 ...
- vue19 组建 Vue.extend component、组件模版、动态组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...
- vue 初识组件
Vue.component("greeting",{ template: `<p>{{ name }}大家好 <button v-on:click="c ...
- angular2 学习笔记 ( Dynamic Component 动态组件)
更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...
- Extjs 继承Ext.Component自定义组件
//自定义HTML组件 Ext.define('MyCmp', { extend: 'Ext.Component', renderTpl: [ '<h1 class="title&qu ...
- 2-3 【初识组件】顶部 TabBar
VsCode中使用Emmet神器快速编写HTML代码 1 根组件下面包含了很多的子组件 组件就是控制屏幕的某一个部分,某一个区域 组件是可以相互包含的 组件是定义在类里面的,类里面有属性和方法 注解会 ...
随机推荐
- Another Meaning (KMP + DP)
先用KMP重叠匹配求出各个匹配成功的尾串位置.然后利用DP去求,那转移方程应该是等于 上一个状态 (无法匹配新尾巴) 上一个状态 + 以本次匹配起点为结尾的状态(就是说有了新的位置) + 1 (单单一 ...
- 【Elasticsearch学习之一】Elasticsearch
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 一.概念ElasticSearch: 基于Lucene全文搜 ...
- pip使用简要说明
一.pip常用命令 安装指定包 pip install SomePackage #最新版本 安装指定包 pip install SomePackage==1.0.4 #指定版本 安装指定包 pip i ...
- grouping sets 的使用
grouping sets 可以用于在计算分组聚合函数值的同时计算合计值 -- 查询结果group_id为NULL的那一行即为合计值 select group_id , count(distinct ...
- window下nodejs用nodemon启动koa2项目(用cmd启动不了,要用Git Bash Here 启动才可以)
window下nodejs用nodemon启动koa2项目(用cmd启动不了,要用Git Bash Here 启动才可以)nodemon --watch 'app/**/*' -e ts --exec ...
- 自学Java第五周的总结
在这周里我在我要自学网上观看视频学习了有关java的基础知识,课程主要介绍JavaSE,这是整个Java体系的基础:课程将由浅入深,并结合案例进行讲解,在那里我将自己已学的知识进行了巩固,并由学习到了 ...
- git从安装到使用
一.Git简介 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制 ...
- 大数据自学3-Windows客户端DbVisualizer/SQuirreL配置连接hive
前面已经学习了将数据从Sql Server导入到Hive DB,并在Hue的Web界面可以查询,接下来是配置客户端工具直接连Hive数据库,常用的有DbVisualizer.SQuirreL SQL ...
- Talented Chef ZOJ - 3778
As we all know, Coach Gao is a talented chef, because he is able to cook M dishes in the same time. ...
- PHP优化加速之Opcache使用总结
PHP优化加速之Opcache使用总结: Opcache是一种通过将解析的PHP脚本预编译的字节码存放在共享内存中来避免每次加载和解析PHP脚本的开销,解析器可以直接从共享内存读取已经缓存的字节码,从 ...