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 相关文章推荐
javascript 函数调用的对象和方法
Jul 01 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue 中的keep-alive实例代码
2018/07/20 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
请求时token过期自动刷新token操作
2020/09/11 Javascript
编写简单的Python程序来判断文本的语种
2015/04/07 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
django框架创建应用操作示例
2019/09/26 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
幼儿园保教管理制度
2014/02/03 职场文书
总经理岗位职责范本
2015/04/01 职场文书
雷锋的观后感
2015/06/10 职场文书
运动会宣传稿50字
2015/07/23 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery