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动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
JS的replace方法介绍
Oct 20 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
Vue中使用Sortable的示例代码
Apr 07 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获取photoshop写入图片文字信息的方法
2015/03/31 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
Javascript this指针
2009/07/30 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
python3.0 字典key排序
2008/12/24 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Django通过json格式收集主机信息
2020/05/29 Python
python 实现逻辑回归
2020/12/30 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
一夜的工作教学反思
2014/02/08 职场文书
施工安全责任书范本
2014/07/24 职场文书
招标承诺书
2014/08/30 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
综合实践活动报告
2015/02/05 职场文书
党员公开承诺书2016
2016/03/24 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android