MyException - 我的异常网
当前位置:我的异常网» JavaScript » vue爷儿俩组件之间传值,获取URLJSON和组件之间的引

vue爷儿俩组件之间传值,获取URLJSON和组件之间的引用

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
vue父子组件之间传值,获取URLJSON和组件之间的引用
 

目录(?)[+]

 

已经有几周没有更新博客了,最近自己也在学习就没有能及时抽身来写博客。

 

今天就来简单说一下vue-resource,这是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据。话不多说,直接上干货吧。

 

这里PS一下,有人反映之前的代码下载下来,运行会报错而且会有上百个之多,这是因为在我初始化项目的时候没有启用eslint,eslint是用来检测代码风格的,我是觉得格式要求严的有点过分,所以禁用了eslint。如果对eslint感兴趣的朋友,可以看 eslint的官网 了解一下格式的要求和一些相应的配置。

 

我们主要来了解一下以下内容:

 

  • 模拟服务端返回数据
  • 用vue-resource向服务器请求数据

模拟服务器返回数据

 
我们用vue-cli创建的项目中,已经给我们提供了模拟服务器端返回数据的地方和接口。如下图所示,在项目目录的build目录下,有一个dev-server.js,在这个文件中,我们就可以来做一些模拟数据的工作。
 
 

1、准备一个data.json文件

在项目根目录下,新建一个data.json。这个文件里的内容就是我们要模拟的服务端返回的数据。
data.json的内容如下:
[javascript] view plain copy
 
  1. {  
  2.     "books": [  
  3.         { "price""111.00""title""语文""img""http://imgsrc.baidu.com/forum/w%3D580/sign=688d19b6422309f7e76fad1a420f0c39/0e143912b31bb051dfdebf0a327adab44bede0f9.jpg" },  
  4.         { "price""123.00""title""数学""img""http://shopimg.kongfz.com.cn/20130826/1746508/1746508YTGtm0_b.jpg"},  
  5.         { "price""113.00""title""英语""img""http://www.shiyi910.com/UploadFiles/2014-01/170/2014011322414554305.jpg"},  
  6.         { "price""112.00""title""物理""img""http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=b62ac53d4b36acaf59b59ef849e9a126/f603918fa0ec08fa2cf895a359ee3d6d55fbda3e.jpg"}  
  7.     ]  
  8. }  
这里,books字段里的每一个对象表示一本书的信息。
 

2、“写接口”

 
修改dev-server.js文件,在大概第19行左右的 var app = express()之后,添加上如下内容
 
[javascript] view plain copy
 
  1. var appData = require('../data.json')  
  2. var books = appData.books  
  3.   
  4. var apiRoutes = express.Router()  
  5. apiRoutes.get('/books'function(req, res){  
  6.   res.json({  
  7.     data: books  
  8.   })  
  9. })  
  10.   
  11. app.use('/api', apiRoutes)  

简单说明一下,这段代码就是通过请求醒目根目录下的data.json文件,拿到文件的内容并赋值给appData变量,取到里面的books字段内容保存在books变量中。然后,通过express提供的Router对象,以及Router对象的一些方法(这里是get方法)来设置请求的路径,以及请求成功后的回调函数来处理要返回给请求端的数据。最后,我们要“使用”这个Router对象,为了统一管理api接口,我们在要请求的路由前边都加上‘api/’来表明这个路径是专门用来提供api数据的。在这个“接口”中,当我们访问“http://localhost:8080/api/books”路径的时候,就会返回data.json里的books对象给我们。
 
这里我们先来简单验证一下是否能成功返回数据,打开命令行,cd到当前项目目录,运行 npm run dev ,等项目运行成功之后,在浏览器地址栏输入http://localhost:8080/api/books,看到如下图所示,数据正常返回,OK!“接口”就开发完成了。
 
PS:在你的浏览器上可能看到的是没有经过格式化的数据,我的浏览器上装了一个json格式化的插件,这不是重点,重点是“接口”正常工作了,不是吗得意

 

 

