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. idea中导入别人的vue项目并运行

    1. 下载node.js 在搭建vue的开发环境之前,先下载node.js,下载地址:https://nodejs.org/en/ https://blog.csdn.net/antma/articl ...

  2. Vue 从入门到进阶之路（十四）

    之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...

  3. Excel导入导出DataGridView

    /// <summary> /// excel表保存到dataTable中 /// </summary> /// <param name="path" ...

  4. 【SDUT】【链表】2120 - 数据结构实验之链表五：单链表的拆分

    Problem Description 输入N个整数顺序建立一个单链表,将该单链表拆分成两个子链表,第一个子链表存放了所有的偶数,第二个子链表存放了所有的奇数.两个子链表中数据的相对次序与原链表一致. ...

  5. 创建线程之三：实现Callable接口

    通过Callable和Future创建线程 i. 创建Callable接口的实现类,并实现call方法,该call方法将作为线程执行体,并且有返回值,可以抛出异常. ii. 创建Callable实现类 ...

  6. canvas绘制星星和月亮

    用变量的方式绘制一个五角星,首先求五角星十个顶点的坐标. 可以把每个五角星看成外顶点用一个大圆绘制,内顶点用小圆绘制.在坐标系(0deg)下,根据每个顶点的角度和圆的半径求得x,y. 而每个大顶点相差 ...

  7. 微服务与Spring Cloud基本概念、Spring Cloud版本命名方式与版本选择

    微服务是什么?Spring Cloud是什么?Spring Cloud版本命名方式?Spring Cloud版本选择? 一.微服务是什么 微服务是一种架构风格,是一种将单体应用开发为一组小型服务的方法 ...

  8. 程序运行时间测试 - 使用系统函数 getrusage 获取程序运行时间

    https://github.com/yaowenxu/Workplace/blob/master/timer/getrusagetimer.c 关键结构体: struct rusage { stru ...

  9. bps和pps

    bps,比特率指的是每秒传输比特数 在实际所说的1M带宽的意思是1Mbps(是兆比特每秒Mbps不是兆字节每秒MBps) pps(数据包每秒),常用的网络吞吐率的单位(即每秒发送多少个分组数据包),网 ...

  10. CodeForces - 103B（思维+dfs找环）

    题意 https://vjudge.net/problem/CodeForces-103B 很久很久以前的一天,一位美男子来到海边,海上狂风大作.美男子希望在海中找到美人鱼 ,但是很不幸他只找到了章鱼 ...