Vue2.0 【第二季】第6节 Component 初识组件
Vue2.0 【第二季】第6节 Component 初识组件
第6节 Component 初识组件
前言(废话):component组件是Vue学习的重点!所以你必须学好Vue component。其实组件就是制作自定义的标签,这些标签在HTML中是没有的。比如:<da0sy></da0sy>
,那我们就开始学习这种技巧吧。
一、全局化注册组件
全局化就是在构造器的外部用Vue.component来注册,我们注册一个da0sy组件来体验一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>component-1</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>component-1</h1>
<hr>
<div id="app">
<da0sy></da0sy> //必须放在vue作用域里,这里是app
</div>
<script type="text/javascript">
Vue.component('da0sy',{ ////只能定义一个
template:'<div style="color:red">我是全局的da0sy组件</div>'
})
var app = new Vue({
el:'#app',
})
</script>
</body>
</html>
浏览器效果:
我们在javascript里注册了一个组件,在HTML中调用了它。这就是最简单的一个组件的编写方法,并且它可以放到多个构造器的作用域里。
二、局部注册组件局部
局部注册组件和全局注册组件是相对应的,局部注册的组件只能在组件注册的作用域里进行使用,其他作用域使用无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>component-1</title>
</head>
<body>
<h1>component-1</h1>
<hr>
<div id="app">
<monkey></monkey>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{ //可以定义多个
"monkey":{ //这块必须是字符串,不然相当于没定义
template:`<div style="color:green;">局部注册的monkey标签</div>`
}
}
})
</script>
</body>
</html>
浏览器效果:
从代码中你可以看出局部注册其实就是写在构造器里,但是你需要注意的是,,构造器里的components 是加s的,而全局注册是不加s的。
三、组件和指令的区别
组件注册的是一个标签,而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多,指令用的比较少。因为指令看起来封装的没那么好,这只是个人观点。
Vue2.0 【第二季】第6节 Component 初识组件的更多相关文章
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- vue2.0 自定义 图片上传(UpLoader)组件
1.自定义组件 UpLoader.vue <!-- 上传图片 组件 --> <template> <div class="vue-uploader"& ...
- vue2.0 之 douban (三)创建header组件
1.分析 首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的h ...
- vue2.0 之 douban (二)创建自定义组件tabbar
1.大体布局 这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 ...
- vue2.0 自定义 饼状图 (Echarts)组件
1.自定义 图表 组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 ...
- Component 初识组件
component组件是Vue学习的重点.重点.重点,重要的事情说三遍.所以你必须学好Vue component.其实组件就是制作自定义的标签,这些标签在HTML中是没有的.比如:<diy> ...
- vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
- Vue2.0 【第二季】第9节 Component 标签
目录 Vue2.0 [第二季]第9节 Component 标签 第9节 Component 标签 1.我们先在构造器外部定义三个不同的组件,分别是componentA,componentB和compo ...
随机推荐
- 接口测试时返回的响应报json错误
问题: 测试接口时,传入错误数据,最开始对于错误数据也返回了json数据的响应:后来传入错误数据,接口突然就没有返回json数据,通过在出错的代码之前进行打印,发现接口报500了 检查错误的方法1:在 ...
- RAM子账户登录DMS对库进行管理
前言:阿里云账户是个权限很大的账户,有时候为了不让更多的人知道,但是又必须让别人管理里面某个模块的功能的时候,RAM子账户就显得很重要,所以设置子账户的权限就很有必要了,下面简单设置两种权限(dms上 ...
- orcale 11g安装,创建表空间,用户,授权用户
一.卸载旧oracle 用Oracle自带的卸载程序不能从根本上卸载Oracle,从而为下次的安装留下隐患,那么怎么才能完全卸载Oracle呢?那就是直接注册表清除,步骤如下: 1. 开始->设 ...
- 公式化学习urllib(第一卷)
Import urllib.request 正常爬取网页: url=网址 +代表 下面测试一下: 结果我就不显示了 令html为读取后的对象 先用正则表达式抓取数据 Import re 令rule是抓 ...
- 吴裕雄--天生自然python学习笔记:Python3 SMTP发送邮件
SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式. python的smtplib提供了一 ...
- java的自增和自减
class Untitled { public static void main(String[] args) { int a = 3; int b = a++; //a先赋值给b,然后a再自己加1 ...
- POJ 2553 The Bottom of a Graph Tarjan找环缩点(题解解释输入)
Description We will use the following (standard) definitions from graph theory. Let V be a nonempty ...
- js弱类型转换的知识点
本文属于转载知识点,以下是原博文作者:不死鸟哇的文章,文章链接:原文JavaScript里什么情况下a==!a为true呢? 今天群里有位同学问了这样一个问题,JavaScript在什么情况下会出现变 ...
- SpringMVC之参数绑定
1.Controller package com.tz.controller; import org.springframework.beans.factory.annotation.Required ...
- postgresql学习记录1
数据库9.3.5,系统fedora20,不同系统操作略有不同. 使用yum 命令安装即可:sudo yum install postgresql,postgresql-server 安装完毕后系统中会 ...