用vue-resource向服务器请求数据

1、安装vue-resource

打开命令行,cd到项目目录,运行 npm install vue-resource --save或者cnpm install vue-resource --save,等待安装完成即可。
 

2、在main.js里导入并使用vue-resource

修改main.js如下
 
[javascript] view plain copy
 
  1. // main.js  
  2.   
  3. // 导入Vue,这个是必需的,在使用Vue之前,必须先导入  
  4. import Vue from 'vue'  
  5.   
  6. // 导入 vue-router,并使用  
  7. import VueRouter from 'vue-router'  
  8. Vue.use(VueRouter)  
  9.   
  10. // 导入 vue-resource,并使用  
  11. import VueResource from 'vue-resource'  
  12. Vue.use(VueResource)  
  13.   
  14. // 导入 pages 下的 Home.vue   
  15. import Home from './pages/Home'  
  16. import Detail from './pages/Detail'  
  17.   
  18. // 定义路由配置  
  19. const routes = [  
  20.     {  
  21.         path: '/',  
  22.         component: Home  
  23.     },  
  24.     {  
  25.         path: '/detail',  
  26.         component: Detail  
  27.     }  
  28. ]  
  29.   
  30. // 创建路由实例  
  31. const router = new VueRouter({  
  32.     routes  
  33. })  
  34.   
  35. // 创建 Vue 实例  
  36. new Vue({  
  37.   el: '#app',  
  38.   data(){  
  39.     return {  
  40.         transitionName: 'slide'  
  41.     }  
  42.   },  
  43.   router,  
  44.   watch: {  
  45.     // 监视路由,参数为要目标路由和当前页面的路由  
  46.     '$route' (to, from){  
  47.         const toDepth = to.path.substring(0, to.path.length-2).split('/').length  
  48.         // 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail'  
  49.         // 按照官方给的例子,这两个路由路径深度都为 2 ,所以,这里稍作调整,不知道有什么不妥  
  50.         // 但目前在这个demo中能正常运行,如果知道更好的方法,欢迎留言赐教  
  51.         const fromDepth = from.path.substring(0, from.path.length-2).split('/').length  
  52.         this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'  
  53.         // 根据路由深度,来判断是该从右侧进入还是该从左侧进入  
  54.     }  
  55.   }  
  56. })  
 

3、修改Home.vue和List.vue来接收服务端返回的数据

Home.vue修改如下:
 
[html] view plain copy
 
  1. <!-- Home.vue -->  
  2. <template>  
  3.     <div class="container">  
  4.         <!-- 由于html不区分大小写,所以js中驼峰命名方式在html中要改成用短横线连接的形式 -->  
  5.         <home-header></home-header>  
  6.         <div class="content">  
  7.             <ul class="cont_ul">  
  8.                 <list  
  9.                     v-for="item in items"  
  10.                     :price="item.price"  
  11.                     :title="item.title"  
  12.                     :img="item.img">  
  13.                 <!-- 通过v-bind(简写为“:”)绑定props来从父组件给子组件传值 -->  
  14.                 </list>  
  15.             </ul>  
  16.         </div>  
  17.     </div>  
  18. </template>  
  19. <style>  
  20.     .container {  
  21.         max-width: 640px;  
  22.         margin: 0 auto;  
  23.         overflow-x: hidden;  
  24.     }  
  25.     .cont_ul {  
  26.         padding-top: 0.05rem;  
  27.         margin: 0 -0.12rem;  
  28.     }  
  29.     .cont_ul:after {  
  30.         content: "";  
  31.         display: block;  
  32.         width: 0;  
  33.         height: 0;  
  34.         clear: both;  
  35.     }  
  36. </style>  
  37. <script>  
  38.     // 导入要用到的子组件  
  39.     import HomeHeader from '../components/HomeHeader'  
  40.     import List from '../components/List'  
  41.     export default {  
  42.         data () {  
  43.             return {  
  44.                 items: []  
  45.             }  
  46.         },  
  47.         // 在components字段中,包含导入的子组件  
  48.         components: {  
  49.             HomeHeader,  
  50.             List  
  51.         },  
  52.         // 在组件创建完成时,执行的钩子函数  
  53.         created (){  
  54.             // 在main.js里导入并使用vue-resource之后,就可以通过this.$http来使用vue-resource了,这里我们用到了get方法  
  55.             this.$http.get('/api/books').then((data) => {  
  56.                 // 由于请求成功返回的是Promise对象,我们要从data.body.data拿到books数组  
  57.                 this.items = data.body.data;  
  58.             })  
  59.         }  
  60.     }  
  61. </script>  


 
