1.组件是什么

       组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织；

1.1组件的声明及使用

  全局组件

<body>

    <div id="app">

        <!-- 用全局组件的名称作为HTML的标签 -->

        <myzujian></myzujian>

    </div>

</body>

<script>

    //设置全局组件

     Vue.component("myzujian",{

          template:"<h2>我是全局组件</h2>"

      });

     var app=new Vue({

         el:"#app",

     });

</script>

  局部组件

<body>

    <div id="app">

        <!-- 用局部组件的名称作为HTML的标签 -->

        <zu-jian></zu-jian>

    </div>

</body>

<script>

     var app=new Vue({

         el:"#app",

         components:{

              zuJian:{

                  template:"<h1>我是局部组件</h1>",

             }

         }

     });

</script>

1.2组件使用注意事项

   组件名如果是驼峰法命名，使用组件时要将大写字母改为小写，并且在前面加上 - 组件中的tamplate属性必须有一个唯一的根元素，否则会报错

1.3组件中数据及方法

<body>

    <div id="app">

        <mytemp></mytemp>

    </div>

</body>

<script>

    var app=new Vue({

        el:"#app",

        data:{},

        components:{

            mytemp:{

                data(){

                    return {

                        msg:"123456789",

                    }

                },

                methods: {

                    cli(){

                        alert(this.msg);

                    }

                },

                template:'<h1 @click="cli">you{{msg}} very good</h1>',

            }

        }

    });

</script>

1.4父级组件传值

<body>

    <div id="app">

        <my :cc="msg"></my>

    </div>

</body>

<script>

    var app = new Vue({

        el:'#app',

        data:{msg:'没事干'},

        components:{

            my:{

                props:['cc'],

                template:"<s>{{cc}}</s>"

            }

        }

    })

</script>

2.路由的使用

   Vue在使用路由插件Vue-router，要提前引入。

<body>

    <div id="app">

        <ul>

            <li> <router-link to="/login">登录</router-link> </li>

            <li> <router-link to="/reg">注册</router-link> </li>

        </ul>

        <router-view></router-view>

    </div>

</body>

<script>

    // 获取路由对象

    var ro = new VueRouter({

        // 定义路由规则

        routes:[

            // 具体匹配规则

            // {path：匹配地址栏路由变化,component:要展示组件}

            {path:'/reg',component:{template:"<s>我是注册</s>"}},

            {path:'/login',component:{template:"<s>我是登录</s>"}},

        ]

    })

    var app = new Vue({

        el: '#app',

        data: {},

        router:ro

    })

</script>

2.1动态路由匹配

<body>

    <div id="app">

        <!-- 传递数据直接写在 / 后面 -->

        <router-link to="/user/10">hfhg</router-link>

        <router-view></router-view>

    </div>

</body>

<script>

    var router = new VueRouter({

        routes: [

            {

                // 获取数据是变量的名字前面加:

                path: "/user/:id", component: {

                    mounted(){

                        // router会为vue添加公有属性 $route ，使用$route来获取数据

                        console.log(this.$route.params.id)

                    },

                    template: "<s>就大师{{$route.params.id}}分离开国家</s>"

                }

            }

        ]

    })

    var app = new Vue({

        el: '#app',

        data: {},

        router,

    })

</script>

Vue中的组件及路由使用的更多相关文章

  1. Vue中使用children实现路由的嵌套

    Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...

  2. Vue 中的组件

    VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...

  3. vue中自定义组件（插件）

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  4. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  5. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  6. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. Vue 中数据流组件

    好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...

  8. 简述vue中父子组件是怎样相互传递值的（基础向）

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  9. 解决vue中element组件样式修改无效

    vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...

随机推荐

  1. JS-正则表达式解析

    正则表达式通常用于输入校验,用法示例为 if (!(/^1[345789]\d{9}$/.test($('.tel').val()))) { $.toast("手机号格式有误", ...

  2. JS调用MD5加密

    为了系统的安全,前端一般需要对密码进行MD5加密,然后传输给后台处理.MD5的英文是Message Digest Algorithm(信息摘要算法),是不可逆的算法,只能通过暴力破解,所以较为安全. ...

  3. PalletOne调色板Token PTN跨链转网的技术原理

    之前一直在忙于通用跨链公链PalletOne的研发,没有怎么做技术分享的博客,最近PalletOne主网上线也有几个月的时间了,即将进行PTN(PalletOne上面的主Token)从ERC20到主网 ...

  4. Net Core的API文档工具Swagger

    一.安装swagger 新建一个net core的api项目,通过NuGet安装Swashbuckle.AspNetCore. 二.注册swagger服务 在Startup.cs中注册Swagger生 ...

  5. Python语法易错点

    列表.数组赋值 a = [1,6] b = a * 2 b[0] = -9999 print(a) print(b) [1, 6] [-9999, 6, 1, 6] a = [1,6] b = a b ...

  6. [转]How to mouse hover using Blue prism on a web page

    本文转自:https://stackoverflow.com/questions/53126436/how-to-mouse-hover-using-blue-prism-on-a-web-page/ ...

  7. 41-data-packed volume container

    在上一节的例子中 volume container 的数据归根到底还是在 host 里,有没有办法将数据完全放到 volume container 中,同时又能与其他容器共享呢? 当然可以,通常我们称 ...

  8. 初识Kotlin之函数

    本章通过介绍Kotlin的基本函数,默认参数函数,参数不定长函数,尾递归函数,高阶函数,Lamdba表达式.来对Kotlin函数做进一步了解.将上一篇的Kotlin变量的知识得以运用.Kotlin变量 ...

  9. android 获得一些设备信息的静态函数

    1.Brand,IMEI,DeviceOS,DeviceFactoryTime public static String getDeviceBrand(Context context) { Strin ...

  10. 以太网驱动的流程浅析(五)-mii_bus初始化以及phy id的获取【原创】

    以太网驱动的流程浅析(五)-mii_bus初始化以及phy id的获取 Author:张昺华 Email:920052390@qq.com Time:2019年3月23日星期六 此文也在我的个人公众号 ...