今日 内容:
1.VUE自定义组件(尤雨溪)
2.脚手架
3.路由
4.Element-UI(容易)
1.组件
-
组件概述
组件是Vue框架非常重要的功能之一,它主要对html元素进行封装,可以复用.
简单来说,使用vue组件方法对html元素进行定义. -
为什么使用组件?
需要在其它网页里面需要使用有弧度按钮
在每个网页的每个按钮中,设置style=“border-radius: 10px;”
怎么解决这个问题?
vue提供的组件来解决这个问题.
步骤一 1: 定义模板,其实对html标签进行自定义
步骤二 2: 定义的模板注册到组件(全局组件)
全局组件: 一次定义,到处使用,就能解决原始html中代码重复的问题 -
组件使用
方式二: 基本语法
Vue.component(“組件名稱”,{
“template”:“定义标签,设置样式等等”
});
方式一:基本语法
1. 定义模板: var tem = Vue.extend({
“template”:“定义标签,设置样式等等”}); 2.模板注册到组件中(全局组件) Vue.component(组件名称,模板对象); 比如:Vue.component("el-button",tem); 注意事项 1.调用方法时, Vue的V必须大写 2.设置参数时, template名称是固定的 3.定义组件名称时,推荐写法一 写法一: 英文单词(都是小写的)-英文单词(都是小写的) 比如: el-button 写法二: 英文单词(首字母大写,其它小写)英文单词(首字母大写,其它小写) 比如:ElButton 写法三: 英文单词(首字母小写,其它小写)英文单词(首字母大写,其它小写) 比如: elButton
入门三: 自定义标签属性
入门二定义模板:将button标签的值写死了: 自定义样式按钮
<button style='border-radius: 10px;'>自定义样式按钮</button>
解决入门二的问题:
props:
作用可以自定义组件的属性,给组件里面的标签灵活赋值
比如:<el-button 属性名称="赋值"> 赋值设置到组件的标签里面了
入门四:自定义的组件绑定事件,改变组件的文本值
data函数:{}
定义模板时:
Vue.extend({
"props" :["属性名称1","属性名称2",----"属性名称N"],
"template":"html标签,设置自定义的样式等等",
"data":function(){
方法体;
},
});
props选项,给自定义组件设置