Vue入门（三）

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>

解决问题࿱