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 相关文章推荐
jquery select选中的一个小问题
Oct 11 Javascript
js对象的比较
Feb 26 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 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 获取百度的热词数据的代码
2012/02/18 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python 图片验证码代码
2008/12/07 Python
python中黄金分割法实现方法
2015/05/06 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
基于Python fminunc 的替代方法
2020/02/29 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
校运会口号
2014/06/18 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
公务员考察材料范文
2014/12/23 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技