0
0

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选项,给自定义组件设置多个属性

* 总结
   1. 定义模板时,用到选项:template
            作用:  定义html标签,自定义标签的样式等
   2. 定义模板时,用到选项:props
            作用: 通过给自定义的组件设置属性,从而改变template里面标签的文本
   3. 定义模板时,用到选项: data,(特殊data函数)
           作用:通过给模板设置data函数,从而改名template里面标签的文本值
  1. 定义模板时,用到选项: methods, 作用:给模板里面的标签绑定的事件,提供函数

基本入门1:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入門一</title>
    </head>
    <body>
        <!--定义普通按钮-->
        <button>普通按钮,没有任何样式</button>
        <!--需要在网页里面使用具有弧度的按钮-->
        <button style="border-radius: 10px;">所需的按钮</button>
        <!--
            需要在其它网页里面需要使用有弧度按钮
            在每个网页的每个按钮中,设置style="border-radius: 10px;"
            怎么解决这个问题?
            vue提供的组件来解决这个问题.
            步骤一 1: 定义模板,其实对html标签进行自定义
            步骤二 2: 定义的模板注册到组件(全局组件)
            全局组件: 一次定义,到处使用,就能解决原始html中代码重复的问题
            
        -->
    </body>
</html>

基本入门2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件入门二</title>
    </head>
    <body>
        
        <div id="app">
            <el-button></el-button>
            <el-button></el-button>
            <el-button></el-button>
        </div>
        <!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
        <script src="js/vue.js"></script>
        <script>
            //1.定义模板,双引号嵌套单引号, 单引号嵌套双引号
            var tem = Vue.extend({
                "template":"<button style='border-radius: 10px;'>自定义样式按钮</button>",
            });
            //2.注册组件
             Vue.component("el-button",tem);
            //创建vue对象
            new Vue({
                "el":"#app",
            });
            
        </script>
    </body>
</html>

基本入门3

组件入门三

    <div id="app">
        <el-button title="1111"></el-button>
        <el-button title="2222"></el-button>
        <el-button title="3333"></el-button>
        
    </div>
    <!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
    <script src="js/vue.js"></script>
    <script>
        //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>
</body>

~~~ ~~~ 案例: 点击按钮,改变按的值 需求: 点击按钮,点击一次按钮,值+1 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>case1</title>
    </head>
    <body>
        
        <div id="app">
            <el-button></el-button>
        </div>
        <!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
        <script src="js/vue.js"></script>
        <script>
            //1.定义模板: template,props,data固定写法,至于return数据
            var tem = Vue.extend({
                "data":function(){
                    return {"count":1,}
                },
                "template":"<button style='border-radius: 10px;'>{{count}}</button>",
            });
            //2.组件注册: 将模板 绑定到 自定义的组件名称
            Vue.component("el-button",tem);
            //3.创建vue对象
            new Vue({
                "el":"#app",
            });
            
            
        </script>
    </body>
</html>

case2

    <div id="app">
        <el-button></el-button>
    </div>
    <!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
    <script src="js/vue.js"></script>
    <script>
        /*
         *  案例: 点击按钮,改变按的值
            需求: 点击按钮,点击一次按钮,值+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.组件注册: 将模板 绑定到  组件名称上, 实现: html写组件名称,显示模板
         Vue.component("el-button",tem);
        
        //3.创建vue对象
        new Vue({
            "el":"#app",
        });
    
    </script>
</body>

~~~ ~~~ 案例: 点击按钮,改变按的值 需求: 点击按钮,点击一次按钮,值+1
case

    <div id="app">
        <el-button></el-button>
    </div>
    <!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
    <script src="js/vue.js"></script>
    <script>
        /*
         *  案例: 点击按钮,改变按的值
            需求: 点击按钮,点击一次按钮,值+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.组件注册: 将模板 绑定到  组件名称上, 实现: html写组件名称,显示模板
         Vue.component("el-button",tem);
        
        //3.创建vue对象
        new Vue({
            "el":"#app",
        });
    
    </script>
</body>

~~~ 案例: 点击按钮,改变按的值 需求: 点击按钮,点击一次按钮,值+1 调用函数实现 ~~~
case

    <div id="app">
        <el-button></el-button>
    </div>
    <!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
    <script src="js/vue.js"></script>
    <script>
        /*
         *  案例: 点击按钮,改变按的值
            需求: 点击按钮,点击一次按钮,值+1
            思路:
            1.定义模板: 给模板的按钮标签绑定点击事件
                                 在模板里面,使用data函数,定义数据count
            2.组件注册: 将模板 绑定到 自定义的组件名称
         */
        //1.定义模板
        var tem = Vue.extend({
            "data":function(){
                return {"count":1,};
            },
            "template":"<button style='border-radius: 10px;' @click='test1()' >{{count}}</button>",
            "methods":{
                   //定义函数
                   test1(){
                       this.count++;
                   },
            },
            });
            
            //2.组件注册
            Vue.component("el-button",tem);
            //3
            new Vue({
                "el":"#app",
            });
    </script>
</body>

~~~ ~~~ 案例: 点击按钮,改变按的值 代码整合 ~~~
case

    <div id="app">
        <el-button></el-button>
    </div>
    <!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
    <script src="js/vue.js"></script>
    <script>
        /*
         *  案例: 点击按钮,改变按的值
            需求: 点击按钮,点击一次按钮,值+1
            思路:
            1.定义模板: 给模板的按钮标签绑定点击事件
                                 在模板里面,使用data函数,定义数据count
            2.组件注册: 将模板 绑定到 自定义的组件名称
         */
            //1.定义模板    
            //2.组件注册
            Vue.component("el-button",{
            "data":function(){
                return {"count":100,};
            },
            "template":"<button style='border-radius: 10px;' @click='test1()' >{{count}}</button>",
            "methods":{
                   //定义函数
                   test1(){
                       this.count++;
                   },
            },
            });
            //3
            new Vue({
                "el":"#app",
            });
    </script>
</body>
标签： vue.js javascript 前端
本文转载自: https://blog.csdn.net/caozhisanguo/article/details/122487918
版权归原作者 小码哥的进阶 所有， 如有侵权，请联系我们删除。
登录后发布评论

“1月14-Vue高级”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

C#与C++交互开发系列（二十）：跨进程通信之共享内存（Shared Memory）

hadoop技术实验- 第4章 HBase 开发：使用Java操作HBase

智能对话微信前端小程序设计与开发

前端配置开发环境：新电脑配置前端开发环境，Vue开发环境配置的详细过程

SpringBoot集成MQTT服务器和客户端并通过WebSocket将消息实时发送到前端（本地搭建MQTT服务器）

idea | 搭建 SpringBoot 项目之配置 Maven

Python毕业设计选题：基于django+vue的全国民宿信息管理系统

文章导航