首页 > 其他 > 详细

非node环境 vue-rouder 学习笔录1

时间:2017-07-03 13:02:08      阅读:325      评论:0      收藏:0      [点我收藏+]

在非node环境中 需要我们在文本中引入vue.js 和vue-rouders.js
首先引用
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
现在做个简单的例子
<div id="app">
<div>Hello word</div>
<p>
<router-link to="Home">Home</router-link>
<router-link to="Info">Info</router-link>
<router-link to="Content">Content</router-link>
</p>
<router-view></router-view>
</div>
js中代码
<script>
//定义路由组件
const Home={template:"<div>我是首页</div>"}
const Info={template:"<div>我是简介</div>"}
const Content={template:"<div>我是内容</div>"}
//定义路由
const routers=[{path:"Home",component:Home},{path:"Info",component:Info},{path:"Content",component:Content}]
//创建router实例
const router=new VueRouter({
routers//缩写 相当于routers:routers
})
//创建和挂载根实例
const app= new Vue({router}).$mount("#app");
简单的应用就介绍完毕了

非node环境 vue-rouder 学习笔录1

原文:http://www.cnblogs.com/itadong/p/7110469.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!