Vue中的组件及路由使用实例代码详解


Posted in Javascript onMay 22, 2019

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中的组件及路由使用实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
Vue侦测相关api的实现方法
May 22 #Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 #Javascript
微信小程序系列之自定义顶部导航功能
May 21 #Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 #Javascript
微信小程序websocket实现即时聊天功能
May 21 #Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 #Javascript
taro开发微信小程序的实践
May 21 #Javascript
You might like
mysql limit查询优化分析
2008/11/12 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php的dl函数用法实例
2014/11/06 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
详解参数传递四种形式
2015/07/21 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
Vuex简单入门
2017/04/19 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python生成验证码图片代码分享
2016/01/28 Python
python针对excel的操作技巧
2018/03/13 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
先进个人获奖感言
2014/01/24 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
小学班主任评语
2014/12/29 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书