精华内容
下载资源
问答
  • vue弹窗组件使用方法

    2020-12-10 18:07:03
    本文实例为大家分享了vue弹窗组件的具体代码,供大家参考,具体内容如下 弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的。学了一段时间vue,想想还是用vue写一下吧。用的很小白,但是会...
  • 使用vue自定义组件以及动态时间 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></...

    使用vue自定义组件以及动态时间

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        
        <body>
            <script src="js/Vue.js"></script>
    <div id="app">
        
        <incbutton></incbutton>
    </div>
    <div id="app1">
        <component-a></component-a>
        
        <timesa></timesa>
    </div>
                    
            
            
            
            <script type="text/javascript">
              
                Vue.component('timesa',{
                    template:`<h2>你好,当前时间是:{{time1}}</h2>`,
                    data(){
                        return {
                            time1: new Date().toLocaleTimeString(),
                            _ti:null
                        }
                    },
                    methods:{
                        updatetime(){
                            this.time1=new Date().toLocaleTimeString()
                        }
                    },
                    created(){
                        this._ti=setInterval(this.updatetime,1000);
                    },
                    breforeDestory(){
                //释放
    this._ti.claer(); } }) Vue.component('component-a',{ template:`<h1>你好,现在时间是:{{date}}</h1>`, data(){ return { date:new Date().toLocaleTimeString(), timer:null } }, methods:{ updateTime(){ this.date=new Date().toLocaleTimeString(); } }, created(){ this.timer=setInterval(this.updateTime,1000); }, beforeDestory(){
                //释放
    this.timer.claey(); } }) new Vue({el:'#app1'})
          //定义组件
                var my ={
                    template:`<button @click='incr' @mouseover='del()'>你已经点击了{{count}}</button>`,
                    data(){
                        return{
                            count :0
                        }
                    },
                    methods:{
                        incr(){
                            this.count = this.count +1;
                        },
                        del(){
                            this.count=this.count-1;
                        }
                    }
                }


    //注册组件名 Vue.component('incbutton',my); //使用组件 var vm=new Vue({ el:"#app" }); </script> </body> </html>

    运行效果:

     

    posted @ 2018-11-19 11:11 韦邦杠 阅读(...) 评论(...) 编辑 收藏
    展开全文
  • Vue组件使用(一)

    2019-10-04 20:25:06
    组件这种东西用来封装多次使用的控件还是很有用处的,我还是挺喜欢这种模式,优化了前端的工作,写个组件也比较简单。下次有时间记录一下样式的复用 首先呢,使用webstorm创建一个新的Vue项目 创建完毕项目后,...

    这仅仅是个人为了防止忘记做的笔记而已,仅供参考,有不对的地方请纠正

    组件这种东西用来封装多次使用的控件还是很有用处的,我还是挺喜欢这种模式,优化了前端的工作,写个组件也比较简单。下次有时间记录一下样式的复用

    首先呢,使用webstorm创建一个新的Vue项目

    创建完毕项目后,我们在component目录下创建一个index页面,然后在这里做测试,因为我所有的选择都是默认的,自己在做的时候可以根据实际需求来写,都无所谓,这不是重点。

    那么重点来了,组件,我首先,引入Vue.js,引入完毕后来写组件

    引入之后,使用component属性自定义所需的控件

     

    vue.component('Hello',{
          template:'<h1>Hello World</h1>'
        });

    我这里定义了一个Hello,我在页面上可以这么引用自定义组件

    <div id="app">
        <Hello></Hello>
    </div>

    那么我运行之后在页面上显示的结果就是这样的,这就是一个最简单的组件使用方式。

    至于Vue,可以自己去官网找下载链接,我这里就不放Vue的下载链接了,下面我附上整个页面的源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
      <script src="vue.min.js"></script>
      <script>
        vue.component('Hello',{
          template:'<h1>Hello World</h1>'
        });
        new vue({
          el:"#app"
    
        });
    
      </script>
    </head>
    <body>
    <div id="app">
        <Hello></Hello>
    </div>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/yinxuejunfeng/p/9221019.html

    展开全文
  • vue自定义组件 简单 简单的时间线 (simple-vue-timeline) A timeline vue component which ... 时间Vue组件,利用了公共库的使用: bootstrap vue components, 引导vue组件vue-fontawesome Vue-fontawesome...

    vue自定义组件 简单

    简单的时间线 (simple-vue-timeline)

    A timeline vue component which leverages the use of common libraries:

    时间轴Vue组件,利用了公共库的使用:

    • bootstrap vue components,

      引导vue组件,

    • vue-fontawesome

      Vue-fontawesome

    • and fecha date formatting.

      和fecha日期格式。

    入门 (Getting Started)

    安装 (Installation)

    npm install --save simple-vue-timeline

    样式 (Style)

    @import '~simple-vue-timeline/dist/simple-vue-timeline';

    As bootstrap is used, you must add the bootstrap style:

    使用引导程序时,必须添加引导程序样式:

    @import '~bootstrap/scss/bootstrap';

    字体很棒 (Font Awesome)

    Refer to vue-fontawesome documentation.

    请参阅vue-fontawesome文档。

    模板元素 (Template Element)

    Add the element as follow:

    如下添加元素:

    template

    template

    <timeline :items="items" dateFormat="YY/MM/DD" @timeline-edit="edit" v-on="$listeners"></timeline>

    script

    script

    import { SimpleTimeline, Item, Control, Status } from 'simple-vue-timeline';
    
    @Component({
      components: {
        timeline: SimpleTimeline
      }
    })
    export default class ...

    Refer to the Vue Class Component Sample section below for a complete sample.

    有关完整的示例,请参考下面的Vue Class Component Sample部分。

    Vue类组件样本 (Vue Class Component Sample)

    <template>
      <div id="app">
        <timeline
          :items="items"
          @timeline-edit="edit"
          @timeline-copy="copy"
          @timeline-trash="trash"
          v-on="$listeners"
        ></timeline>
      </div>
    </template>
    
    <script lang="ts">
    import { Component, Vue } from "vue-property-decorator";
    import {
      SimpleTimeline,
      Item,
      Control,
      Status
    } from "simple-vue-timeline";
    
    @Component({
      components: {
        timeline: SimpleTimeline
      }
    })
    export default class App extends Vue {
      public items: Item[] = [
        new Item(
          0,
          "calendar-alt",
          Status.WARNING,
          "title",
          [new Control("edit", "pencil-alt"), new Control("copy", "plus")],
          new Date(),
          "Here is the body message of item 0"
        ),
        new Item(
          1,
          "tasks",
          Status.WARNING,
          "title",
          [new Control("edit", "pencil-alt"), new Control("trash", "trash")],
          new Date(2019, 10, 20),
          "Here is the body message of item 1"
        )
      ];
    
      public edit(e: any) {
        console.log("edit " + e["eventId"]);
      }
    
      public copy(e: any) {
        console.log("copy " + e["eventId"]);
      }
    
      public trash(e: any) {
        console.log("trash " + e["eventId"]);
      }
    }
    </script>

    翻译自: https://vuejsexamples.com/a-simple-and-customizable-timeline-vue-component/

    vue自定义组件 简单

    展开全文
  • 现在的有些web应用都非常庞大,web开发也越来越组件化、模块化,我们需要在使用vue的时候去写一些组件,避免重复造轮子,提高组件的复用和开发效率。 1.什么是组件? 一个组件就好像一块积木,多个组件的层层堆叠、...

    现在的有些web应用都非常庞大,web开发也越来越组件化、模块化,我们需要在使用vue的时候去写一些组件,避免重复造轮子,提高组件的复用和开发效率。

    1.什么是组件?

    一个组件就好像一块积木,多个组件的层层堆叠、摆放最终形成一个完整的系统。组件的好处在于降低了各个模块之间的耦合性,以至于我们在维护项目时不会太心累。高度耦合的项目必然会带来维护时间上的浪费。在目前的前端开发中,组件化发开是必须要掌握的技能,我们也需要学会如何去封装一个组件。

    2.Vue组件的使用

    vue中组件分为全局注册和局部注册,全局注册的组件可以在每个vue实例中使用。

    全局注册
    Vue.component('my-component-name', {
      // ... 选项 ...
    })
    
    //在模板里使用
    <div id="app">
      <my-component-name></my-component-name>
      <my-component-name></my-component-name>
      <my-component-name></my-component-name>
    </div>
    
    局部注册
    var ComponentA = { /* ... */ }
    var ComponentB = { /* ... */ }
    var ComponentC = { /* ... */ }
    
    //在需要的vue实例中使用组件
    new Vue({
      el: '#app',
      components: {
        'component-a': ComponentA,
        'component-b': ComponentB
      }
    })
    

    注:组件命名还可以使用峰驼命名(如:MyCompontent),个人喜欢短横线命名(如:my-component),这跟我们在模板中使用的方式是一致的。

    展开全文
  • 如果只是需要异步加载,不用点击按钮的话,即先下载其他组件,再下载异步组件的话,直接使用官网setTimeOut的写法即可:此时就不用写v-if了。timeout你设置的时间长一点,就可以看出是异步加载的了。2.如果是点击...
  • vue日期时间选择组件 Vue日期时间选择器 (Vue Datetime Picker) Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable date, 12/24-...
  • vue组件transition使用js钩子执行时间设置 今天在做vue项目的时候,需要写一个动画效果,就是点击实现领钱的一个动画效果,用到了vue组件transition动画,用的过程中遇到了一个问题,js钩子没有设置时间导致动画...
  • 本文实例为大家分享了Vue时间段查询数据组件的具体使用代码,供大家参考,具体内容如下
  • 前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后。不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方,让我难以接受。所以在很长一段时间,我...
  • 在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间。如何使用?首先先安装: ...
  • 在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间。如何使用?首先先安装: ...
  • vue 日历组件

    千次阅读 2019-05-04 20:34:00
    Github 上很多点击弹出日历选择某个时间组件,却没有找到单纯展示日历并且能点击获取时间组件 npm i vue-calendar-component --save cnpm i vue-calendar-component --save //国内镜像 使用 //vue...
  • 项目名称:PearProject 项目地址:... 角色授权 赋予该角色所拥有的权限 添加角色 系统管理 菜单路由 访问节点 这个项目基本上可以拿来直接用,即使不用后端,作为前端使用也会省下很多时间,收藏一下,万一用着了呢?
  • 使用Vue.component()方法创建组件 Vue.component()有两个参数 参数1:TagName(标签名) 参数2:{ template:组件模型如: <div> <h1>{{title}}</h1> <p>{{content}}</p> <p>...
  • vue~datepicker组件使用

    2020-04-27 10:24:00
    使用element ui的datePicker组件小记 又开始接触vue的后台管理系统啦,结合饿了么开源ui库开发项目。相信小伙伴们都很熟悉这对cp组合。Today,记录一下最近针对于datePicker的使用场景,希望能帮助到遇到这些方面...
  • 使用vue编写的时间组件,小巧实用,支持vue1.0,vue2.0 v1.0 功能: 1.支持同时展开多个日期选择框 2.支持单击选中和取消,可配置单选和多选 3.支持双击启动连续选择,支持正向连续,逆向连续和跳跃不可选日期 4....
  • 使用效果:根据开始时间和结束时间,查询出当前时间前6个月的签到详情,日历控件中只能切换6个月的日历情况 效果图: 核心代码: <template> <div class="calendar"> <Calendar ref="Calendar" :...
  • vue时钟组件 Vue2时钟选择器 (Vue2 Clock Picker) Vue 2.x component plugin for picking... Vue 2.x组件插件,用于使用文本输入在HH:MM选择时间。 安装 (Installation) $ npm install @pencilpix/vue2-clock-pi...
  • vue路由组件懒加载介绍及使用

    千次阅读 2018-11-04 17:55:30
    vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以...
  • vue时间选择组件 效果 思路 一个vue组件,一个函数调用使其产生。 时间函数Date()的使用,来获取每年每月的天数。 点击就出现这个组件,取消或者点击背后的层就会消失 定义传参 theme: string类型,颜色值,...
  • vue实现组件无限滚动If you’ve ever caught yourself on social media for way too long, chances are the site ... 如果您在社交媒体上陷入困境的时间过长,那么您所在的网站很可能正在使用无限滚动组件 。 An i...
  • vue高级组件通信

    2021-04-13 16:15:14
    自定义事件:自己定义的,事件="回调"时间需要手动分发,回调才会执行(相对于vue中的组件而言的),组件使用的是系统的事件,但是没有使用.native修饰,此时该事件仍然是自定义事件,需要手动分发 DOM中标签里面...
  • 在同一套UI中,通常我们不提倡vue和jquery插件结合使用,但在项目重构中,我们没时间重写vue组件,想重用特定功能的jquery插件,这个时候就需要将jquery插件包装一下成vue组件。 jquery日期插件包装成一个vue组件 1...
  • vue组件

    2020-02-10 16:37:51
    我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用: (1)例如:vue组件的全局注册: <div id="app"> <p>{{msg}}</p> //定义的新组件名 ...
  • vue-waterfall2不需知道元素宽高,可宽高自适应自定义程度高提供懒加载功能(lazy-src)提供Event:loadmore (pc/android端滑动到底部触发,ios端需要上拉触发) 使用极为简便,适用于PC/ios/android有问题欢迎提issues...
  • vue日期组件

    2020-09-23 11:27:30
    可能是使用了v-model这个参数,所以需要添加多一个设定,value-format="yyyy-MM-dd" 时间组件想要正常显示时分秒:value-format="HH:mm:ss

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,856
精华内容 742
关键字:

vue时间组件使用

vue 订阅