Vue2.0 【第二季】第6节 Component 初识组件
2024-09-20 04:14:23
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的。
三、组件和指令的区别
组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。
最新文章
- spring + spring mvc + mybatis + react + reflux + webpack Web工程例子
- 服务器间打通ssh无密钥
- 【面向打野编程】——KMP算法入门
- 【LeetCode OJ】Best Time to Buy and Sell Stock II
- Appium启动服务报错
- Entity Framework技术导游系列开篇与热身
- lost connection to mysql server reading initial communication packet
- [jQuery] $.grep使用
- php文件去重复，二维数组筛选
- Core Animation 文档翻译 （第四篇）
- python 猜数字游戏
- eclipse集成tomcat日志文件输出配置
- 【Zookeeper】源码分析之Leader选举（二）之FastLeaderElection
- IQueryable与IEnumerable
- 设置session的过期时间
- 7.25 10figting！
- ubuntu scrapy 开发环境搭建
- 新项目放到jenkins步骤
- DAY9-python并发之多进程理论
- 小小c#算法题 - 8 - 归并排序 (Merging Sort)