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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 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+apache+php Linux安装指南
2006/10/09 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
javascript数组排序汇总
2015/07/07 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
linux 下selenium chrome使用详解
2020/04/02 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
影视制作岗位职责
2013/12/04 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers