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. BootStrap 关于input与btn的点击focus取消特效相关css

    取消btn按钮点击出现的外边框: .btn:focus, /*清除btn按钮点击出现的边框*/.btn:active:focus,.btn.active:focus,.btn.focus,.btn:a ...

  2. Hive安装、配置和使用

    Hive概述 Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提供类SQL查询功能. Hive本质是:将HQL转化成MapReduce程序. Hive处理的数据存储 ...

  3. ES6-对象赋值，key值得构建，is()方法对比对象，assign()合并对象

    ES6对象赋值: // es5 let name = "ananiah"; let skill ='web'; let obj = {name:name,skill:skill}; ...

  4. Cobalt Strike系列教程第三章：菜单栏与视图

    通过前两章的学习,我们掌握了Cobalt Strike教程的基础知识,及软件的安装使用. Cobalt Strike系列教程第一章:简介与安装 Cobalt Strike系列教程第二章:Beacon详 ...

  5. 【React Native】进阶指南之二（手势响应系统）

    移动设备上的手势识别要比在 web 上复杂得多.用户的一次触摸操作的真实意图是什么,App 要经过好几个阶段才能判断.比如 App 需要判断用户的触摸到底是在滚动页面,还是滑动一个 widget,或者 ...

  6. 个人项目开源之Django图书借阅系统源代码

    Django写的模拟图书借阅系统源代码已开源到码云 源代码

  7. MySQL基础之练习题

    题目 现有班级.学生以及成绩三张表: 备注:表名称和字段名称可以参考表格内单词设置 根据表格信息,按要求完成下面SQL语句的编写: 1.使用SQL分别创建班级表.学生表以及成绩表的表结构,表内数据可以 ...

  8. xadmin进行全局配置（修改模块名为中文以及其他自定义的操作步骤）

    1.实现自定义配置和收缩: 在apps->users->adminx.py中操作如下图内容  2.改成中文  操作如下图所示: 图1: 图2: run重启,刷新页面即可实现如下图: 接下来 ...

  9. 高通电池管理基于qpnp-vm-bms电压模式

    CV:Constant Voltage恒压 SMMB charger:Switch-ModeBattery Charger and Boost peripheral开关模式电池充电器和升压外围设备 O ...

  10. JS运动---运动基础（缓冲运动）

    (1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...