Vue 2.0+Vue-router构建一个简单的单页应用(附源码)


Posted in Javascript onMarch 14, 2017

一、介绍

vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点,并且提供了很多的周边配套工具 如vue-router 、vue-resource 、vuex等等 ,通过他们我们可以很轻松的构建一个大型单页应用。

目前Vue版本为:Vue2.0

官网地址:http://vuejs.org.cn/

查看API文档:https://vuefe.cn/v2/api/

对比其他框架:http://vuejs.org.cn/guide/comparison.html

二、环境搭建

我们使用vue-cli脚手架工具构建

#安装 vue-cli

npm install -g vue-cli

#使用vue-cli初始化项目

vue init webpack vue-vuerouter-demo

#进到目录

cd vue-vuerouter-demo

#安装依赖 

npm install

#开始运行 

npm run dev

浏览器访问http://localhost:8080

构建完成之后基本目录结构如下:

Vue 2.0+Vue-router构建一个简单的单页应用(附源码)

流程说明:

     1、首先会打开首页 也就是我们看到的index.html文件

     2、使用webpack打包之后默认加载main.js文件并将其引入到index.html文件中

三、开发

我们在main.js文件中引入相关模块以及组件

import Vue from 'vue'
import App from './App'
import router from './router' //这里引入的是router目录,会默认识别里面的index.js文件(不能是其他名字)

// 引入并使用vue-resource网络请求模块
import VueResource from 'vue-resource'
Vue.use(VueResource)

实例化vue对象配置选项路由及渲染App组件

new Vue({
 el: '#app', //这里绑定的是index.html中的id为app的div元素
 router,
 render: h => h(App)

 // 这里的render: h => h(App)是es6的写法 
 // 转换过来就是: 暂且可理解为是渲染App组件
 // render:(function(h){
 //  return h(App);
 // });

})

App.vue文件是我们的组件入口,之后所有的开发在这里面进行

<template>
 <div id="app">
 <!-- <hello></hello> -->
 <div class="nav">
   <!-- 使用 router-link 组件来导航. -->
  <!-- 通过传入 `to` 属性指定链接. -->
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  <ul>
   <li><router-link to="/home">Home</router-link></li>
   <li><router-link to="/about">About</router-link></li>
  </ul>
 </div>
  <div class="main">
 <!-- 路由匹配到的组件将渲染在这里 -->

  <router-view></router-view>
  </div>
 </div>
</template>

<script>
// import Hello from './components/Hello'

export default {
 name: 'app',
 components: {
 // Hello
 }
}
</script>

<style>
body{
 background-color: #f8f8ff;
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 color: #2c3e50;
}


.nav{
 position: fixed;
 width: 108px;
 left: 40px;
}
.nav ul{
list-style: none;
 margin: 0;
 padding: 0;
}
.nav ul li{
 width: 108px;
 height: 48px;
 line-height: 48px;
border:1px solid #dadada;
text-align: center;
}
.nav ul li a{
 text-decoration: none;
}

.main{
 height: 400px;
 margin-left: 180px;
 margin-right: 25px;
}

</style>

要使用路由我们首先要在router/index.js文件中创建路由并配置路由映射 ,并通过export输出router到main.js文件中

// 这里面负责写路由映射,便于管理


// 引入路由模块并使用它
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)



// 创建路由实例并配置路由映射 
// path:'*',redirect:'/home' 重定向到path是/home的映射
const router = new VueRouter({
 routes:[{
  path: '/home', component: require('../components/Home.vue')
 },{
  path: '/about', component: require('../components/About.vue')
 },{
  path:'*',redirect:'/home'
 }]
})


// 输出router
export default router;

上面配置了2个组件映射 分别Hme.vue组件和About组件,配置好之后我们就可以开始使用路由了

<!-- 使用 router-link 组件来导航. -->
  <!-- 通过传入 `to` 属性指定链接. -->
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  <ul>
   <li><router-link to="/home">Home</router-link></li>
   <li><router-link to="/about">About</router-link></li>
  </ul>
<!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>

点击home和about导航会映射到对应的组件,然后将组件渲染在</router-view>这里面

到此,整个流程我们已经走通了。

接下来我们使用vue-resource网络插件动态加载数据并显示出来

1、先在main.js文件中引入并使用vue-resource网络请求模块

import VueResource from 'vue-resource'
Vue.use(VueResource)

2、创建Home.vue组件

我们需要在created钩子函数中去请求网络,这里我们使用豆瓣的API去请求电影列表数据,请求成功之后我们将其数据显示到页面中

<template>
 <div class="home">
 <h1>{{ msg }}</h1>
 <ul>
  <li v-for="article in articles">
  
   <div class="m-img inl-block"><img v-bind:src="article.images.small"/></div>
  <div class="m-content inl-block">
   <div>{{article.title}}</div>
  <div>年份:{{article.year}}</div>
   <div>类型:{{article.subtype}}</div>
  </div>
  </li>
 </ul>
 </div>
</template>

<script>

// mounted 钩子函数 这里去请求豆瓣数据

export default {
 name: 'home',
 data () {
 return {
  msg: '电影列表',
  articles:[]
 }
 },
 created:function(){ //这里mounted和created生命周期函数区别
  this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
  headers: {

  },
  emulateJSON: true
 }).then(function(response) {
  // 这里是处理正确的回调
  console.log(response);
  this.articles = response.data.subjects
  // this.articles = response.data["subjects"] 也可以

 }, function(response) {
  // 这里是处理错误的回调
  console.log(response)
 });
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul{
 list-style: none;
 margin: 0;
 padding: 0;
}
ul li{
border-bottom: 1px solid #999;
padding: 10px 0;
}

.inl-block{
display: inline-block;
}

.m-img{
 
}
.m-content{
margin-left: 20px;
}
</style>

3、最后我们运行npm run dev命令查看页面显示效果

Vue 2.0+Vue-router构建一个简单的单页应用(附源码)

OK,可以看到我们的数据成功加载出来了,可以点击左侧的导航来进行导航内容切换

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 #Javascript
微信小程序 在线支付功能的实现
Mar 14 #Javascript
JS和canvas实现俄罗斯方块
Mar 14 #Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 #Javascript
canvas实现刮刮卡效果
Mar 14 #Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 #Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 #Javascript
You might like
PHP用反撇号执行外部命令
2015/04/14 PHP
JavaScript的目的分析
2007/01/05 Javascript
5 cool javascript apps
2007/03/24 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python requests post多层字典的方法
2018/12/27 Python
python求质数列表的例子
2019/11/24 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
英语求职信范文
2014/05/23 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
歼十出击观后感
2015/06/11 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技