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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
详解JavaScript 作用域
Jul 14 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
javascript 自定义事件初探
2009/08/21 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
vue-cli2.9.3 详细教程
2018/04/23 Javascript
Python数据类型学习笔记
2016/01/13 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
基于Python实现用户管理系统
2019/02/26 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python之指数与E记法的区别详解
2019/11/21 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
出国导师推荐信
2014/01/16 职场文书
安全大检查反思材料
2014/01/31 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
中队活动总结
2014/08/27 职场文书
销售经理岗位职责
2015/01/31 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android
python中使用redis用法详解
2022/12/24 Redis