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 根组件下面包含了很多的子组件 组件就是控制屏幕的某一个部分,某一个区域 组件是可以相互包含的 组件是定义在类里面的,类里面有属性和方法 注解会 ...
随机推荐
- Sitecore CMS中的项目如何配置帮助文本
如何在Sitecore CMS中的项目上配置帮助文本. 所有Sitecore项目都有长短描述字段,以及“帮助链接”字段.这些字段有助于向内容编辑者提供其他信息.这对于很少编辑的项目和字段尤其重要,因为 ...
- xpath ,css
https://docs.scrapy.org/en/latest/intro/tutorial.html xpath @选择属性 .当前目录下选择 //任意路径选择 /bookstore/book ...
- 【Linux学习六】用户管理
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 一.增加删除用户或组新增用户useradd scott修改用户密码pa ...
- android本地数据库,微信数据库WCDB for Android 使用实例
android本地数据库,微信数据库WCDB for Android 使用实例 Home · Tencent/wcdb Wikihttps://github.com/Tencent/wcdb/wiki ...
- 深入理解Node.js基于事件驱动的回调
回调和异步调用的关系 首先明确一点,回调并非是异步调用,回调是一种解决异步函数执行结果的处理方法.在异步调用,如果我们希望将执行的结果返回并且处理时,可以通过回调的方法解决.为了能够更好的区分回调和异 ...
- 51Nod 1069 Nim游戏 (位运算)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1069 有N堆石子.A B两个人轮流拿,A先拿.每次只能从一堆 ...
- ESXi 嵌套KVM虚拟化 配置
VMware ESXi5.x默认不支持嵌套虚拟化,需要修改相关配置才能支持 1.ESXi5.1主机开通ssh,修改VMware ESXi配置文件使之嵌套虚拟化. 在配置文件后面加入如下配置:vhv ...
- 如何给webview页面自定义404页面
//示例地图类 package com.can2do.doimobile.news; import android.os.Bundle; import android.os.Handler; impo ...
- Git 常用命令列表
1 常用 $ git remote add origin git@github.com:yeszao/dofiler.git # 配置远程git版本库 $ git pull origin master ...
- ES6知识整理(2)--变量的解构赋值
最近准备在业余空闲时间里一边学习ES6,一边整理相关知识.只有整理过的学习才是有效的学习.也就是学习之后要使用和整理成文,才是真正的学到了... 上一篇是一个试水,现在接上. 变量提升 看了下朋友回复 ...