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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
学习ExtJS border布局
Oct 08 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
JavaScript实现登录窗体
Jun 22 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
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python发送email的3种方法
2015/04/28 Python
python fabric实现远程部署
2017/01/05 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
浅谈python出错时traceback的解读
2020/07/15 Python
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
网站开发实习生的自我评价
2013/12/11 职场文书
中药学专业求职信
2014/05/31 职场文书
关于诚信的活动方案
2014/08/18 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android