精华内容
下载资源
问答
  • 2020-11-30 18:07:29

    组件销毁有很多种情况

    比如页面关闭,路由跳转(没有使用keep-alive时的路由切换)

    还可以使用v-if和改变key值来销毁组件,这属于手动销毁组件

    更多相关内容
  • Vue组件什么Vue组件的使用

    千次阅读 多人点赞 2020-04-13 17:45:09
    组件是什么? 组件是可复用的 Vue 实例, 把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。...Vue组件的使用 ...

    组件是什么?

    组件是可复用的 Vue 实例, 把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如 页面头部、侧边、内容区,尾部,上传图片,等多个页面要用到一样的就可以做成组件,提高了代码的复用率。

    Vue组件的使用                                                                                                                         --非常详细--

    先说一下我们的目录

    一.创建我们的组件B.vue

    同理 ,新建一个hello_word.vue作为父

    那么你将看到这样的结果

    重点:

    hello_word.vue中引入B.vue模块   // import showB from './B.vue'  引入组件

    B文件的自定义模块名 showB

       注册组件

     components:{
              showB,        
            },

    <showB /> //使用组件

    注意:定义组件名要驼峰命名法  如:使用 PascalCase  使用 kebab-case

    开始进入正题 props

    父组件传值给子组件(父组件绑定数据如:value="该工作了",子组件通过props获取)
    子组件的props选项能够接收来自父组件数据。没错,仅仅只能接收,props是单向绑定的,即只能父组件向子组件传递,不能反向。
    用法如下:

    B组件

    父组件

    那么你将看到页面显示

    在created打印下value的值

    结果,     

    子组件传值给父组件

    子组件中:

    <div @click="chuanzhi">回复父组件</div>

    chuanzhi() {
                this.$emit('msg', '知道了知道了') //执行 msg 函数并把要改变的值作为参数带过去
            }


     

    父组件:

    在DOM中引入@msg='msg'

    <showB :value='text' @msg='msg'/> 

     msg(val){
                     console.log(val,'val')
                     }

    通过方法接收

    运行,点击回复父组件     

    打印结果:

     

     

     

     

     

    展开全文
  • Vue组件

    千次阅读 2021-12-10 19:44:22
    一、组件化 1.1简介 组件(component

    一、组件化

    1.1简介

    组件(component)是vue.js最强大的功能之一。组件的作用就是封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件,而且是所有组件的根组件

    1.2全局注册组件

    定义组件语法

    <body>
        <div id="app">
          <my-header></my-header>
          <my-header></my-header>
          <my-header></my-header>
        </div>
      </body>
    
      <script>
        Vue.component("my-header", {
          data: function() {
            return {
              title: "头部标题内容"
            };
          },
          template: `
          <div>
              <button @click='handle'>点击</button>
              <div>{{title}}</div>
          </div>
          `,
          methods: {
            handle: function() {
              console.log(this.title);
            }
          }
        });
        var vue = new Vue({
          el: "#app",
          data: {},
          methods: {},
          computed: {}
        });
      </script>

    注意点

    1.组件中的data是一个函数,不是对象

    2.组件中必须有一个唯一的根元素

    3.模板中内容较多时候建议使用模板字符串

    1.2局部注册组件

    <body>
        <div id="app">
          <my-header></my-header>
          <my-footer></my-footer>
        </div>
      </body>
    
      <script>
        let myHeader = {
          data: function() {
            return {
              title: "头部标题的内容"
            };
          },
          template: `
          <div>
            <button @click="handle">点击</button>
            <p>{{title}}</p>
          </div>
         `,
          methods: {
            handle: function() {
              console.log(this.title);
            }
          }
        };
        let myFooter = {
          data: function() {
            return {
              title: "底部标题的内容"
            };
          },
          template: `
          <div>
            <button @click="handle">点击</button>
            <p>{{title}}</p>
          </div>
         `,
          methods: {
            handle: function() {
              console.log(this.title);
            }
          }
        };
        var vue = new Vue({
          el: "#app",
          data: {},
          methods: {},
          computed: {},
          components: {
            "my-header": myHeader,
            "my-footer": myFooter
          }
        });
      </script>

    或者也可以这样写

    <body>
        <div id="app">
          <my-header></my-header>
          <my-footer></my-footer>
        </div>
        <!-- 定义头部组件模板 -->
        <template id="my-header">
          <div>我是头部内容{{ title }}</div>
        </template>
        <!-- 定义底部组件模板 -->
        <template id="my-footer">
          <div>我是底部内容{{ title }}</div>
        </template>
      </body>
    
      <script>
        let myHeader = {
          data: function() {
            return {
              title: "头部"
            };
          },
          template: "#my-header",
          methods: {
            handle: function() {
              console.log(this.title);
            }
          }
        };
        let myFooter = {
          data: function() {
            return {
              title: "底部"
            };
          },
          template: "#my-footer",
          methods: {
            handle: function() {
              console.log(this.title);
            }
          }
        };
        var vue = new Vue({
          el: "#app",
          data: {},
          methods: {},
          computed: {},
          components: {
            "my-header": myHeader,
            "my-footer": myFooter
          }
        });
      </script>

    注意

    1.局部注册的子组件只能在注册过的父组件中使用

    2.components是注册组件的意思

    1.3折叠面板案例

    <body>
        <div id="app">
          <my-collapse></my-collapse>
          <my-collapse></my-collapse>
          <my-collapse></my-collapse>
        </div>
        <!-- 定义折叠面板模板 -->
        <template id="my-collapse">
          <div>
            <button @click="isShow=!isShow">折叠</button>
            <div v-show="isShow">我是折叠显示的内容</div>
          </div>
        </template>
      </body>
    
      <script>
        let myHeader = {
          data: function() {
            return {
              isShow: false
            };
          },
          template: "#my-collapse",
          methods: {}
        };
    
        var vue = new Vue({
          el: "#app",
          data: {},
          methods: {},
          computed: {},
          components: {
            "my-collapse": myHeader
          }
        });
      </script>

    二、vue调试工具

    先去官网点击下载链接进行下载

     配置步骤如下: 1、git clone GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications. 下载 1、cd clone下来的文件夹中 2、npm install 3、npm run build 4、谷歌浏览器打开扩展程序,加载这个包即可

     5、打开vue页面之后就能调试vue的内容了

     

    注意

    1、你下载的vue.js包必须是官网提供的开发版本的包

    2、如果不显示请重启浏览器 

    三、组件传值

    3.1简介

     组件实例对象之间是独立的,但是他们之间是如何进行数据传输的呢?

    3.2父传子

    3.2.1父传子用法

    <body>
        <div id="app">
          <my-son :num="number"></my-son>
        </div>
        <!-- 定义折叠面板模板 -->
        <template id="my-son">
          <div>
            <div>我是接受父组件传递过来的数据 {{ num }}</div>
          </div>
        </template>
      </body>
    
      <script>
        let mySon = {
          data: function() {
            return {};
          },
          props: {
            num: {
                type:Number
            }
          },
          template: "#my-son",
          methods: {}
        };
    
        var vue = new Vue({
          el: "#app",
          data: {
            number: 100
          },
          methods: {},
          components: {
            "my-son": mySon
          }
        });
      </script>

    步骤总结如下: 1、父组件定义数据 2、父组件通过属性的方式给子组件传递数据 3、子组件通过props属性接受数据并做参数设置 4、子组件使用传递过来的数据

    或者以下面数组的形式接收也可以

    <body>
        <div id="app">
          <my-son :num="number"></my-son>
        </div>
        <!-- 定义折叠面板模板 -->
        <template id="my-son">
          <div>
            <div>我是接受父组件传递过来的数据 {{ num }}</div>
          </div>
        </template>
      </body>
    
      <script>
        let mySon = {
          data: function() {
            return {};
          },
          props: ["num"],
          template: "#my-son",
          methods: {}
        };
    
        var vue = new Vue({
          el: "#app",
          data: {
            number: 100
          },
          methods: {},
          components: {
            "my-son": mySon
          }
        });
      </script>

    3.2.2 props细节

    1. 每一个数据项,都可以有3个属性进行约束type,类型约束,约束父组件给子组件传递的数据类型,类型可以是:Object、Array、Number、String、Boolean等几种。
    2. default,指定默认值,如果父组件没有传递数据,可以指定默认值
    3. required,指定该数据项是否必须传递

    比如:默认值如下写:

    <body>
        <div id="app">
          <!-- <my-son :num="number"></my-son> -->
          <my-son></my-son>
        </div>
        <!-- 定义折叠面板模板 -->
        <template id="my-son">
          <div>
            <div>我是接受父组件传递过来的数据 {{ num }}</div>
          </div>
        </template>
      </body>
    
      <script>
        let mySon = {
          data: function() {
            return {};
          },
          props: {
            num: {
              default: "默认值"
            }
          },
          template: "#my-son",
          methods: {}
        };
    
        var vue = new Vue({
          el: "#app",
          data: {
            number: 100
          },
          methods: {},
          components: {
            "my-son": mySon
          }
        });
      </script>

    练习:父组件给子组件传递数组,子组件循环遍历使用

     <body>
        <div id="app">
          <!-- <my-son :num="number"></my-son> -->
          <my-son :list="students"></my-son>
        </div>
        <!-- 定义折叠面板模板 -->
        <template id="my-son">
          <div>
            <ul>
              <li v-for="(item,index) in list">
                <h3>{{ item.name }}</h3>
                <p>{{ item.age }}</p>
              </li>
            </ul>
          </div>
        </template>
      </body>
    
      <script>
        let mySon = {
          data: function() {
            return {};
          },
          props: {
            list: {
              type: Array
            }
          },
          template: "#my-son",
          methods: {}
        };
    
        var vue = new Vue({
          el: "#app",
          data: {
            students: [
              { id: 1, name: "tom", age: 21 },
              { id: 2, name: "jim", age: 22 },
              { id: 3, name: "jack", age: 23 }
            ]
          },
          methods: {},
          components: {
            "my-son": mySon
          }
        });
      </script>

    3.3子传父

    <body>
        <div id="app">
          <my-son @childhandle="fuhandle"></my-son>
          <div>{{ con }}</div>
        </div>
        <!-- 定义折叠面板模板 -->
        <template id="my-son">
          <div>
            <button @click="childClick">点击</button>
          </div>
        </template>
      </body>
    
      <script>
        let mySon = {
          data: function() {
            return {
              msg: "子组件中的内容"
            };
          },
          template: "#my-son",
          methods: {
            childClick: function() {
              this.$emit("childhandle", this.msg);
            }
          }
        };
    
        var vue = new Vue({
          el: "#app",
          data: {
            con: ""
          },
          methods: {
            fuhandle: function(val) {
              this.con = val;
            }
          },
          components: {
            "my-son": mySon
          }
        });
      </script>

    步骤如下:

    1、子组件绑定事件

    <button @click='childClick'>点击</button>

    调用this.$emit方法传递数据,第一个参数是自己定义的事件名,第二个参数是传递的数据

    2、父组件监听传递的事件childhandle

    3、父组件中对监听的事件做处理,拿到传递的数值再在页面显示或其他处理。

    3.4兄弟组件传值

     说明:兄弟组件之间没办法直接进行传值,可以通过一个中转站进行数据传递

    <body>
        <div id="app">
          <son1></son1>
          <son2></son2>
          <button @click="handle">父组件销毁事件</button>
        </div>
        <template id="son1">
          <div>
            <p>第一个子元素</p>
            <button @click="handle">发送给son2</button>
            <p>son1:{{ num1 }}</p>
          </div>
        </template>
        <template id="son2">
          <div>
            <p>第一个子元素</p>
            <button @click="handle">发送给son1</button>
            <p>son2:{{ num2 }}</p>
          </div>
        </template>
        <script>
          // 定义一个事件中心
          let hub = new Vue();
          let son1 = {
            template: "#son1",
            data: function() {
              return {
                num1: 0
              };
            },
            methods: {
              handle: function() {
                hub.$emit("son2-event", 10);
              }
            },
            mounted: function() {
              hub.$on("son1-event", val => {
                this.num1 = val;
              });
            }
          };
          let son2 = {
            template: "#son2",
            data: function() {
              return {
                num2: 0
              };
            },
            methods: {
              handle: function() {
                hub.$emit("son1-event", 20);
              }
            },
            mounted: function() {
              hub.$on("son2-event", val => {
                this.num2 = val;
              });
            }
          };
          let vue = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {
              son1: son1,
              son2: son2
            },
            methods: {
              handle: function() {
                hub.$off("son1-event");
                hub.$off("son2-event");
              }
            }
          });
        </script>
      </body>

    执行步骤如下:

    1、两个子组件定义并在父组件注册

    2、两个子组件分别定义各自的事件,注意调用的时候互相调用

    3、父组件中定义事件销毁的方法

    3.5留言板案例

     思路分析: 由于评论的功能将来在项目的多个地方都会使用,所以我们将其设计为组件,从而提 升代码的重用性,所以我们将上面的留言板设计为2个组件:留言列表、添加留言

    <body>
        <div id="app">
          <h3>请输入你的个人见解</h3>
          <msg-list :msg="msglist"></msg-list>
          <add-msg @postmsg="receive"></add-msg>
        </div>
    
        <!-- 1、定义添加组件模板 -->
        <template id="add-msg">
          <div>
            <input type="text" v-model="title" />
            <textarea v-model="content" cols="30" rows="10"></textarea>
            <button @click="postMsg">点击</button>
          </div>
        </template>
    
        <!-- 2、定义组件列表模板 -->
        <template id="msg-list">
          <div>
            <h3>留言区内容</h3>
            <ul>
              <li v-for="(item,index) in msg">
                <p>第几楼</p>
                <p>{{ item.title }}</p>
                <p>{{ item.content }}</p>
              </li>
            </ul>
          </div>
        </template>
      </body>
    
      <script>
        //   3、定义添加组件对象
        let addMsg = {
          data: function() {
            return {
              title: "",
              content: ""
            };
          },
          template: "#add-msg",
          methods: {
            postMsg: function() {
              //   this.title是获取用户输入的标题  this.content是获取用户输入的内容
              this.$emit("postmsg", { title: this.title, content: this.content });
            }
          }
        };
        //   4、定义组件列表对象
        let msgList = {
          data: function() {
            return {};
          },
          props: {
            msg: {
              type: Array
            }
          },
          template: "#msg-list"
        };
        //   根组件
        var vue = new Vue({
          el: "#app",
          data: {
            msglist: []
          },
          methods: {
            receive: function(msg) {
              this.msglist.push(msg); //val是获取到的子组件传递过来的单条对象信息
            }
          },
          //   3、注册子组件
          components: {
            "add-msg": addMsg,
            "msg-list": msgList
          }
        });
      </script>

    四、插槽

    4.1插槽基本用法

    <body>
        <div id="app">
          <my-son></my-son>
          <my-son
            ><ul>
              <li>11</li>
              <li>222</li>
              <li>333</li>
              <li>4444</li>
            </ul></my-son
          >
        </div>
        <template id="my-son">
          <div>
            <h3>标题</h3>
            <div><slot>默认内容</slot></div>
          </div>
        </template>
        <script>
          let mySon = {
            template: "#my-son",
            data: function() {
              return {};
            },
            methods: {}
          };
          let vue = new Vue({
            el: "#app",
            data: {},
            components: {
              "my-son": mySon
            }
          });
        </script>
      </body>

    4.2具名插槽

    <body>
        <div id="app">
          <div slot="header">我是头部内容</div>
          <div slot="main">我是主体内容</div>
          <div slot="footer">我是底部内容</div>
        </div>
      </body>
    
      <script>
        var mySon = {
          data: function() {
            return {};
          },
          template: `
          <div>
              <div><slot name='header'></slot></div>
              <div><slot name='main'></slot></div>
              <div><slot name='footer'></slot></div>
          </div>
          
          `,
          methods: {}
        };
    
        var vue = new Vue({
          el: "#app",
          data: {},
          methods: {},
          components: {
            "my-son": mySon
          }
        });
      </script>

    展开全文
  • 20多个好用的 Vue 组件

    千次阅读 2022-03-30 08:00:02
    作者:lindelof 译者:前端小智 来源:medium ...在本文中,我们将探讨一些最常见的vue js组件。你可以收藏一波。 Table 类 Vue Tables-2 地址:https://github.com/matfish2/vue-tables-2 Vue Tab.

    作者:lindelof
    译者:前端小智
    来源:medium

    有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

    本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

    在本文中,我们将探讨一些最常见的vue js组件。你可以收藏一波。

    Table 类

    Vue Tables-2

    001.png

    地址:https://github.com/matfish2/vue-tables-2

    Vue Tables 2旨在为开发者提供一个功能齐全的工具集,以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。此外,Vue Tables 2正在不断成长、改进,同时也在获得新的功能。

    特点

    • 可选行及粘性头部
    • 虚拟分页
    • 下载客户组件数据的CSV
    • 有数据层支持的多级分组
    • Tailwind 主题

    Handsontable

    002.png

    地址:https://github.com/handsontable/handsontable/tree/master/wrappers/vue

    handsontable是一款页面端的表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。

    同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作。

    此外,它还适用于React、Angular和Vue。Handsontable 是一个JavaScript组件,它将数据网格功能与电子表格的用户体验相结合。此外,它还提供数据绑定、数据验证、过滤、排序和CRUD操作。

    特点

    • 多列排序
    • 非连续选择
    • 过滤数据和验证数据
    • 导出文件
    • 有条件的格式化
    • 合并单元格
    • 隐藏行/列
    • 上下文菜单和注释

    Ag Grid Vue

    003.png

    地址:https://github.com/ag-grid/ag-grid

    Ag-Grid 是一个基于Vue.js的数据表格组件。其中,“ag” 表示 “agnostic”。内部 ag-Grid引擎是在TypeScript中实现的,零依赖关系。

    ag-Grid通过包装器组件支持Vue,你可以在应用程序中,就像其他任何Vue组件一样使用ag-Grid。它支持通过属性绑定传递配置,通过事件绑定来处理事件。你甚至可以使用Vue组件来自定义网格UI和单元格内容/行为。

    Vue Easytable

    005.png

    地址:https://github.com/huangshuwei/vue-easytable

    vue-easytable是我遇到过的最强大的Vue表格组件之一。

    表格组件具有许多内置功能,比如说,单元格省略号、固定/灵活的列大小调整、自定义过滤等等。它有几个特点:

    • 国际化
    • 主题定制
    • 内置主题
    • 虚拟滚动
    • 列固定
    • 表头固定
    • 表头分组

    Vue Good Table

    006.png

    地址:https://github.com/xaksis/vue-good-table

    Vue-Good-Table是一个基于Vue.js的数据表组件,简单、干净,具有排序、列过滤、分页等更多基本功能。它有几个特性:

    • 表搜索和排序
    • 列过滤和分页
    • 复选框表格
    • 行分组
    • 行样式
    • 行多选

    Vue Toastification

    007.png

    地址:https://github.com/Maronato/vue-toastification

    它提供轻巧、简单和漂亮的吐司提示。它有内置的Nuxt支持。而且,它还支持新的Composition API和Vue 3。我们还可以J使用SX来开发自定义组件,提供更加灵活的功能。另外,通用注册允许它在任何应用程序内使用,甚至是React。它有几点特性:

    • 完全用Typescript编写,支持所有类型
    • 支持RTL
    • 定制一切
    • 滑动关闭
    • 使用onClose、onClick和onMounted钩子创建自定义体验
    • 以编程方式删除和更新吐司

    Vue Toasted

    地址:https://github.com/shakee93/vue-toasted

    008.png

    Vue Toasted是 Vue 最好的toast(提示)插件之一。它被Vue,Laravel,NuxtJS 等许多组织所信任,它响应性强,兼容性好,使用方便,吸引人,有丰富的功能、图标、动作等。

    Vue Notifications

    009.png

    地址:https://github.com/se-panfilov/vue-notifications

    Vue Notifications是一个与库无关的通知组件,非阻塞。

    VueNotiments将您的应用程序与通知UI库连接起来。支持miniToastr、VueToasted、VueEasyToast、toastr、iziToast、Noty、swal。

    Vue Awesome Notifications

    010.png

    地址:https://f3oall.github.io/awesome-notifications/

    Awesome Notifications是一个轻量级的,完全可自定义的JavaScrip Vue Awesome Notifications,它是Awesome Notifications库的Vue.js版本。

    Vue Wait

    011.png

    地址:https://github.com/f/vue-wait

    Vue Wait 这是一个用于VUE、Vuex和Nuxt应用的复杂装载器和进度管理组件。

    Vue Wait帮助管理页面上的多个加载状态,状态之间没有任何冲突。基于一个非常简单的想法:通过管理具有多个加载状态的数组(或者Vuex存储),让内置加载程序组件侦听注册的加载程序,并立即进入加载状态。

    Vue Content Loader

    地址:https://github.com/egoist/vue-content-loader

    012.png

    Vue Content Loader是一个基于Vue.js的SVG占位符加载,可自定义的SVG组件,用于创建占位符加载,例如Facebook加载卡。 Vue Content Loader是react-content-loader的Vue实现。

    1. 完全可定制:你可以改变颜色,速度和大小
    2. 创建自己的加载:使用在线工具轻松创建你的自定义加载
    3. 你现在就可以使用它:已经有很多预设了
    4. 性能

    Epic Spinners

    013.png

    地址:https://epic-spinners.epicmax.co/

    EpicSpinners是一组易于使用的纯css打造的网页Loading效果,并且同时整合了Vue组件可以方便的在Vue项目中进行使用,由于是纯css打造,你可以在任意网页项目中自行整合并使用!

    Vue Radial Progress

    014.png

    地址:https://github.com/wyzant-dev/vue-radial-progress

    Vue Radial Progress 这是一个径向进度条效果的加载器组件,使用svg和javascript绘制带有渐变径向进度条效果的加载器,可以用作加载、进度提示。

    ICONS

    Vue Feather Icons

    地址:https://github.com/egoist/vue-feather-icons

    015.png

    Feather 是一套面向设计师和开发者的开源图标库,是一个简单漂亮的开源图标库。 每个图标都设计在一个24×24的网格上,强调简单,一致性和易读性。很多大厂出品的前端框架都内置了这款可以免费商用的图标。

    特点

    • 每一枚图标都是按照统一标准进行设计,具有完美像素对齐;
    • 设计风格一致,完胜那些拼凑混搭的图标库;
    • 覆盖多种开发场景的支持,对开发者非常友好。

    Vue Awesome

    地址:https://github.com/Justineo/vue-awesome

    016.png

    Font Awesome是一套流行的图标字体库,我们在实际开发的过程中会经常遇到需要使用图标的场景,对于一些常用的图标,不用设计师,我们可以直接在Font Awesome中找到并且使用。个人感觉Font Awesome的图标还是很齐全的,绝大多数的图标它都包含了,而且支持各种框架。

    Vue Material Design Icons

    地址:https://github.com/robcresswell/vue-material-design-icons

    一个作为单文件组件的SVG Material Design图标集合。此外,这个库是一个Vue单文件组件的集合,用于渲染Material Design图标。此外,它还包括一些CSS,有助于使图标的缩放更容易一些。

    Charts

    Vue Apexcharts

    地址:https://github.com/apexcharts/vue-apexcharts

    017.png

    Apexcharts是一个现代的JavaScript图表库/可通过简单的API构建交互式图表和可视化。Vue Apexcharts是ApexCharts的Vue.js组件。

    Vue Echarts

    地址:https://github.com/Justineo/vue-echarts

    018.png

    vue-echarts是基于echarts封装实现的一个组件库,直接按照正常的组件引用方式,安装引用即可,具体的安装和引用读者可以直接阅读vue-echarts技术文档。

    Vue Chartjs

    地址:https://github.com/apertureless/vue-chartjs

    019.png

    vue-chartjs 是一个 Vue 对于 Chart.js 的封装,让用户可以在Vue中轻松使用Chart.js,很简单的创建可复用的图表组件,非常适合需要简单的图表并尽可能快地运行的人。 vue-chartjs抽象了基本逻辑,同时也暴露了Chart.js对象,让用户获得最大的灵活性。

    V-Charts

    地址:https://github.com/ElemeFE/v-charts

    020.png

    V-Charts 是基于 Vue2.0 和 Echarts 封装的图标组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,就可以生成常见的图表。

    时间

    Vue Timer Hook

    地址:https://github.com/riderx/vue-timer-hook

    021.png

    Vue3 计时器模块的灵感来自 react-timer-hook。此外,它是一个自定义的钩子,用来处理vue 3 组件中的定时器、秒表和时间逻辑/状态。

    Vue Horizontal Timeline:

    地址:https://github.com/guastallaigor/vue-horizontal-timeline

    022.png

    Vue Horizontal Timeline 是一个用Vue.js制作的简单的水平时间线组件。

    代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

    原文:https://medium.com/js-dojo/20-usefulue-js-components-2022-3bf9fbe5b556

    交流

    有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

    本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

    展开全文
  • vue自定义组件中再嵌套其他组件

    千次阅读 2022-03-12 16:28:47
    VUE的看点是组件组件应用的典型例子,是一个网站首页。分为若干版块。每个版块都是一个方框框,样式一致,只是版块中间内容不同。对于VUE来说,很自然的想法,就是方框是一个组件,然后里面嵌套个性化内容,或者每...
  • vue组件递归

    千次阅读 2022-02-14 19:10:02
    这时我们可以使用组件递归的思想来实现: 如下demo: 1、定义菜单组件 <template> <ul> <li v-for="(item, index) in list" :key="index"> <p>{{ item.name }}</p> <tree...
  • Vue基础知识总结 4:vue组件化开发

    千次阅读 多人点赞 2021-07-21 23:37:50
    Vue组件应该自己保存数据的地方。 组件自己的数据存放在哪里? 组件对象也一个data属性(也method等属性); 只是这个data属性必须是一个函数; 而且这个函数返回一个对象,对象内部保存着数据; 2、代码实例...
  • html页面引入vue组件

    千次阅读 2021-06-29 08:16:42
    html页面引入vue组件需要在页面引入http-vue-loader.js注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会跨域问题,可以在本地配置一个nginx转发,再浏览器访问...component.vueHello {{who}}...
  • Vue组件开发——异步组件

    千次阅读 2022-02-10 01:25:02
    一、引入 我们在讲异步组件之前,我们再来回顾一下webpack...二、vue中的异步组件 通过上面的webpack配置我们明白了为什么要进行分包操作,此时我们想一个问题,如果一个网站的页面在用户第一次浏览器时就将全部页面
  • Vue组件之动态组件

    千次阅读 2022-01-22 10:09:15
    动态组件:不同组件之间进行动态切换,通过 Vue 的元素加一个特殊的 is attribute 实现 1. 基础使用 component的is 属性值是组件名,就可以调用该组件 <component is="comb"></component> <...
  • vue组件封装

    千次阅读 2022-04-05 18:03:53
    1.2 在main.js中引入 语法如下:import '组件对象'from 'xxx.vue文件路径' 1.3 组件注册 语法如下: Vue.component("组件名","组件对象"); 1.4 把组件名在需要设置的某xxx.vue文件中当标签使用 2. 局部注册-...
  • Vue组件通信的六种方式

    千次阅读 2022-02-02 11:32:59
    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法...本文总结了vue组件间通信的几种方式,如props、$emit/$on、vuex、$parent / $children、$attrs/$listen
  • Vue组件封装的过程

    千次阅读 多人点赞 2020-09-09 18:02:16
    Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 某些情况下,组件也可以...
  • vue组件传参

    千次阅读 2021-01-08 10:21:11
    组件传参 <create-time-count :key="createTimeTimer" :test="testData"/> data() { return { //testData: 12312312,//number // testData: '字符串',//string // testData: {obj: '对象'},//object /...
  • vue组件什么条件下需要摧毁?

    千次阅读 2020-12-23 14:21:17
    v-if与组件的自动销毁在文档中这样一句话,v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。如果我们这样一个组件销毁我们通过点击按钮改变v-if的值,销毁Child组件var Child = {...
  • Vue组件什么

    千次阅读 2020-03-25 18:37:41
    因为组件是可复用的Vue实例,所以它们与new Vue()接收相同的选项,例如data,computed、watch、methods以及生命周期钩子等。仅的例外是像el这样根实例特有的选项。 例如,在一个绝大多数的系统网页中...
  • vue组件中的data为什么是一个函数

    千次阅读 2021-03-20 11:04:00
    2.vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回...
  • vue组件component详解

    千次阅读 2020-12-25 09:14:18
    vue组件component详解 组件介绍 组件: ​ 组件是拥有一定功能多个html标签的集合体,是对html标签的封装。 好处: ​ 模板中为了实现一个(例如分页)效果,需要绘制20个html标签,如果使用组件,就设置一个标签就...
  • vue组件间传值的几种方法

    千次阅读 2022-02-10 19:08:41
    一丶父子组件传值 先在父组件中给子组件的自定义属性绑定一个 父组件的变量 <template class="father"> <child :自定义属性名="父组件的变量"></child> <template > 在子组件的props...
  • 面试官:谈一下你对Vue组件化的理解

    千次阅读 多人点赞 2022-03-20 21:27:52
    假设说采取传统开发网页的方式去开发一个系统,在一定程度上,会...为了避免这些弊端可以采取组件化设计去开发一个多人协作、功能又较多的项目,组件化开发带来的可维护性和可复用性可以提升开发效率、降低代码耦合度。
  • ant-design-vue UI组件使用讲解

    万人学习 2019-06-10 11:26:25
    通过jeecg-boot项目实战,详细介绍 ant-design-vue UI组件使用,细致的讲解每个组件的用法,教你学会如何看ant-design-vue的官方文档。 对于初学入门者来讲,非常实用。
  • 面试官:Vue组件和插件有什么区别?

    千次阅读 多人点赞 2020-12-07 08:41:00
    一、组件什么回顾一下对组件的定义:组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的...
  • vue组件的v-model

    千次阅读 2022-02-10 13:40:50
    如图所示,在给组件使用v-model的时候,其实相当于将绑定的值update:model-value通过props传递给组件。并且在该组件上监听一个名为update:model-value,在组件中通过this.$emit触发事件,并且可以将要修改的值,传递...
  • vue组件引入

    千次阅读 2022-02-24 16:32:47
    vue的一个强大功能就是组件化开发,那么组件如何引入到页面中呢,今天就带大家一起了解一下 第一种方式:在页面单独引入 在script标签内部导入组件 import login from './components/Login' 在components中注册...
  • vue 组件自己调用自己

    千次阅读 2021-05-10 17:36:34
    vue中有些情况下我们会用到组件本身来遍历出自己想要的效果。 其实非常简单,可以在模板中使用name属性值,来调用自己 <template> <el-submenu v-if="item.children && item.children.length &...
  • Vue组件传值.sync

    千次阅读 2021-12-15 10:18:55
    传统的父子组件之间传值,父组件-->子组件 ----父组件(父组件会接收到子组件传回来的方法,并且对数据进行更改) ...----子组件(props接,但是子组件只有读的属性,不可以对数据进行更改,所以$emit.
  • Vue组件封装 ——input 输入框组件

    千次阅读 2021-12-31 11:25:25
    2、创建components文件夹,用于存放组件,新建input.vue组件,可以自己取个名字 <script> export default { name: "CatInput", }; </script> 3、在main.js中引入组件 import CatInput from "./...
  • vue组件导入的方式

    千次阅读 2021-07-11 13:45:50
    第一种自然是直接import xxx from "组件的路径",然后再到components中引用,例如vue自带的helloworld.vue示例: <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"&...
  • Vue 组件之间传值

    万次阅读 多人点赞 2019-05-29 09:49:10
    Vue 组件之间传值 在父组件中改变子组件里的数据 <!--在父组件中引用子组件,添加ref标识--> <son ref="son"></son> //父组件点击事件 clickFunc(){ //若更新子组件里a的值 this.$refs.son...
  • VUE如何引用组件

    千次阅读 2021-07-19 16:40:59
    vue引用组件主要分为如下两种: 一:全局引用 1,现在main中引用组件: import 组件别名 from '组件路径' 2.注册组件 Vue.component('组件别名', 组件别名) 二:局部引用 1.在需要引用组件的页面中script下...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 452,320
精华内容 180,928
关键字:

vue组件有什么用