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图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
BootStrap入门学习第一篇
Aug 28 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 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
如何使用PHP获取网络上文件
2006/10/09 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
毕业留言寄语大全
2014/04/10 职场文书
信息管理专业自荐书
2014/06/05 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
教师工作能力自我评价
2015/03/04 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Python文件的操作示例的详细讲解
2021/04/08 Python
Python中第三方库Faker的使用详解
2022/04/02 Python