精华内容
下载资源
问答
  • 一、vue组件的概念: 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义标签,所有的 Vue 组件同时也都是 Vue 的实例(对象)。commonJS,AMD...

    一、vue组件的概念:

           组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义标签,所有的 Vue 组件同时也都是 Vue 的实例(对象)。

    commonJS,AMD,CMD是把JS逻辑进行模块化

    vue组件是把页面(html代码,CSS代码)进行模块化

    如下图所示,一个页面分四个部分,每个部分是个vue组件,而页面成了vue组件的容器。

     

    二、  使用组件

           vue.js中创建组件有三个步骤:创建组件构造器,注册组件以及使用组件

    1、 定义组件(创建组件构造器)(三种)

    2、 注册(声明)组件(两种)

    3、 使用组件


    示例:

    代码示意图:


    源代码:

    <div id="app1">		
    	<!--在app1里可以使用全局注册的组件my-p -->
    	<my-p></my-p>
    </div>
    <div id="app2">			
    	<!--在app2里也可以使用全局注册的组件my-p -->
    	<my-p></my-p>
    </div>
    
    <script type="text/javascript">
    //1、定义组件构造器:
    let myCom = Vue.extend({
    	template:"<p>我是p</p>"
    });
    //2、注册全局组件(相当于自定义标签)
    Vue.component("my-p",myCom);
    //3、创建两个vue实例,都可以使用全局组件 my-p,具体使用的代码在HTML中。
    let v1 = new Vue({
    	el:"#app1"
    });
    let v2 = new Vue({
    	el:"#app2"
    });
    </script>
    




    展开全文
  • vue组件

    千次阅读 2019-07-06 11:46:10
    组件 (Component) 是 Vue.js 最强大的功能之一,使用组件化方式开发,可以封装可重用的代码,减少重复劳动 接下来,我们来注册一个组件 语法Vue.component(tagName, options) 注册组件 Vue.component('component-a'...

    组件 (Component) 是 Vue.js 最强大的功能之一,使用组件化方式开发,可以封装可重用的代码,减少重复劳动

    接下来,我们来注册一个组件
    语法Vue.component(tagName, options)

    注册组件

        Vue.component('component-a', {
          template: '<div>component-a</div>'
        })
    

    component-a是注册的组件标签,下面就可以使用这个组件了

    <div id="app">
                 <component-a></component-a>
    </div>
    
    // 创建根实例
    new Vue({
      el: '#app'
    })
    

    最后,渲染为:

    <div id="app">
        <div>component-a!</div>
    </div>
    

    通过Vue.component方式注册的组件是一个全局组件 ,我们还可以创建局部组件,通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件

    var Child = {
              template: '<div>A custom component!</div>'
            }
            var vm = new Vue({
                el: '#app',
                components:{
                    'component-a':Child
                }
            })
    

    局部注册的组件 将只在父组件模板中可用

    组件通信
    组件 A 在它的模板中使用了组件 B,它们之间必然需要相互通信,父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件
    我们先来看一张图

    在这里插入图片描述

    从图上可以很清晰的看到,父子组件通信主要是使用prop和自定义事件,父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。
    父子组件的关系可以总结为 prop 向下传递,事件向上传递。

    来看个示例:

    <div id="app">
                 <div>
                    接收到的子组件回复消息:{{replyMsg}}
                 </div>
                 <component-a v-bind:msg="msg" @reply="replay"></component-a>
            </div>
            <template id="componentA">
                <div>
                    <div>我是组件a,接收到父类的消息是:{{msgfilter}}</div>
                    <div @click="reply">回复</div>
                </div>
            </template>
    
    Vue.component('component-a', {
              template: '#componentA',
              props:['msg'],
              data:function(){
                return{
                    msgfilter:'处理后的消息-》'+this.msg
                }
              },
              methods:{
                reply:function(){
                    this.$emit('reply','子组件消息')
                }
              }
            })
            var vm = new Vue({
                el: '#app',
                data:{
                    msg:'父组件消息',
                    replyMsg:''
                },
                methods:{
                    replay:function(msg){
                        this.replyMsg = msg
                    }
                }
            })
    

    需要注意的是,组件里面的data必须是一个函数,通过return形式返回

    1.父组件下发数据到子组件

    在组件中通过v-bind添加一个参数将数据传递到子组件里,然后使用props接收传递过来的参数props:[‘msg’]

    <component-a v-bind:msg="msg"></component-a>
    

    渲染结果:
    在这里插入图片描述

    2.子组件通过事件给父组件发送消息
    子组件通过$emit触发事件

    this.$emit('reply','子组件消息')
    

    在组件标签中通过v-on进行监听

    <component-a v-bind:msg="msg" @reply="replay"></component-a>
    

    监听到事件后触发reply函数,接收到子组件发送的消息

    replay:function(msg){
                        this.replyMsg = msg
                    }
    

    渲染结果:

    <div id="app">
        <div>
            接收到的子组件回复消息:子组件消息
        </div> 
        <div>
            <div>我是组件a,接收到父类的消息是:处理后的消息-》父组件消息</div> 
            <div>回复</div>
        </div>
    </div>
    

    以上可以看到我们是通过字符串数组来定义prop的,除此之外我们还可以用对象的形式来定义prop,用来为组件的 prop 指定验证规则,
    type的值可以是这些:String Number Boolean Function Object Array Symbol,例如:

      props: {
        name: String,
        showDialog: {
            type: Boolean,
            default: false
        }
      }
    

    实现一个dialog对话框组件
    在这里插入图片描述

    <div id="app" class="main">
            <div v-text="isLogin?'注销':'登录'" @click="login">登录</div>
            <div class="amount"><input type="tel" name="" v-model="amount"></div>
            <div class="btn_submit" @click="submit">确定</div>
            <v-dialog :show-dialog="showDialog" :msg="msg" :type="type" @close-dialog="closeDialog"></v-dialog>
        </div>
        <template id="dialog">
            <div class="dialog" v-if="showDialog">
                <div class="dialog_mask"></div>
                <div class="dialog_container">
                    <div class="dialog_content">
                        <div class="dialog_content_top" v-text="msg">提示内容</div>
                        <div class="dialog_btn">
                            <a v-if="type==1" href="javascript:;" class="btn" @click="close">确定</a>
                            <a v-if="type==2" href="javascript:;" class="btn" @click="close">取消</a>
                            <a v-if="type==2" href="javascript:;" class="btn" @click="login">去登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    
    Vue.component('v-dialog', {
                template: '#dialog',
                // props:['msg','type','showDialog'],
                props:{
                    msg:String,
                    type:Number,
                    showDialog:{
                        type: Boolean,
                        default: false
                    }
                },
                data:function(){
                    return {
                    }
                },
                methods:{
                    close:function(){
                        // 触发父类关闭窗口事件
                        this.$emit('close-dialog');
                    },
                    login:function(){
                        console.log("登录跳转中...");
                        this.$emit('close-dialog');
                    }
                }
            })
            // vue实例
            var vm = new Vue({
                el: '#app',
                data: {
                    amount:'',
                    msg:'',
                    showDialog:false,
                    type:1,// 提示类型  1单按钮提示框  2双按钮提示框
                    isLogin:true
                },
                methods:{
                    login:function(){
                        this.isLogin = !this.isLogin;
                    },
                    submit:function(){
                        //弹出对话框组件
                        if(!this.isLogin){//未登录
                            this.msg = "请先去登录再领取金额";
                            this.showDialog = !this.showDialog;
                            this.type = 2;
                            return;
                        }
                        if(this.amount){
                            if(this.amount<1 || this.amount>1000){
                                this.msg = "输入金额不能低于1元大于1000";
                                this.showDialog = !this.showDialog;
                                this.type = 1;
                            }else{
                                this.msg = "领取成功,请在账户中心查看";
                                this.showDialog = !this.showDialog;
                                this.type = 1;
                            }
                        }else{
                            this.msg = "领取金额不能为空";
                            this.showDialog = !this.showDialog;
                                this.type = 1;
                        }
                    },
                    closeDialog:function(){//关闭对话框
                        this.showDialog = false;
                    }
                }
            })
    
    展开全文
  • 【vue】vue组件发表评论功能

    千次阅读 2019-04-11 19:20:04
    今天看了vue相关的视频,所以跟着做一个小demo把知识串联起来,内容很简单但是也算是学习道路上的一点进步。 1 思路分析 发表评论模块写入一个组件,提高复用性。 关键点: 子组件通过localStorage向父组件传值 子...

    今天看了vue相关的视频,所以跟着做一个小demo把知识串联起来,内容很简单但是也算是学习道路上的一点进步。

    1 思路分析

    发表评论模块写入一个组件,提高复用性。
    关键点:

    1. 子组件通过localStorage向父组件传值
    2. 子组件有自己的data存储user和content,即评论人和评论内容,也就是dom元素绑定的数据。
    3. 点击‘发表评论’后,首先是将各条评论存入localStorage,然后通过在组件出绑定的函数调用父组件中的loadComments()加载评论。
    4. vue生命周期的熟悉。在created()中写入loadComments(),每次页面加载就会载入评论数据。

    2 源代码

    需要vue.js和bootstrap.js两个文件

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../lib/vue.js"></script>
        <link rel="stylesheet" href="../lib/bootstrap.css">
        <style>
        li{
            list-style:none;
        }
        </style>
    </head>
    <body>
        <div id="app">
            <com @func="loadComments"></com>
            <ul class="list-group">
                <li class="list-group-item" v-for="item in list">
                    {{item.content}}<span class="badge">{{item.user}}</span>
                </li>
            </ul>
        </div>
            <!-- 评论区组件 -->
        <template id="tmp">
            <div>
                <div class="form-group"><label>评论人</label><input class="form-control" id="user" v-model:value="user"/></div>
                 <div class="form-group"><label>评论内容</label><input class="form-control" id="content" v-model:value="content"/></div>   
                    <div><input type="button" class="btn btn-primary" value="发表评论" @click="postComments"/></div>
            </div>
        </template>
        <script>
        var tmp={
            template:"#tmp",
            data:function(){
                return {
                    user:'',
                    content:''
                }
            },
            methods:{
                postComments(){
                    var comment={user:this.user,content:this.content};
                    var list=JSON.parse(localStorage.getItem('cmts')||'[]');
                    list.unshift(comment);
                    localStorage.setItem('cmts',JSON.stringify(list));//数组对象和字符串相互转换的过程
                    this.user='';
                    this.content='';
                    this.$emit('func');
                }
            }
        }
        var vm=new Vue({
            el:"#app",
            data:{
                list:[]
            },
            created(){
               this.loadComments();
            },
            methods:{
                loadComments(){
                    this.list=JSON.parse(localStorage.getItem('cmts')||'[]');
                }
            },
            components:{
                'com':tmp
            }
            
        });
        </script>
    </body>
    </html>
    
    展开全文
  • Vue常用组件插件

    2020-09-10 16:03:36
    vue常用组件插件UI组件element- 饿了么出品的Vue2的web UI工具套件Vux- 基于Vue和WeUI的组件库mint-ui- Vue 2的移动UI元素iview- 基于 Vuejs 的开源 UI 组件库Keen-UI- 轻量级的基本UI组件合集vue-material- 通过Vue...

    vue常用组件插件

    UI组件

    element- 饿了么出品的Vue2的web UI工具套件

    Vux- 基于Vue和WeUI的组件库

    mint-ui- Vue 2的移动UI元素

    iview- 基于 Vuejs 的开源 UI 组件库

    Keen-UI- 轻量级的基本UI组件合集

    vue-material- 通过Vue Material和Vue 2建立精美的app应用

    muse-ui- 三端样式一致的响应式 UI 库

    vuetify- 为移动而生的Vue JS 2组件框架

    vonic- 快速构建移动端单页应用

    eme- 优雅的Markdown编辑器

    vue-multiselect- Vue.js选择框解决方案

    vue-table- 简化数据表格

    VueCircleMenu- 漂亮的vue圆环菜单

    vue-chat- vuejs和vuex及webpack的聊天示例

    radon-ui- 快速开发产品的Vue组件库

    vue-waterfall- Vue.js的瀑布布局组件

    vue-carbon- 基于 vue 开发MD风格的移动端

    vue-beauty- 由vue和ant design创建的优美UI组件

    vue-blu- 帮助你轻松创建web应用

    vueAdmin- 基于vuejs2和element的简单的管理员模板

    vue-syntax-highlight- Sublime Text语法高亮

    vue-infinite-scroll- VueJS的无限滚动指令

    Vue.Draggable- 实现拖放和视图模型数组同步

    vue-awesome-swiper- vue.js触摸滑动组件

    vue-calendar- 日期选择插件

    bootstrap-vue- 应用于Vuejs2的Twitter的Bootstrap 4组件

    vue-swipe- VueJS触摸滑块

    vue-amap- 基于Vue 2和高德地图的地图组件

    vue-chartjs- vue中的Chartjs的封装

    vue-datepicker- 日历和日期选择组件

    markcook- 好看的markdown编辑器

    vue-google-maps- 带有双向数据绑定Google地图组件

    vue-progressbar- vue轻量级进度条

    vue-picture-input- 移动友好的图片文件输入组件

    vue-infinite-loading- VueJS的无限滚动插件

    vue-upload-component- Vuejs文件上传组件

    vue-datetime-picker- 日期时间选择控件

    vue-scroller- Vonic UI的功能性组件

    vue2-calendar- 支持lunar和日期事件的日期选择器

    vue-video-player- VueJS视频及直播播放器

    vue-fullcalendar- 基于vue.js的全日历组件

    rubik- 基于Vuejs2的开源 UI 组件库

    VueStar- 带星星动画的vue点赞按钮

    vue-mugen-scroll- 无限滚动组件

    mint-loadmore- VueJS的双向下拉刷新组件

    vue-tables-2- 显示数据的bootstrap样式网格

    vue-virtual-scroller- 带任意数目数据的顺畅的滚动

    DataVisualization- 数据可视化

    vue-quill-editor- 基于Quill适用于Vue2的富文本编辑器

    Vueditor- 所见即所得的编辑器

    vue-html5-editor- html5所见即所得编辑器

    vue-msgbox- vuejs的消息框

    vue-slider- vue 滑动组件

    vue-core-image-upload- 轻量级的vue上传插件

    vue-slide- vue轻量级滑动组件

    vue-lazyload-img- 移动优化的vue图片懒加载插件

    vue-drag-and-drop-list- 创建排序列表的Vue指令

    vue-progressive-image- Vue的渐进图像加载插件

    vuwe- 基于微信WeUI所开发的专用于Vue2的组件库

    vue-dropzone- 用于文件上传的Vue组件

    vue-charts- 轻松渲染一个图表

    vue-swiper- 易于使用的滑块组件

    vue-images- 显示一组图片的lightbox组件

    vue-carousel-3d- VueJS的3D轮播组件

    vue-region-picker- 选择中国的省份市和地区

    vue-typer- 模拟用户输入选择和删除文本的Vue组件

    vue-impression- 移动Vuejs2 UI元素

    vue-datatable- 使用Vuejs创建的DataTableView

    vue-instant- 轻松创建自动提示的自定义搜索控件

    vue-dragging- 使元素可以拖拽

    vue-slider-component- 在vue1和vue2中使用滑块

    vue2-loading-bar- 最简单的仿Youtube加载条视图

    vue-datepicker- 漂亮的Vue日期选择器组件

    vue-video- Vue.js的HTML5视频播放器

    vue-toast-mobile- VueJS的toast插件

    vue-image-crop-upload- vue图片剪裁上传组件

    vue-tooltip- 带绑定信息提示的提示工具

    vue-highcharts- HighCharts组件

    vue-touch-ripple- vuejs的触摸ripple组件

    coffeebreak- 实时编辑CSS组件工具

    vue-datasource- 创建VueJS动态表格

    vue2-timepicker- 下拉时间选择器

    vue-date-picker- VueJS日期选择器组件

    vue-scrollbar- 最简单的滚动区域组件

    vue-quill- vue组件构建quill编辑器

    vue-google-signin-button- 导入谷歌登录按钮

    vue-svgicon- 创建svg图标组件的工具

    vue-float-label- VueJS浮动标签模式

    vue-baidu-map- 基于 Vue 2的百度地图组件库

    vue-social-sharing- 社交分享组件

    vue2-editor- HTML编辑器

    vue-tagsinput- 基于VueJS的标签组件

    vue-easy-slider- Vue 2.x的滑块组件

    datepicker- 基于flatpickr的时间选择组件

    vue-chart- 强大的高速的vue图表解析

    vue-music-master- vue手机端网页音乐播放器

    handsontable- 网页表格组件

    vue-simplemde- VueJS的Markdown编辑器组件

    vue-popup-mixin- 用于管理弹出框的遮盖层

    cubeex- 包含一套完整的移动UI

    vue-fullcalendar- vue FullCalendar封装

    vue-material-design- Vue MD风格组件

    vue-morris- Vuejs组件封装Morrisjs库

    we-vue- Vue2及weui1开发的组件

    vue-image-clip- 基于vue的图像剪辑组件

    vue-bootstrap-table- 可排序可检索的表格

    vue-radial-progress- Vue.js放射性进度条组件

    vue-slick- 实现流畅轮播框的vue组件

    vue-pull-to-refresh- Vue2的上拉下拉

    vue-form-2- 全面的HTML表单管理的解决方案

    vue-side-nav- 响应式的侧边导航

    mint-indicator- VueJS移动加载指示器插件

    chartjs- Vue Bulma的chartjs组件

    vue-scroll- vue滚动

    vue-ripple- 制作谷歌MD风格涟漪效果的Vue组件

    vue-touch-keyboard- VueJS虚拟键盘组件

    vue-chartkick- VueJS一行代码实现优美图表

    vue-ztree- 用 vue 写的树层级组件

    vue-m-carousel- vue 移动端轮播组件

    vue-datepicker-simple- 基于vue的日期选择器

    vue-tabs- 多tab页轻型框架

    vue-verify-pop- 带气泡提示的vue校验插件

    vue-parallax- 整洁的视觉效果

    vue-img-loader- 图片加载UI组件

    vue-typewriter- vue组件类型

    vue-smoothscroll- smoothscroll的VueJS版本

    vue-city- 城市选择器

    vue-tree- vue树视图组件

    vue-ios-alertview- iOS7+ 风格的alertview服务

    dd-vue-component- 订单来了的公共组件库

    paco-ui-vue- PACOUI的vue组件

    vue-cmap- Vue China map可视化组件

    vue-button- Vue按钮组件

    开发框架

    vue.js- 流行的轻量高效的前端组件化方案

    vue-admin- Vue管理面板框架

    electron-vue- Electron及VueJS快速启动样板

    vue-2.0-boilerplate- Vue2单页应用样板​

    vue-spa-template- 前后端分离后的单页应用开发

    Framework7-Vue- VueJS与Framework7结合

    vue-bulma- 轻量级高性能MVVM Admin UI框架

    vue-webgulp- 仿VueJS Vue loader示例

    vue-element-starter- vue启动页

    实用库

    vuex- 专为 Vue.js 应用程序开发的状态管理模式

    vuelidate- 简单轻量级的基于模块的Vue.js验证

    qingcheng- qingcheng主题

    vue-desktop- 创建管理面板网站的UI库

    vue-meta- 管理app的meta信息

    vue-axios- 将axios整合到VueJS的封装

    vue-svg-icon- vue2的可变彩色svg图标方案

    avoriaz- VueJS测试实用工具库

    vue-framework7- 结合VueJS使用的Framework7组件

    vue-bootstrap-modal- vue的Bootstrap样式组件

    vuep- 用实时编辑和预览来渲染Vue组件

    vue-online- reactive的在线和离线组件

    vue-lazy-render- 用于Vue组件的延迟渲染

    vue-password-strength-meter- 交互式密码强度计

    element-admin- 支持 vuecli 的 Element UI 的后台模板

    vue-electron- 将选择的API封装到Vue对象中的插件

    cleave- 基于cleave.js的Cleave组件

    vue-events- 简化事件的VueJS插件

    vue-shortkey- 应用于Vue.js的Vue-ShortKey 插件

    vue-cordova- Cordova的VueJS插件

    vue-router-transition- 页面过渡插件

    vue-gesture- VueJS的手势事件插件

    http-vue-loader- 从html及js环境加载vue文件

    vue-qart- 用于qartjs的Vue2指令

    vuemit- 处理VueJS事件

    vue-websocket- VueJS的Websocket插件

    vue-local-storage- 具有类型支持的Vuejs本地储存插件

    lazy-vue- 懒加载图片

    vue-bus- VueJS的事件总线

    vue-reactive-storage- vue插件的Reactive层

    vue-notifications- 非阻塞通知库

    vue-lazy-component- 懒加载组件或者元素的Vue指令

    v-media-query- vue中添加用于配合媒体查询的方法

    vue-observe-visibility- 当元素在页面上可见或隐藏时检测

    vue-ts-loader- 在Vue装载机检查脚本

    vue-pagination-2- 简单通用的分页组件

    vuex-i18n- 定位插件

    Vue.resize- 检测HTML调整大小事件的vue指令

    vuex-shared-mutations- 分享某种Vuex mutations

    vue-file-base64- 将文件转换为Base64的vue组件

    modal- Vue Bulma的modal组件

    Famous-Vue- Famous库的vue组件

    leo-vue-validator- 异步的表单验证组件

    Vue-Easy-Validator- 简单的表单验证

    vue-truncate-filter- 截断字符串的VueJS过滤器

    vue-zoombox- 一个高级zoombox

    vue-input-autosize- 基于内容自动调整文本输入的大小

    vue-lazyloadImg- 图片懒加载插件

    服务端

    nuxt.js- 用于服务器渲染Vue app的最小化框架

    express-vue- 简单的使用服务器端渲染vue.js

    vue-ssr- 非常简单的VueJS服务器端渲染模板

    vue-ssr- 结合Express使用Vue2服务端渲染

    vue-easy-renderer- Nodejs服务端渲染

    辅助工具

    DejaVue- Vuejs可视化及压力测试

    vue-play- 展示Vue组件的最小化框架

    vscode-VueHelper- 目前vscode最好的vue代码提示插件

    vue-generate-component- 轻松生成Vue js组件的CLI工具

    vue-multipage-cli- 简单的多页CLI

    VuejsStarterKit- vuejs starter套件

    应用实例

    koel- 基于网络的个人音频流媒体服务

    pagekit- 轻量级的CMS建站系统

    vuedo- 博客平台

    jackblog-vue- 个人博客系统

    vue-cnode- 重写vue版cnode社区

    CMS-of-Blog- 博客内容管理器

    rss-reader- 简单的rss阅读器

    vue-ghpages-blog- 依赖GitHub Pages无需本地生成的静态博客

    swoole-vue-webim- Web版的聊天应用

    vue-dashing-js- nuvo-dashing-js的fork

    fewords- 功能极其简单的笔记本

    vue-blog- 使用Vue2.0 和Vuex的vue-blog

    Demo示例

    Vue-cnodejs- 基于vue重写Cnodejs.org的webapp

    NeteaseCloudWebApp- 高仿网易云音乐的webapp

    vue-zhihu-daily- 知乎日报 with Vuejs

    vue-wechat- vue.js开发微信app界面

    vue2-demo- 从零构建vue2 + vue-router + vuex 开发环境

    eleme- 高仿饿了么app商家详情

    vue-demo- vue简易留言板

    maizuo- vue/vuex/redux仿卖座网

    spa-starter-kit- 单页应用启动套件

    vue-music- Vue 音乐搜索播放

    douban- 模仿豆瓣前端

    vue-Meizi- vue最新实战项目

    zhihudaily-vue- 知乎日报web版

    vue-demo-kugou- vuejs仿写酷狗音乐webapp

    VueDemo_Sell_Eleme- Vue2高仿饿了么外卖平台

    vue2.0-taopiaopiao- vue2.0与express构建淘票票页面

    vue-leancloud-blog- 一个前后端完全分离的单页应用

    node-vue-server-webpack- Node.js+Vue.js+webpack快速开发框架

    mi-by-vue- VueJS仿小米官网

    vue-fis3- 流行开源工具集成demo

    vue2.x-douban- Vue2实现简易豆瓣电影webApp

    vue-demo-maizuo- 使用Vue2全家桶仿制卖座电影

    vue-zhihudaily- 知乎日报 Web 版本

    vue-adminLte-vue-router- vue和adminLte整合应用

    vue-axios-github- 登录拦截登出功能

    Zhihu-Daily-Vue.js- Vuejs单页网页应用

    hello-vue-django- 使用带有Django的vuejs的样板项目

    vue-cnode- vue单页应用demo

    x-blog- 开源的个人blog项目

    vue-express-mongodb- 简单的前后端分离案例

    websocket_chat- 基于vue和websocket的多人在线聊天室

    photoShare- 基于图片分享的社交平台

    vue-zhihudaily-2.0- 使用Vue2.0+vue-router+vuex创建的zhihudaily

    notepad- 本地存储的记事本

    vueBlog- 前后端分离博客

    vue-ruby-china- VueJS框架搭建的rubychina平台

    Zhihu_Daily- 基于Vue和Nodejs的Web单页应用

    vue-koa-demo- 使用Vue2和Koa1的全栈demo

    vue2.x-Cnode- 基于vue全家桶的Cnode社区

    life-app-vue- 使用vue2完成多功能集合到小webapp

    github-explorer- 寻找最有趣的GitHub库

    vue-trip- vue2做的出行webapp

    vue-ssr-boilerplate- 精简版的ofvue-hackernews-2

    vue-bushishiren- 不是诗人应用

    houtai- 基于vue和Element的后台管理系统

    ios7-vue- 使用vue2.0 vue-router vuex模拟ios7

    Framework7-VueJS- 使用移动框架的示例

    cnode-vue- 基于vue和vue-router构建的cnodejs web网站SPA

    vue-cli-multipage-bootstrap- 将vue官方在线示例整合到组件中

    vue-cnode- 用 Vue 做的 CNode 官网

    HyaReader- 移动友好的阅读器

    zhihu-daily- 轻松查看知乎日报内容

    seeMusic- 跨平台云音乐播放器

    vue-cnode- 使用cNode社区提供的接口

    zhihu-daily-vue- 知乎日报

    sls-vuex2-demo- vuex2商城购物车demo

    vue-dropload- 用以测试下拉加载与简单路由

    vue-cnode-mobile- 搭建cnode社区

    Vuejs-SalePlatform- vuejs搭建的售卖平台demo

    v-notes- 简单美观的记事本

    vue-starter- VueJs项目的简单启动页

    vue-memo- 用 vue写的记事本应用


    展开全文
  • Vue组件封装的过程

    千次阅读 多人点赞 2020-09-09 18:02:16
    Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 ...在较高层面上,组件是自定义元素,Vue.js的...vue组件功能 能够把页面抽象成多个相对独立的模块 实现代码重用,提高开发效率和代码
  • Vue组件

    千次阅读 2018-10-10 18:47:19
    整理下这半年用到的比较多的Vue内容,至今Vue的源码还未细心研读过,从开发使用层面上开两个专题:Vue组件和Vue Router。 1.工程搭建 打开pycharm后,file–&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp...
  • vue 组件全屏 全屏 (vue-fullscreen) A simple Vue.js component for fullscreen. 一个用于全屏显示的简单Vue.js组件。 View demo 查看演示 Download Source 下载源 安装 (Installation) Install from GitHub ...
  • Vue 组件之间传值

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

    千次阅读 2020-03-09 20:10:45
    使用VUE组件实现简单的点赞功能 HTML页面 ↓ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
  • Vue 组件封装

    千次阅读 2019-06-16 05:35:11
    Vue 组件封装 项目中没有从零开始封装一个组件,本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点: 封装一个组件的代码组织形式; vue 组件的三大核心: 属性(props、data); 事件...
  • vue 组件的使用

    千次阅读 多人点赞 2020-08-30 23:47:38
    如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能组件的分类 一般来说,Vue.js 组件主要分成三类: 由 vue-router 产生的每个页面,它本质上也是一个组件(.vue),...
  • VUE组件(全局组件和局部组件)

    千次阅读 2020-06-24 22:16:47
    Vue组件之全局组件与局部组件的使用详解 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况...
  • Vue.js 创建Vue组件的方式

    千次阅读 2019-02-24 17:10:12
    文章目录定义Vue组件全局组件定义的三种方式定义实例内部私有组件 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能...
  • vue组件Component

    千次阅读 2019-10-23 09:06:28
    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。下面是一个简单的组件例子: <html> <...
  • openlayers+vue功能组件封装

    千次阅读 2019-05-30 22:38:53
    openlayers+vue功能组件封装 openlayers, vue, 精选文章giser giser 功能说明 加载基本地图 地图浏览全图、放大、缩小 测量工具,测距,测面 图层管理,图层层级切换,透明度设置 openlayers+vue功能组件封装 ...
  • Vue 组件命名

    千次阅读 2017-12-04 18:46:06
    全面详解的 vue 中的命名机制,包括组件、变量、props、slot。 分享学习一下
  • Vue组件api 主要来自三部分  props:外部数据传递给组件 events:组件触发外部状态的改变 slots:各个组件的混合组合使用 javascript对子组件操作的备用方案: 使用ref为子组件添加一个索引id 可以使用 vueobj.$...
  • 继续研究vue组件vue-menu组件

    千次阅读 2019-01-27 21:44:55
    其实这个很简单,出发点就是想做一个点击切换的功能 原生html+css+js代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-...
  • 一小时入门vue组件(建议收藏)

    千次阅读 多人点赞 2021-06-02 21:12:27
    初识vue组件应用,包括:1.实例化多个vue对象;2.全局组件与局部组件;3.父向子传值/传引用(props);4.子向父事件传值($emit);5.使用脚手架创建项目并运用组件and传值的案例。欢迎小伙伴们一起交流学习~
  • 前言:(注意放大缩小是基于jquery的,还需要引入jquery文件) 目前有需求遇到需要将原始的svg文件,xml类型的,放到vue中,转换...二、因为style在vue组件中只能有一个,需要把原始svg的style拿出来放到组件style里...
  • Vue组件库实现按需加载功能

    千次阅读 2019-08-26 14:24:48
    文章目录简述示例原理babel-plugin-componentelement-ui按需引入babel-plugin-import组件分开打包以及全部...比如当前流行的web端组件库ElementUI,就有这个按需加载功能;一个系统的登录页,需要的组件是非常少的...
  • 自定义vue组件继承某个组件

    千次阅读 2019-05-05 17:38:43
    vue中引入vux,需要在原组件基础上修改某个组件功能,可使用组件的继承属性
  • 详解vue组件三大核心概念

    万次阅读 多人点赞 2019-05-30 13:12:04
    如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。 本文的代码请猛戳github博客,纸上得来终觉浅,大家动手多敲敲代码! 一、属性 1.自定义属性props prop 定义了这个...
  • Vue封装组件的过程

    万次阅读 多人点赞 2018-03-20 09:41:05
    vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素,封装可重用代码 ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 ● 有些情况下,组件也可以表现用 ...
  • Vue组件化思想

    2020-05-21 21:42:29
    Vue组件思想 ①它提供了一种抽象,让我们开发出一个个独立可复用的小组将来构造我们的应用。 ②任何的应用都会被抽象成一棵组件树。 一、注册组件的基本步骤 组件的使用分为三个步骤 创建组件构造器 注册组件...
  • vue 组件大全

    千次阅读 2018-06-15 11:06:37
    UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue ...
  • Vue 组件和插件的关系

    千次阅读 2018-09-02 21:23:22
    Vue组件(component)用来构成你的App的业务模块,它的目标是App.vue。 Vue插件(plugin) 用来增强你的技术栈的功能模块, 它的目标是Vue本身。(插件是对Vue的功能的增强和补充) Vue组件 我们通常在src的目录下...
  • vue组件重载

    千次阅读 2019-06-21 10:29:43
    Vue的组建重载 项目开发中遇到需要重载组件的需求,根据我自己的理解有3种方法 一、重新加载路由 相当于按F5 整个页面重载 location.reload();//js的方法 //重新替换当前路由 replace this.$router.replace({ path...
  • VUE组件汇总

    千次阅读 2018-05-09 18:44:53
    内容UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库iview ★6634 - 基于 Vuejs 的开源 UI 组件库mint-ui ★6253...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 82,478
精华内容 32,991
关键字:

常用的vue组件功能

vue 订阅