vue2.0+vue-router构建一个简单的列表页的示例代码


Posted in Javascript onFebruary 13, 2019

一: 环境搭建

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

安装 vue-cli

npm install -g vue-cli

使用vue-cli初始化项目

vue init demo1

进到目录

cd demo1

安装依赖

npm install

开始运行

npm run dev

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

vue2.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">
  <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>

export default {
 name: 'app',
 components: {
  
 }
}
</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 Home from '@/components/Home'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 创建路由实例并配置路由映射 
const router = new VueRouter({
 mode: 'history',
 routes: [ 
  {
   path: '/',
   name: 'Home',
   component: Home
  },
  {
   path: '/',
   name: 'About',
   component: About
  },

 ]
})
// 输出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、安装插件

npm install vue-resource --save

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

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

3、创建Home组件

我们需要在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>

4、最后查看运行结果

vue2.0+vue-router构建一个简单的列表页的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
angular.js分页代码的实例
Jul 27 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 #Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 #Javascript
JavaScript实现的拼图算法分析
Feb 13 #Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 #Javascript
Vue中CSS动画原理的实现
Feb 13 #Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 #Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
PHP中的类-什么叫类
2006/11/20 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
python追加元素到列表的方法
2015/07/28 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
python 动态绘制爱心的示例
2020/09/27 Python
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
外企财务年会演讲稿
2014/01/03 职场文书
党代会心得体会
2014/09/04 职场文书
表扬通报怎么写
2015/01/16 职场文书
赤壁观后感(2)
2015/06/15 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
mysql脏页是什么
2021/07/26 MySQL
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL