`
iaiai
  • 浏览: 2195315 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

vue组件大集合 component

 
阅读更多
  vue组件分为全局组件、局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等。

  • Vue.extend 创建一个组件构造器
  • template:''  组件要显示的内容
  • component('',);  注册组件,接收两个参数,第一个参数用来使用的标签,第二个参数标识要显示内容的构建器


详情请看vue的API:  http://v1-cn.vuejs.org/guide/components.html

一、简单的组件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    </body>
    <script type="text/javascript">
        var AAA = Vue.extend({        //创建一个组件构造器
            template:'<strong>123</strong>'    //组件要显示的内容
        });
        //var a = new AAA();    相当于又new了一个Vue,具有它的所有属性(一般不用这种方法)
        Vue.component('aaa',AAA);    //注册组件
        new Vue({
            el:'#box',
            data:{
                bSign:true
            }
        })
    </script>
</html>

二、给组件添加事件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('aaa',{
            data(){
                return {
                    msg:'我是p标签'
                };
            },
            methods:{
                sj:function(){
                    alert(111);
                }
            },
            template:'<p @click="sj()">{{msg}}</p>'    //接收的data值必须是函数的形式,函数必须返回一个对象
        })
        new Vue({
            el:'#box',
            data:{
                
            },
        })
    </script>
</html>

三、vue动态组件--选项卡
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body id="box">
        <input type="button" @click="s='suning'" value="选项卡1" /><!--is后面跟着组件的名称 -->
        <input type="button" @click="s='saning'" value="选项卡2" />
        <comment :is='s'></comment>
    </body>
    <script type="text/javascript">
         new Vue({
             el:'#box',
             data:{
                 s:'suning'
             },
             components:{
                 'suning':{
                     template:'<p>选项卡1</p>'
                 },
                 'saning':{
                     template:'<p>选项卡2</p>'
                 }
             },
         })
    </script>
</html>

四、路由的嵌套
<html>
    <head>
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-resource.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
    </head>
    <style>
        .v-link-active{
            color: red;
        }
    </style>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">首页</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新闻</a>
                </li>
            </ul>
            <div>
                <router-view></router-view><!-- 展示内容-->
            </div>
        </div>
        <template id="home">
            <h3>home</h3>
            <a v-link="{path:'/home/login'}">登陆</a>
            <a v-link="{path:'/home/reg'}">注册</a>
            <router-view></router-view>
        </template>
        <template id="news">
            <h3>新闻</h3>
            <div>
                <a v-link="{path:'/news/detail/001'}">新闻001</a>
                <a v-link="{path:'/news/detail/002'}">新闻002</a>                
            </div>
            <router-view></router-view>
        </template>
        <template id="detail">
            <!--{{$route | json}}-->
            {{$route.params | json}}    <!-- 关于$route请看五,$route的参数 -->
        </template>
    </body>
    <script>
        var App = Vue.extend();
        var Home = Vue.extend({
            template:'#home'
        });
        var News = Vue.extend({
            template:'#news'
        });
        var Detail = Vue.extend({
            template:'#detail'
        });
        var router = new VueRouter();
        router.map({
            'home':{
                component:Home,
                subRoutes:{
                    'login':{
                        component:{
                            template:'你点击了登陆'
                        }
                    },
                    'reg':{
                        component:{
                            template:'你点击了注册'
                        }
                    }
                }
            },
            'news':{
                component:News,
                subRoutes:{
                    '/detail/:id':{
                        component:Detail
                    }
                    
                }
            },
        });
        router.redirect({
            '/':'/home'
        })
        router.start(App,'#box');
    </script>
</html>

五、$route的参数
  • $route中包含路由的其他信息
  • $route.params 得到当前的参数
  • $route.path 得到当前的路径
  • $route.query 得到数据
分享到:
评论

相关推荐

    ddvuecomponent订单来了的Vue公共组件库

    "ddvuecomponent订单来了的Vue公共组件库"是一个专门针对Vue.js框架开发的组件集合,旨在提高开发效率,提供统一的界面风格和交互体验。Vue.js是一个轻量级且功能强大的前端JavaScript框架,它以其易用性、灵活性和...

    vue - Vue组件化编程.doc

    总结,Vue组件化编程让开发者能够以模块化的方式组织和管理代码,提高开发效率和代码质量。通过单文件组件,我们可以清晰地看到组件的全貌,同时利用组件的复用性和嵌套性构建出灵活多变的用户界面。理解和熟练运用...

    vue-country-flag:国旗的Vue组件

    国家标记作为Vue组件 Vue 3支持 从2.0.3版开始,此组件同时支持Vue2和Vue3。 为了将其与Vue 3配合使用,请按如下所示安装vue-country-flag-next软件包: npm install vue-country-flag-next Vue 2支持 如何安装 ...

    vue面试题集合.docx

    2. **Vue组件**: 组件是Vue中的核心概念,它们是可复用的代码单元,可以包含HTML、CSS和JavaScript。通过组件,开发者可以将UI拆分为独立、可复用的部分,提高代码复用率和可维护性。组件可以通过props接收外部...

    京东风格的移动端 Vue 组件库,支持多端小程序(A Vue.js UI Toolkit for Mobile Web).zip

    【标题】中的“京东风格的移动端 Vue 组件库”指的是一个基于 Vue.js 框架开发的用户界面组件集合,其设计风格遵循了京东的UI规范,为开发者提供了构建移动端应用的标准组件。Vue.js 是一个轻量级的前端框架,以其...

    这是一个个人的移动VueUI组件库

    组件库则是一系列预定义的、经过精心设计和测试的组件集合,开发者可以快速引入并利用这些组件来构建用户界面。对于移动应用而言,组件库需要特别关注响应式设计和性能优化,以确保在不同设备上流畅运行。 这个个人...

    nextcloud-vue-collections:Nextcloud集合的Vue组件

    用于协作集合的Nextcloud Vue组件 为Nextcloud 16中引入的Nextcloud项目提供vue组件,以集成到应用程序中。 Projects是为面向用户的元素命名的,而collections在内部使用是因为它后来被重命名了。安装npm install --...

    cubeex是基于vue20开发组件库包含一些常用组件

    立方体组件库CubeEX是专为Vue.js 2.0框架设计的一款强大的UI组件集合,旨在简化前端开发过程,提高开发效率。Vue.js是一个轻量级但功能强大的渐进式JavaScript框架,它允许开发者通过组件化的方式构建复杂的应用程序...

    通过npm引用的vue组件使用详解

    本篇文章主要介绍了如何通过npm引用的Vue组件,以及如何创建并发布一个名为vue-dialog的弹出层组件。 首先,要创建一个Vue组件,需要使用`Vue.extend`方法。这是一个工厂函数,它接受一个包含组件选项的对象,返回...

    vue-countries-cities:Vue.js的国家和城市列表

    countries-cities组件npm install --save vue-countries-cities 下载后,vue-country-cities软件包将准备在您的vue.js应用程序中使用用法导出到main.js以全局定义vue-country-cities组件。 import ...

    vue资料及代码111111

    首先,Vue的核心特性包括数据绑定(Data Binding)、指令系统(Directives)、组件化(Component System)等。数据绑定允许开发者将HTML元素与JavaScript对象的数据属性连接起来,实现视图与数据的实时同步。指令...

    Vue 自定义动态组件实例详解

    在`main.js`中,只需引入这个全局组件集合: ```javascript import GlobalComponents from './global/index' Vue.use(GlobalComponents) ``` 这样,所有自定义组件都会自动注册到Vue实例中,无需逐一引入。 `Vue....

    vue-专注于效果的Vue组件库-Vue.js开发

    bpit / vue不是组件UI套件,我们没有这些组件的一致主题,只是一个集合bpit-vue简介什么是bpit / vue? bpit / vue不是组件UI工具包,我们没有这些组件的一致主题,它只是效果组件的集合。 bpit / vue是初学者学习...

    前端实用UI组件库

    它以其简洁、优雅的设计风格,以及全面、易用的组件集合而受到广大开发者喜爱。Element UI提供了包括表格、按钮、输入框、通知提示等在内的众多基础和高级组件,覆盖了日常开发中的各种需求。其优点在于组件化设计,...

    vue-two-simple-icons:简单图标作为Vue组件

    "vue-two-simple-icons"正是利用了这种组件化思想,将图标封装为独立的Vue组件,方便在项目中直接引用。 这个库的核心概念是将图标作为自定义Vue组件来使用,例如 `&lt;simple-icon name="example"&gt;&lt;/simple-icon&gt;`。...

    前端项目-vue-color.zip

    Vue-color是一个专门为Vue.js设计的颜色选择器组件集合,它包含了多种颜色选择器,如Sketch、Chrome、Photoshop等常见设计软件的色彩选择样式。这些组件可以轻松地集成到Vue项目中,为用户界面增添色彩编辑和选择的...

    vue-ui-framework:我个人的Vue UI框架集合

    Vue UI框架中的每个组件都是一个Vue Component,具有自己的状态、方法和生命周期。通过组件化,开发者可以将复杂的UI拆分成更小、更易于管理的部分。 在“vue-ui-framework-master”这个压缩包中,可能包含了该集合...

    Vue-Form-Components:Vue 2的引导程序组件的集合

    Vue表单组件 该软件包基于 CSS框架为Vue2提供了简单的表单包装器。 该软件包提供了多种组件。 这些是: 标准输入框 文字区 选择清单 拨动开关 文件浏览器 安装 您可以通过运行以下命令来安装此软件包: npm ...

    vue-transition-components:Vue.js的过渡组件集合

    `vue-transition-components` 是一个专门为Vue.js设计的过渡组件集合,它提供了一系列预定义的过渡效果,使开发者能够轻松地在项目中实现丰富的动画效果。 ### 安装与使用 要将`vue-transition-components`添加到...

    vue组件 $children,$refs,$parent的使用详解

    $children 属性返回的是一个组件集合,如果你清楚地知道子组件的顺序,你也可以使用下标来操作。例如: ```javascript for (let i = 0; i $children.length; i++) { console.log(this.$children[i].msg); } ``` ...

Global site tag (gtag.js) - Google Analytics