Vue入门（三）_vue el-button

Vue自定义组件

组件概述

组件是Vue框架非常重要的功能之一，它主要对html元素进行封装，可以复用。

简单来说，使用vue组件方法对html元素进行定义。

为什么使用组件

需要在其他网页里面需要使用有弧度的按钮

在每个网页的每个按钮中，设置style=“border-radius: 10px;”

怎么解决这个问题？

vue提供的组件来解决这个问题.

步骤一：定义模板，其实对html标签进行自定义

步骤二：定义的模板注册到组件（全局组件）

全局组件：一次定义，到处使用，就能解决原始html中代码重复的问题

组件使用

方式一：基本语法

​ 1.定义模板

Vue.extend({
    "template":"定义标签，设置样式等等"
});
1
2
3

​ 2.模板注册到组件中（全局组件）

Vue.component(组件名称,模板对象);
//比如：
Vue.component("el-button",tem);
1
2
3

注意事项

• 调用方法时，Vue的V必须大写

• 设置参数时，template名称是固定的

• 定义组件名称时，（推荐写法一）

  • 写法一：英文单词（小写的）-英文单词（小写的）

  el-button
  1

  • 写法二：英文单词（首字母大写）英文单词（首字母大写）

  ElButton
  1

  • 写法三：英文单词（首字母小写）英文单词（首字母大写）

  elButton
  1

自定义标签属性

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上述定义模板：将button标签直接的值写死了：定义自定义样式按钮

<button style="border-radius: 10px;">自定义样式按钮</button>
1

解决问题：

​ props：作用可以自定义组件的属性，给组件里面的标签灵活赋值，比如：

<el-button 属性名称=”赋值“></el-button>
1

<div id="app">
    <el-button title="1111"></el-button>
    <el-button title="2222"></el-button>
    <el-button title="3333"></el-button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript"> 
    //1.定义模板：template,props固定写法
    var tem = Vue.extend({
    "props":["title"],
    "template":"<button style='border-radius: 10px;'>{{title}}</button>",
    });
    //2.注册组件：将模板绑定到自定义的组件名称上
    Vue.component("el-button",tem);
    //3.创建vue对象
    new Vue({
    "el":"#app",
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

自定义的组件绑定事件，改变组件的文本值

//data函数
data:{}
1
2

定义模板时：

Vue.extend({
	"props":["属性名称1","属性名称2",...,"属性名称3"],
	"template":"html标签，设置自定义的样式等等",
	"data":function(){
		方法体;
	},
});
1
2
3
4
5
6
7

总结

• 定义模板时，用到选项（key）：template
  • 作用：定义html标签，自定义标签的样式等
• 定义模板时，用到选项：props
  • 作用：通过给自定义的组件设置属性，从而改变template里面标签的文本
• 定义模板时，用到选项：data，（特殊data函数）
  • 作用：通过给模板设置data函数，从而改变template里面标签的文本值
• 定义模板时，用到选项：methods
  • 作用：给模板里面的标签绑定事件，提供函数

<script type="text/javascript"> 
    /**
         * 案例：点击按钮，改变按钮的值
         * 需求：点击按钮，点击一次按钮，值+1
         * 思路：
         * 1.定义模板：给模板的标签绑定点击事件
         *      在模板里面，使用data函数，定义数据count
         * 2.组件注册：将模板绑定到自定义的组件名称上
         * */
    //1.定义模板
    var tem = Vue.extend({
        "data":function(){
            return {"number":1,};
        },
        "template":"<button style='border-radius: 10px;' @click=++number>{{number}}				</button>",
    });
    //2.组件注册
    Vue.component("el-button",tem),
    //3.创建vue对象
    new Vue({
    "el":"#app",
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Element-UI

常见的名词解释

• UI：用户界面（设计的网页界面）
• UE：用户体验，指的用户访问网站，访问体验

ElementUI概述

• 网站快速成型工具（通过ElementUI快速搭建网站）。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。

  特点：

  • 它是一个前端框架，前端开发者使用它快速搭建网站
  • 它的核心提供了丰富的组件库
  • 它的组件是基于Vue框架定义的（一定要引用vue,js）

ElementUI入门

官网地址：https://element.eleme.io

总结

• link标签的href：引入element-ui/lib/theme-chalk/index.css
• script标签的src：引入vue.js
• script标签的src：引入element-ui/lib/index.js

ElementUI常用的组件

（非常丰富的组件库，基于Vue框架定义的）

• 行组件

  <!--基本语法-->
  <el-row>子组件1，子组件2，子组件N</el-row>
  <div>
      <a>
          <p></p>
      </a>
  </div>
  1
  2
  3
  4
  5
  6
  7

  **特点：**让子组件在一行显示

  **注意：**子组件过多，

• 按钮组件

  <!--基本语法-->
  <el-button type="属性">文本</el-button>
  1
  2

  type属性改变按钮的样式：info,danger,warning等等

  icon属性：在按钮上显示icon图标

• icon图标按钮

  <!--基本语法-->
  <i class="属性值"></i>
  1
  2

  class属性值不同，图标样式不一样

• form表单组件

  <!--基本语法-->
  <el-form>
      文本输入框
      密码输入框
      单选输入框
      多选输入框
      提交按钮
      隐藏
  </el-form>
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 容器组件（布局组件）

  网页布局

  • 方式一

  <div id="app">
      <!--布局方式一：瀑布流布局
      头部区域：header
      核心区域：main
      底部区域：footer
      -->
      <!--
      1.容器，表示布局的范围
      布局容器组件名称就是class属性的值
      -->
      <el-container>
          <el-header>头部区域</el-header>
          <el-main>核心区域</el-main>
          <el-footer>底部区域</el-footer>
      </el-container>
  </div>
  <!--2.引入vue.js 放在element：index.js上面-->
  <script src="js/vue.js"></script>
  <!--3.引入index.js-->
  <script src="js/element/element-ui/lib/index.js"></script>
  <script>
      new Vue({
      "el":"#app",
  
      })
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26

  • 方式二

  <div id="app">
     <!--
      1.容器，表示布局的范围
      布局容器组件名称就是class属性的值
      -->
      <el-container>
          <el-header>头部区域</el-header>
          <el-container>
              <el-aside style="width: 100px;">侧边区域</el-aside>
              <el-main>核心区域</el-main>
          </el-container>
      </el-container>
  </div>
  <!--2.引入vue.js 放在element：index.js上面-->
  <script src="js/vue.js"></script>
  <!--3.引入index.js-->
  <script src="js/element/element-ui/lib/index.js"></script>
  <script>
      new Vue({
          "el":"#app",
  
      })
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23

  • 方式三

  <div id="app">
      <!--
      1.容器，表示布局的范围
      布局容器组件名称就是class属性的值
      -->
      <!--1.大的容器：1号容器-->
      <el-container>
          <el-header>头部区域</el-header>
          <!--2.中的容器：2号容器-->
          <el-container>
              <el-aside style="width: 100px;">侧边区域</el-aside>
              <!--3.小的容器：3号容器-->
              <el-container>
                  <el-main>核心区域</el-main>
                  <el-footer>底部区域</el-footer>
              </el-container>
          </el-container>
      </el-container>
  </div>
  <!--2.引入vue.js 放在element：index.js上面-->
  <script src="js/vue.js"></script>
  <!--3.引入index.js-->
  <script src="js/element/element-ui/lib/index.js"></script>
  <script>
      new Vue({
          "el":"#app",
  
      })
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29