I was assigned to build a small project about image search a few days ago. I use this project as a learning material in Vue.js , and referenced from this Code Pen since I didn’t have much time to do the project this weekend.
Key learnings in this project:
- http.jsonp : method to sent jsonp request to flickr public feed api (could be used because jsonp data is usually public/visible and safer.)
Then, use the default callback function jsonFlickrFeed to get the response and update image data in our vue model.
- Vue.directive : custom HTML attribute in dealing with DOM objects
- directive.inserted : when bounded elements are inserted --> the first thing the directive should do
directive.updated : triggerd when the bounded elements are changed
- advantages in using onload :
1) improve user experience (with lazyload)
2) can check the visitor’s browser type and browser version, and load the proper version of the web page based on the information (if needed)
- V-if : a convenient directive to do conditional rendering, and will not exist in DOM unless the condition achieved.
V-show : another conditional rending directive similar to V-if, but will still exist in DOM, and will be hided using <style> tag once the condition is not satisfied.
Bugs to be fixed:
I'm trying to make the error message appear after 1) done http request sending 2) confirmed no images returned. Now I've done with the former one, but still couldn't finish the latter. Hopefully would figure it out asap.....
I fixed the bug above by tracking the lenghth of the contained Flickr Response object. So the error message would appear once the request was sent and the response has no items attached.