Vue自定义组件
组件概述
组件是Vue框架非常重要的功能之一,它主要对html元素进行封装,可以复用。
简单来说,使用vue组件方法对html元素进行定义。
为什么使用组件
需要在其他网页里面需要使用有弧度的按钮
在每个网页的每个按钮中,设置style=“border-radius: 10px;”
怎么解决这个问题?
vue提供的组件来解决这个问题.
步骤一:定义模板,其实对html标签进行自定义
步骤二:定义的模板注册到组件(全局组件)
全局组件:一次定义,到处使用,就能解决原始html中代码重复的问题
组件使用
方式一:基本语法
1.定义模板
Vue.extend({
"template":"定义标签,设置样式等等"
});
2.模板注册到组件中(全局组件)
Vue.component(组件名称,模板对象);
//比如:
Vue.component("el-button",tem);
注意事项
-
调用方法时,Vue的V必须大写
-
设置参数时,template名称是固定的
-
定义组件名称时,(推荐写法一)
- 写法一:英文单词(小写的)-英文单词(小写的)
el-button
- 写法二:英文单词(首字母大写)英文单词(首字母大写)
ElButton
- 写法三:英文单词(首字母小写)英文单词(首字母大写)
elButton
自定义标签属性
<div id="app">
<el-button></el-button>
<el-button></el-button>
<el-button></el-button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
//1.定义模板
var tem = Vue.extend({
"template":"<button style='border-radius: 10px;'>自定义样式按钮</button>"
});
//2.注册组件
Vue.component("el-button",tem);
//3.创建vue对象
new Vue({
"el":"#app",
});
</script>
上述定义模板:将button标签直接的值写死了:定义自定义样式按钮
<button style="border-radius: 10px;">自定义样式按钮</button>
解决问题