我要评论一、什么是组件
组件：是由html、css、javascript所组成，是把某块效果界面封装起来，提供了界面效果【代码】的复用性【类似于bootstrap】
二、全局注册
全局注册：当vue创建的时候，不管这个组件是否使用，都会被加载，这样的方式会比较占内存
入门程序
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 组件-->
<button-count></button-count>
</div>
</body>
</html>
<script>
//编写组件
//参数一：自定义的组件名称【注意：不要全大写，如果是二个单词拼接，最好都是小写，用-连接】
//参数二：对象
vue.component('button-count', {
template: "<button @click='count++'>{{count}}</button>",
data: function () {
return {
}
}
})
new vue({
el: '#app',
})
</script>注意： 在注册vue组件的时候，一定不能忽略new vue
三、局部注册
局部注册：当我们使用到某个组件，该组件才会被创建，如果不使用该组件，那么该组件不会被创建。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--组件名称-->
<button-count></button-count>
</div>
<script>
//创建组件
let buttoncount = {
template:"<h1>这是一个组件</h1>"
}
new vue({
el:"#app",
components:{
//当组件名称二个首字母大写的时候
//html在识别的时候，会全部转换为小写，并且二个字母之间用-连接
//当变量名称和属性名称相同的时候，可以只写一个
buttoncount
}
});
</script>
</body>
</html>无论怎么注册，html都比较麻烦，还需要写到script里面去，所以需要优化一下组件注册
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<handle-text></handle-text>
</div>
<!-- 一定要在容器外面，创建一个template标签-->
<template id="id">
<!--这个id就是外面声明变量template属性的属性值
最后把要写的html写到template标签里面
-->
<div>
<h1>我是h1</h1>
</div>
</template>
</body>
</html>
<script>
let handletext = {
//在这个对象里面存放template属性和一个自定义的属性值
template: '#id'
}
new vue({
el:'#app',
components:{
handletext
}
})
</script>注意：因为是组件，所以这个template标签里面只能有一个根标签
四、为什么在vue局部组件里面要有一个data函数
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论