一,vue组件
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。
组件化和模块化的不同:
-
模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一
-
组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用
全局组件定义的四种方式和展示数据和响应事件
代码段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<login></login>
<login1></login1>
<account></account>
<bts></bts>
</div>
<script id="tmpl" type="x-template">
<div><a href="#">登录</a> | <a href="#">注册</a></div>
</script>
<!-- 第四种 -->
<template id="tmpl2">
<div>
<p>九点半</p>
<p>去吃饭</p>
</div>
</template>
<script>
// 第一种
// 声明全局组件 参数1 组件名 2,组件内容
// 使用当作标签使用
var login = Vue.extend({