vue v-link

<div id="app"> <nav class="navbar navbar-inverse"> <div class="container"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <!—使用 v-link 指令,path 的值对应跳转的路径,即#!/home --> <a v-link="{ path : '/home'}">Home</a> </li> <li> <a v-link="{ path : '/list'}">List</a> </li> </ul> </div> </div> </nav> <div class="container"> <!—路由切换组件template 插入的位置 --> <router-view></router-view> </div> </div> js 代码: // 创建子组件,相当于路径对应的页面 var Home = Vue.extend({ template : '<h1>This is the home page</h1>' }); // 创建根组件 var App = Vue.extend({}) // 创建路由器实例 var router = new VueRouter() // 通过路由器实例定义路由规则(需要在启动应用前定义好) // 每条路由会映射到一个组件。这个值可以是由Vue.extend 创建的组件构造函数(如Home) // 也可以直接使用组件选项对象(如'/list' 中component 对应的值) router.map({ '/home': { component: Home }, '/list': { component : { template: '<h1>This is the List page</h1>' } } }) // 路由器实例会创建一个Vue 实例,并且挂载到第二个参数元素选择器匹配的DOM 上 router.start(App, '#app')

v-resource

v-devtools

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap 禁止输入表单

    <form class="form-horizontal" role="form"> <fieldset disabled> <div class="for...

    用户5760343
  • bootstrap 登录 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> ...

    用户5760343
  • bootstrap 登录注册表单 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • 用Vue.js开发一个电影App的前端界面

    我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目。这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WE...

    笔阁
  • javaWeb核心技术第六篇之BootStrap

    海仔
  • Web-第五天 BootStrap学习

    将使用Bootstrap重写首页,整个案例中将使用到Bootstrap各种模块,为了方便编程,将采用拆分的原则,各个模块单独编写,最后组合。

    Java帮帮
  • Vue 应用单元测试的策略与实践 03 - Vue 组件单元测试

    2.1 在 Vue 应用的单元测试中,对不同 UI 组件的单元测试有何不同?颗粒度该细到什么样的程度?

    JimmyLv_吕靖
  • 第12问:Table cache 有什么作用?

    我们都知道 MySQL 的 Table Cache 是表定义的缓存,江湖上流传着各种对这个参数的调优方法。

    爱可生开源社区
  • vuejs基础-事件修饰符

    eadela
  • React 如何转 Vue.js

    React 和 Vue 就像可口可乐和百事可乐,很多你可以在 React 中做的事,也同样可以在 Vue 中做。不过两者仍然有一些重要的概念上的差异,其中一些反...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券