1月14-Vue高级

今日 内容:
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选项,给自定义组件设置