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. java对象引用测试

    代码 java中初始化一个实例,这个实例对应的只是对象的一个地址,并不是对象本身.将这个实例赋值给别的实例时,新实例也是指向对象的地址,两个实例实际指向的是同一个实例.对新实例赋值,老实例也会同时改变 ...

  2. ES&IK环境搭建

    本来打算docker安装es,和腾讯云上的服务器相比,一台赤裸裸的本地机,甚至连很多基础的指令都没有,还花样各种报错,对于我这种新手来说简直了,百度啊cddn啊终于整出来了,记录一下: 一:安装依赖 ...

  3. The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone.

    介绍 再使用spring操作mysql数据库报错 @Test public void test() { try { //创建连接池,先使用spring框架内置的连接池 DriverManagerDat ...

  4. 如何获取input，file里的文件，实现预览效果，并传给后端？

    单纯的事件与获取 <input type="file" name="file" id="fileUpload"> <img ...

  5. Spring Boot 2 使用Servlet、Listener和Filter配置

    开发环境:IntelliJ IDEA 2019.2.2Spring Boot版本:2.1.8 新建一个名称为demo的Spring Boot项目. 一.使用Servlet配置 1.修改启动类 Demo ...

  6. mysql忧化参数

    转自 https://blog.51cto.com/tongcheng/1710265以下参数是在mysql-5.6.27中使用,可能mysql版本不同使用方法不一样1.线程参数innodb_read ...

  7. VS中添加Web References

    鼠标右击项目->添加->服务引用->高级->添加Web引用->输入URL->点击前往 如下图所示:

  8. CentOS系统登陆root用户后发现提示符显示-bash-4.2#(已解决)

    问题: 在root用户下终端显示,如图所示: 尝试退出登陆root用户依然不能解决 原因: root主目录下缺失.bash_profile和.bashrc文件 Tip: /etc/profile: 此 ...

  9. 科研画图：散点连接并平滑（基于Matlab和Python）

    导师要求参照别人论文中的图(下图),将其论文中的图画美观些,网上关于科研画图相关的代码比较少,就自己鼓捣了下. 附上自己整合验证过的代码: 功能:将散点连接并平滑 1)Matlab 效果图: x1=[ ...

  10. The Preliminary Contest for ICPC Asia Shenyang 2019

    传送门 B. Dudu's maze 题意: 是什么鬼东西???我读题可以读半小时QAQ 给出一张无向图,一个人在里面收集糖果,每个点都有一个糖果,特殊点除外.当他第一次进入特殊点时,会随机往一条边走 ...