List.vue修改如下:
[html] view plain copy
 
  1. <!-- List.vue -->  
  2. <template>  
  3.     <li class="sec_li">  
  4.         <router-link to="/detail" class="lp_li_a">  
  5.             <div class="lp_li_imgWrap">  
  6.                 <img :src="img" alt="">  
  7.             </div>  
  8.             <p class="lp_li_name">{{ title }}</p>  
  9.             <p class="lp_li_price">¥{{ price }}元</p>  
  10.         </router-link>  
  11.     </li>  
  12. </template>  
  13.   
  14. <style scoped>  
  15.     .sec_li {  
  16.         float: left;  
  17.         width: 50%;  
  18.         margin-bottom: 0.1rem;  
  19.     }  
  20.     .lp_li_a {  
  21.         display: block;  
  22.         padding: 0.3rem 0;  
  23.         margin: 0 0.05rem;  
  24.         text-align: center;  
  25.         background: #fff;  
  26.     }  
  27.     .lp_li_imgWrap {  
  28.         padding: 0.24rem 0;  
  29.     }  
  30.     .lp_li_imgWrap > img {  
  31.         width: auto;  
  32.         height: 2.3rem;  
  33.     }  
  34.     .lp_li_name {  
  35.         height: 0.5rem;  
  36.         line-height: 0.5rem;  
  37.         font-size: 16px;  
  38.         color: #333;  
  39.     }  
  40.     .lp_li_price {  
  41.         height: 0.5rem;  
  42.         line-height: 0.5rem;  
  43.         font-size: 16px;  
  44.         color: #fb3b3b;  
  45.     }  
  46. </style>  
  47.   
  48. <script>  
  49.     export default {  
  50.         // 接收父组件传过来的以下几个属性  
  51.         props: ['price', 'title', 'img'],  
  52.     }  
  53. </script>  

然后,再回到浏览器,应该会看到如下图的效果了。
 
 
 
搞定!数据成功接入,可以来杯咖啡放松一下,回味一下整个过程的实现了。
 
原文地址: http://blog.qianduanchina.cn/post/59704d0f7838a71273eb4da9

文章评论

程序员的鄙视链
程序员的鄙视链
一个程序员的时间管理
一个程序员的时间管理
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
如何成为一名黑客
如何成为一名黑客
Java程序员必看电影
Java程序员必看电影
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
中美印日四国程序员比较
中美印日四国程序员比较
漫画:程序员的工作
漫画:程序员的工作
每天工作4小时的程序员
每天工作4小时的程序员
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员和编码员之间的区别
程序员和编码员之间的区别
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员必看的十大电影
程序员必看的十大电影
程序员都该阅读的书
程序员都该阅读的书
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
总结2014中国互联网十大段子
总结2014中国互联网十大段子
老程序员的下场
老程序员的下场
鲜为人知的编程真相
鲜为人知的编程真相
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员应该关注的一些事儿
程序员应该关注的一些事儿
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
10个调试和排错的小建议
10个调试和排错的小建议
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
旅行,写作,编程
旅行,写作,编程
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
那些争议最大的编程观点
那些争议最大的编程观点
 程序员的样子
程序员的样子
为什么程序员都是夜猫子
为什么程序员都是夜猫子
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有