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操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
JS Object构造函数之Object.freeze
Apr 28 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与ASP
2006/10/09 PHP
php中Smarty模板初体验
2011/08/08 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
JavaScript 事件系统
2010/07/22 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
javascript实现简易计算器
2017/02/01 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python类的用法实例浅析
2015/05/27 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python 进程的几种创建方式详解
2019/08/29 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
廉洁校园实施方案
2014/05/25 职场文书
解约证明模板
2015/06/19 职场文书