组件的概述:
组件是Vue框架非常重要的功能之一,它主要对HTML元素进行封装
目的是为了增加复用性,即使用Vue组件的方法对HTML中的元素进行定义
为什么使用组件:
步骤一:定义模板,对HTML标签进行自定义 步骤二:定义的模板注册到组件(全局组件) 全局组件: 一次定义,到处使用,就能解决原始HTML中代码重复的问题
组件的使用:
方式一:基本语法
1.定义模板:var tem = Vue.extend({
"template" : "定义标签,设置样式等等"
});
2.模板注册到组件中(全局组件)
Vue.component(组件名称,模板对象);
比如:Vue.component("el-buttno",tem);
方式二:基本语法
Vue.component("组件名称",{
"template":"定义标签,设置样式等等"
});
注意事项:
1.调用方法是,Vue的V必须大写
2.设置参数时,template名称是固定的
3.定义组件名称时,推荐写法一
写法一:英文单词(都小写的) - 英文单词(都小写的)
比如:el-button
写法二:英文单词(首字母大写)英文单词(首大) 大驼峰命名法
比如:ElButton
写法三:英文单词(首字母小写)英文单词(首字母大写) 小驼峰命名法
比如:elButton
自定义标签属性:
入门一定义模板:将button标签的值写死了:自定义样式按钮
<button style='border-radius:25px;'>自定义有弧度的按钮</button>
<html>
<head>
<meta charset="utf-8">
<title>组件入门二</title>
<!-- 路径的写法:1.绝对路径 2.相对路径,同级目录,上一级目录 下一级目录 -->
<script src="../vue/vue.js" ></script>
</head>
<body>
<div id="app">
<el-button></el-button>
</div>
<script type="text/javascript">
//1.定义模板,双引号嵌套单引号,单引号嵌套双引号
var tem = Vue.extend({
"template":"<button style='border-radius: 25px;'>自定义样式按钮</button>",
});
//2.注册组件
Vue.component("el-button",tem);
Vue.component("el-button",tem);
//创建vue对象
new Vue({
"el":"#app",
});
</script>
</body>
</html>解决入门案例一的问题:
props:
作用可以自定义组件的属性,给组件里面的标签灵活赋值
比如:<el-buttton 属性名称="赋值"> 赋值设置到组件的标签内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件入门三</title>
<script src="../vue/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<el-button title="12123"></el-button>
</div>
<script type="text/javascript">
//1.定义模板:template,props固定写法
var tem = Vue.extend({
"props":["title"],
"template":"<button style='border-radius: 25px;'>{{title}}</button>",
});
//2.组件注册:将模板绑定到自定义的组件名称
Vue.component( "el-button",tem );
//3.创建vue对象
new Vue({
"el":"#app",
});
</script>
</body>
</html>data函数:{ }
定义模板时:properties
Vue.extend({
"props":["属性名称1","属性名称2","属性名称3",..."属性名称n",],
"template" : "html标签,设置自定义的样式等等",
"data":function(){
方法体;
},
});
props选项,给自定义组件设置多个属性
总结:
1.定义模板时,用到的选项(key)---template
作用: 定义HTML标签,自定义标签的样式等
2.定义模板时,用到选项:props
作用:通过给自定义的组件来设置属性,从而改变模板template里的标签的值
3.定义模板时,用到选项:data,(特殊data函数)
作用:通过给模板设置data函数,从而改名template里面标签的文本值
4.定义模板时,用到选项: methods.
作用:给模板里面的标签绑定的时间提供函数
案例:点击按钮改变按的值,需求:点击按钮,点一次,按钮的值+1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件入门三</title>
<script src="../vue/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 案例: 点击按钮,改变按的值
需求:点击按钮,点击一次值+1-->
</head>
<body>
<div id="app">
<el-button></el-button>
<font color="rgb(1,2,3)">字体哈哈哈</font><br/>
<font color='rgb(1,2,3)'>字体哈哈哈</font><br />
<font color="#654C">字体哈哈哈</font>
</div>
<script type="text/javascript">
<!-- 案例: 点击按钮,改变按的值
// 需求:点击按钮,点击一次值+1,
-->
//1.定义模板: 给模板的标签绑定点击事件
var tem = Vue.extend({
"data":function(){
return {"c":1};
},
"template":"<button style='border-radius: 25px;' @click='c++'>{{c}}</button>",
});
//2.组件注册:将模板绑定到组件名称上,实现:HTML写组件名称,显示模板
Vue.component( "el-button",tem );
//3.创建vue对象
new Vue({
"el":"#app",
});
</script>
</body>
</html>
