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 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 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
附件名前加网站名
2008/03/23 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
javascript生成大小写字母
2015/07/03 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
学习自我鉴定
2014/02/01 职场文书
《雪儿》教学反思
2014/04/17 职场文书
2014年工程师工作总结
2014/11/25 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis