今日总结
一、vue组件
什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
组块化和模块化的不同：
模块化：是从代码的逻辑角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一（实现 高内聚低耦合 模块之间低耦合 模块内部高内聚）
组块化：是从UI界面的角度进行划分；前端的组件化，方便UI组件的重用
1、全局组件定义的四种方式
1、使用 Vue.extend 配合 Vue.component 方法：
2、直接使用 Vue.component 方法：
3、将模板字符串定义到 script 标签中，同时需要使用 Vue.component 来定义组件
4、将模板字符串定义到 template 标签中，同时需要使用 Vue.component 来定义组件
注意：组件中的 DOM 结构，有且只能有唯一的根元素来进行包裹
组件名不能和 h5 标签重复 不使用内置或保留的HTML元素作为组件id
标签名不区分大小写 注意不能使用驼峰命名法
示例：
<!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'>
<!-- 1 -->
<login></login>
<!-- 2 -->
<register></register>
<!-- 3 -->
<tmpl></tmpl>
<!-- 4 -->
<account></account>
</div>
<!-- 3 -->
<script id="tmpl" type="x-template">
<div><a href="#">登录</a> | <a href="#">注册</a></div>
</script>
<!-- 4 -->
<template id="account">
<div>
<p>我是一个p标签</p>
</div>
<!-- 注意：组件中的DOM结构，有且只能有唯一的根元素 -->
<!-- <div>
<strong>我是一个Vue组件</strong>
</div> -->
</template>
<script>
// 组件名不能和 h5 标签重复 不使用内置或保留的HTML元素作为组件id
// 标签名不区分大小写 注意不能使用驼峰命名法
// 1、使用 Vue.extend 配合 Vue.component 方法
var login = Vue.extend({ // 全局声明
template:'<h1>登录</h1>'
})
Vue.component('login',login) // 全局注册 （名字 模板）
// 2、直接使用 Vue.component 方法
Vue.component('register',{
template:'<h2>注册</h2>'
})
// 3、将模板字符串，定义到 script 标签中
// 同时，需要使用 Vue.component 来定义组件
Vue.component('tmpl',{
template:'#tmpl'
})
// 4、以上三种方法现在不怎么用了，通常使用下面的使用方法
// 将模板字符串定义到template标签中
Vue.component('account',{
template:'#account'
})
let vm = new Vue({
el: '#app',
data: {
},
methods: {
},
})
</script>
</body>
</html>2、使用components属性定义局部子组件（私有组件）
components与methods、data同级
let vm = new Vue({
el: '#app',
data: {
},
methods: {
最低0.47元/天 解锁文章
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
