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 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 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导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
twig里使用js变量的方法
2016/02/05 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
早该知道的7个JavaScript技巧
2013/03/27 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
详解vue.js之props传递参数
2017/12/12 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
python实现端口转发器的方法
2015/03/13 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
Python排序函数的使用方法详解
2020/12/11 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
幼儿园教师工作制度
2014/01/22 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
监察建议书范文
2014/03/12 职场文书
自动一体化专业求职信
2014/03/15 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
教师先进事迹材料
2014/12/16 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