Created
April 3, 2017 15:52
-
-
Save deanvlue/c06575cd9360df9f6fd6a73b0ac81388 to your computer and use it in GitHub Desktop.
JS Bin vue js get from API // source http://jsbin.com/qujeyo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="vue js get from API"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| a{ | |
| text-decoration: none; | |
| } | |
| a:hover{ | |
| text-decoration: underline; | |
| } | |
| html{ | |
| font: normal 16px sans-serif; | |
| color: #333; | |
| background-color: #f9f9f9; | |
| } | |
| .container{ | |
| padding: 27px 20px; | |
| margin: 30px auto 50px; | |
| max-width: 1250px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| flex-direction: row; | |
| background-color: #fff; | |
| box-shadow: 0 0 1px #ccc; | |
| } | |
| /* Subreddit component */ | |
| .subreddit{ | |
| flex: 0 0 33%; | |
| min-width: 400px; | |
| padding: 20px 42px; | |
| } | |
| .subreddit h2{ | |
| font-size: 18px; | |
| margin-bottom: 10px; | |
| } | |
| .subreddit .item-list{ | |
| border-top: 1px solid #bec9d0; | |
| padding-top: 20px; | |
| list-style: none; | |
| } | |
| .subreddit .item-list li{ | |
| margin-bottom: 17px; | |
| } | |
| /* Post component */ | |
| .post{ | |
| display: flex; | |
| } | |
| .post .thumbnail{ | |
| display: block; | |
| flex: 0 0 60px; | |
| height: 60px; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| background-position: center; | |
| margin-right: 10px; | |
| border-radius: 4px; | |
| margin-right: 12px; | |
| } | |
| .post .details{ | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .post .details .title{ | |
| font-size: 15px; | |
| margin-bottom: 3px; | |
| color: #04477b; | |
| } | |
| .post .details .title:visited{ | |
| color: purple; | |
| } | |
| .post .details .action-buttons a{ | |
| font-size: 11px; | |
| margin-right: 4px; | |
| display: inline-block; | |
| color: #666; | |
| } | |
| .post .details .action-buttons i{ | |
| font-size: 10px; | |
| margin-right: 1px; | |
| } | |
| @media(max-width: 1250px){ | |
| .container{ | |
| justify-content: center; | |
| margin: 30px 30px 50px 30px; | |
| } | |
| } | |
| @media(max-width: 500px){ | |
| .subreddit{ | |
| min-width: 300px; | |
| padding: 20px 15px; | |
| } | |
| } | |
| /*---------------- | |
| Demo Styles | |
| -----------------*/ | |
| header { | |
| background-color: #35495e; | |
| box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.15); | |
| padding: 20px 30px; | |
| box-sizing: border-box; | |
| } | |
| header .header-limiter { | |
| max-width: 1250px; | |
| text-align: center; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| /* Logo */ | |
| header .header-limiter h1 { | |
| line-height: 40px; | |
| margin: 0; | |
| font-size: 18px; | |
| font-weight: normal; | |
| } | |
| header .header-limiter h1 span { | |
| color: #41b883; | |
| } | |
| /* The header links */ | |
| header .header-limiter a { | |
| color: #ffffff; | |
| text-decoration: none; | |
| } | |
| header .header-limiter nav{ | |
| line-height: 40px; | |
| } | |
| header .header-limiter nav a{ | |
| display: inline-block; | |
| padding: 0 5px; | |
| text-decoration: none; | |
| color: #ffffff; | |
| font-size: 14px; | |
| opacity: 0.9; | |
| font-weight: bold; | |
| border-radius: 3px; | |
| padding: 0px 25px; | |
| background-color: #D6336A; | |
| } | |
| header .header-limiter nav a:hover{ | |
| opacity: 1; | |
| } | |
| header .header-limiter nav a.selected { | |
| color: #608bd2; | |
| pointer-events: none; | |
| opacity: 1; | |
| } | |
| /* Making the header responsive */ | |
| @media all and (max-width: 600px) { | |
| header { | |
| padding: 20px 0; | |
| } | |
| header .header-limiter{ | |
| flex-direction: column; | |
| } | |
| header .header-limiter h1 { | |
| margin: 10px 0 10px; | |
| text-align: center; | |
| font-size: 16px; | |
| line-height: 1; | |
| } | |
| } | |
| /* ------- Demo adds. Please ignore and remove ------- */ | |
| @media (max-width: 1200px) { | |
| #bsaHolder{ | |
| display:none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="main"> | |
| <div class="container"> | |
| <subreddit name="food"></subreddit> | |
| <subreddit name="space"></subreddit> | |
| </div> | |
| </div> | |
| <template id="subreddit"> | |
| <div class="subreddit"> | |
| <h2>{{name | uppercase}}</h2> | |
| <ul class="item-list"> | |
| <li v-for="obj in posts"> | |
| <post :item="obj"></post> | |
| </li> | |
| </ul> | |
| </div> | |
| </template> | |
| <template id="post"> | |
| <div class="post"> | |
| <a :href="item.data.url" :style="getImageBackgroundCSS(item.data.thumbnail)" target="_blank" class="thumbnail"></a> | |
| <div class="details"> | |
| <a :href="item.data.url" :title="item.data.title" target="_blank" class="title"> | |
| {{ item.data.title | truncate}} | |
| </a> | |
| <div class="action-buttons"> | |
| <a :href="'http://reddit.com' + item.data.permalink " title="Vote"> | |
| <i class="material-icons">thumbs_up_down</i> | |
| {{item.data.score}} | |
| </a> | |
| <a :href="'http://reddit.com' + item.data.permalink " title="Go to discussion"> | |
| <i class="material-icons">forum</i> | |
| {{item.data.num_comments}} | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script id="jsbin-javascript"> | |
| /*---------------- | |
| Components | |
| -----------------*/ | |
| // Parent | Subreddit component containing a list of 'post' components. | |
| var subreddit = Vue.component('subreddit',{ | |
| template: '#subreddit', | |
| props: ['name'], | |
| data: function () { | |
| return { posts: [] } | |
| }, | |
| created: function(){ | |
| this.$http.get("https://www.reddit.com/r/"+ this.name +"/top.json?limit=5") | |
| .then(function(resp){ | |
| this.posts=resp.data.data.children; | |
| }); | |
| } | |
| }); | |
| // Child | Componenet represiting a single post. | |
| var post = Vue.component('post', { | |
| template: "#post", | |
| props: ['item'], | |
| methods: { | |
| getImageBackgroundCSS: function(img) { | |
| if(img && img!='self' && img!='nsfw') { | |
| return 'background-image: url(' + img + ')'; | |
| } | |
| else { | |
| return 'background-image: url(assets/img/placeholder.png)'; | |
| } | |
| } | |
| } | |
| }); | |
| /*----------------- | |
| Custom filters | |
| -----------------*/ | |
| // Filter that transform text to uppercase. | |
| Vue.filter('uppercase', function(value) { | |
| return value.toUpperCase(); | |
| }); | |
| // Filter for cutting off strings that are too long. | |
| Vue.filter('truncate', function(value) { | |
| var length = 60; | |
| if(value.length <= length) { | |
| return value; | |
| } | |
| else { | |
| return value.substring(0, length) + '...'; | |
| } | |
| }); | |
| new Vue({ | |
| el: '#main' | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">*{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| a{ | |
| text-decoration: none; | |
| } | |
| a:hover{ | |
| text-decoration: underline; | |
| } | |
| html{ | |
| font: normal 16px sans-serif; | |
| color: #333; | |
| background-color: #f9f9f9; | |
| } | |
| .container{ | |
| padding: 27px 20px; | |
| margin: 30px auto 50px; | |
| max-width: 1250px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| flex-direction: row; | |
| background-color: #fff; | |
| box-shadow: 0 0 1px #ccc; | |
| } | |
| /* Subreddit component */ | |
| .subreddit{ | |
| flex: 0 0 33%; | |
| min-width: 400px; | |
| padding: 20px 42px; | |
| } | |
| .subreddit h2{ | |
| font-size: 18px; | |
| margin-bottom: 10px; | |
| } | |
| .subreddit .item-list{ | |
| border-top: 1px solid #bec9d0; | |
| padding-top: 20px; | |
| list-style: none; | |
| } | |
| .subreddit .item-list li{ | |
| margin-bottom: 17px; | |
| } | |
| /* Post component */ | |
| .post{ | |
| display: flex; | |
| } | |
| .post .thumbnail{ | |
| display: block; | |
| flex: 0 0 60px; | |
| height: 60px; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| background-position: center; | |
| margin-right: 10px; | |
| border-radius: 4px; | |
| margin-right: 12px; | |
| } | |
| .post .details{ | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .post .details .title{ | |
| font-size: 15px; | |
| margin-bottom: 3px; | |
| color: #04477b; | |
| } | |
| .post .details .title:visited{ | |
| color: purple; | |
| } | |
| .post .details .action-buttons a{ | |
| font-size: 11px; | |
| margin-right: 4px; | |
| display: inline-block; | |
| color: #666; | |
| } | |
| .post .details .action-buttons i{ | |
| font-size: 10px; | |
| margin-right: 1px; | |
| } | |
| @media(max-width: 1250px){ | |
| .container{ | |
| justify-content: center; | |
| margin: 30px 30px 50px 30px; | |
| } | |
| } | |
| @media(max-width: 500px){ | |
| .subreddit{ | |
| min-width: 300px; | |
| padding: 20px 15px; | |
| } | |
| } | |
| /*---------------- | |
| Demo Styles | |
| -----------------*/ | |
| header { | |
| background-color: #35495e; | |
| box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.15); | |
| padding: 20px 30px; | |
| box-sizing: border-box; | |
| } | |
| header .header-limiter { | |
| max-width: 1250px; | |
| text-align: center; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| /* Logo */ | |
| header .header-limiter h1 { | |
| line-height: 40px; | |
| margin: 0; | |
| font-size: 18px; | |
| font-weight: normal; | |
| } | |
| header .header-limiter h1 span { | |
| color: #41b883; | |
| } | |
| /* The header links */ | |
| header .header-limiter a { | |
| color: #ffffff; | |
| text-decoration: none; | |
| } | |
| header .header-limiter nav{ | |
| line-height: 40px; | |
| } | |
| header .header-limiter nav a{ | |
| display: inline-block; | |
| padding: 0 5px; | |
| text-decoration: none; | |
| color: #ffffff; | |
| font-size: 14px; | |
| opacity: 0.9; | |
| font-weight: bold; | |
| border-radius: 3px; | |
| padding: 0px 25px; | |
| background-color: #D6336A; | |
| } | |
| header .header-limiter nav a:hover{ | |
| opacity: 1; | |
| } | |
| header .header-limiter nav a.selected { | |
| color: #608bd2; | |
| pointer-events: none; | |
| opacity: 1; | |
| } | |
| /* Making the header responsive */ | |
| @media all and (max-width: 600px) { | |
| header { | |
| padding: 20px 0; | |
| } | |
| header .header-limiter{ | |
| flex-direction: column; | |
| } | |
| header .header-limiter h1 { | |
| margin: 10px 0 10px; | |
| text-align: center; | |
| font-size: 16px; | |
| line-height: 1; | |
| } | |
| } | |
| /* ------- Demo adds. Please ignore and remove ------- */ | |
| @media (max-width: 1200px) { | |
| #bsaHolder{ | |
| display:none; | |
| } | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| /*---------------- | |
| Components | |
| -----------------*/ | |
| // Parent | Subreddit component containing a list of 'post' components. | |
| var subreddit = Vue.component('subreddit',{ | |
| template: '#subreddit', | |
| props: ['name'], | |
| data: function () { | |
| return { posts: [] } | |
| }, | |
| created: function(){ | |
| this.$http.get("https://www.reddit.com/r/"+ this.name +"/top.json?limit=5") | |
| .then(function(resp){ | |
| this.posts=resp.data.data.children; | |
| }); | |
| } | |
| }); | |
| // Child | Componenet represiting a single post. | |
| var post = Vue.component('post', { | |
| template: "#post", | |
| props: ['item'], | |
| methods: { | |
| getImageBackgroundCSS: function(img) { | |
| if(img && img!='self' && img!='nsfw') { | |
| return 'background-image: url(' + img + ')'; | |
| } | |
| else { | |
| return 'background-image: url(assets/img/placeholder.png)'; | |
| } | |
| } | |
| } | |
| }); | |
| /*----------------- | |
| Custom filters | |
| -----------------*/ | |
| // Filter that transform text to uppercase. | |
| Vue.filter('uppercase', function(value) { | |
| return value.toUpperCase(); | |
| }); | |
| // Filter for cutting off strings that are too long. | |
| Vue.filter('truncate', function(value) { | |
| var length = 60; | |
| if(value.length <= length) { | |
| return value; | |
| } | |
| else { | |
| return value.substring(0, length) + '...'; | |
| } | |
| }); | |
| new Vue({ | |
| el: '#main' | |
| });</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| a{ | |
| text-decoration: none; | |
| } | |
| a:hover{ | |
| text-decoration: underline; | |
| } | |
| html{ | |
| font: normal 16px sans-serif; | |
| color: #333; | |
| background-color: #f9f9f9; | |
| } | |
| .container{ | |
| padding: 27px 20px; | |
| margin: 30px auto 50px; | |
| max-width: 1250px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| flex-direction: row; | |
| background-color: #fff; | |
| box-shadow: 0 0 1px #ccc; | |
| } | |
| /* Subreddit component */ | |
| .subreddit{ | |
| flex: 0 0 33%; | |
| min-width: 400px; | |
| padding: 20px 42px; | |
| } | |
| .subreddit h2{ | |
| font-size: 18px; | |
| margin-bottom: 10px; | |
| } | |
| .subreddit .item-list{ | |
| border-top: 1px solid #bec9d0; | |
| padding-top: 20px; | |
| list-style: none; | |
| } | |
| .subreddit .item-list li{ | |
| margin-bottom: 17px; | |
| } | |
| /* Post component */ | |
| .post{ | |
| display: flex; | |
| } | |
| .post .thumbnail{ | |
| display: block; | |
| flex: 0 0 60px; | |
| height: 60px; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| background-position: center; | |
| margin-right: 10px; | |
| border-radius: 4px; | |
| margin-right: 12px; | |
| } | |
| .post .details{ | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .post .details .title{ | |
| font-size: 15px; | |
| margin-bottom: 3px; | |
| color: #04477b; | |
| } | |
| .post .details .title:visited{ | |
| color: purple; | |
| } | |
| .post .details .action-buttons a{ | |
| font-size: 11px; | |
| margin-right: 4px; | |
| display: inline-block; | |
| color: #666; | |
| } | |
| .post .details .action-buttons i{ | |
| font-size: 10px; | |
| margin-right: 1px; | |
| } | |
| @media(max-width: 1250px){ | |
| .container{ | |
| justify-content: center; | |
| margin: 30px 30px 50px 30px; | |
| } | |
| } | |
| @media(max-width: 500px){ | |
| .subreddit{ | |
| min-width: 300px; | |
| padding: 20px 15px; | |
| } | |
| } | |
| /*---------------- | |
| Demo Styles | |
| -----------------*/ | |
| header { | |
| background-color: #35495e; | |
| box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.15); | |
| padding: 20px 30px; | |
| box-sizing: border-box; | |
| } | |
| header .header-limiter { | |
| max-width: 1250px; | |
| text-align: center; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| /* Logo */ | |
| header .header-limiter h1 { | |
| line-height: 40px; | |
| margin: 0; | |
| font-size: 18px; | |
| font-weight: normal; | |
| } | |
| header .header-limiter h1 span { | |
| color: #41b883; | |
| } | |
| /* The header links */ | |
| header .header-limiter a { | |
| color: #ffffff; | |
| text-decoration: none; | |
| } | |
| header .header-limiter nav{ | |
| line-height: 40px; | |
| } | |
| header .header-limiter nav a{ | |
| display: inline-block; | |
| padding: 0 5px; | |
| text-decoration: none; | |
| color: #ffffff; | |
| font-size: 14px; | |
| opacity: 0.9; | |
| font-weight: bold; | |
| border-radius: 3px; | |
| padding: 0px 25px; | |
| background-color: #D6336A; | |
| } | |
| header .header-limiter nav a:hover{ | |
| opacity: 1; | |
| } | |
| header .header-limiter nav a.selected { | |
| color: #608bd2; | |
| pointer-events: none; | |
| opacity: 1; | |
| } | |
| /* Making the header responsive */ | |
| @media all and (max-width: 600px) { | |
| header { | |
| padding: 20px 0; | |
| } | |
| header .header-limiter{ | |
| flex-direction: column; | |
| } | |
| header .header-limiter h1 { | |
| margin: 10px 0 10px; | |
| text-align: center; | |
| font-size: 16px; | |
| line-height: 1; | |
| } | |
| } | |
| /* ------- Demo adds. Please ignore and remove ------- */ | |
| @media (max-width: 1200px) { | |
| #bsaHolder{ | |
| display:none; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*---------------- | |
| Components | |
| -----------------*/ | |
| // Parent | Subreddit component containing a list of 'post' components. | |
| var subreddit = Vue.component('subreddit',{ | |
| template: '#subreddit', | |
| props: ['name'], | |
| data: function () { | |
| return { posts: [] } | |
| }, | |
| created: function(){ | |
| this.$http.get("https://www.reddit.com/r/"+ this.name +"/top.json?limit=5") | |
| .then(function(resp){ | |
| this.posts=resp.data.data.children; | |
| }); | |
| } | |
| }); | |
| // Child | Componenet represiting a single post. | |
| var post = Vue.component('post', { | |
| template: "#post", | |
| props: ['item'], | |
| methods: { | |
| getImageBackgroundCSS: function(img) { | |
| if(img && img!='self' && img!='nsfw') { | |
| return 'background-image: url(' + img + ')'; | |
| } | |
| else { | |
| return 'background-image: url(assets/img/placeholder.png)'; | |
| } | |
| } | |
| } | |
| }); | |
| /*----------------- | |
| Custom filters | |
| -----------------*/ | |
| // Filter that transform text to uppercase. | |
| Vue.filter('uppercase', function(value) { | |
| return value.toUpperCase(); | |
| }); | |
| // Filter for cutting off strings that are too long. | |
| Vue.filter('truncate', function(value) { | |
| var length = 60; | |
| if(value.length <= length) { | |
| return value; | |
| } | |
| else { | |
| return value.substring(0, length) + '...'; | |
| } | |
| }); | |
| new Vue({ | |
| el: '#main' | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment