CSCI E-12 Resources

• CSCI E-12 Resources

Vue directives are built into markup (e.g. v-for and v-bind). The advantage here is that Vue takes care of updating content when underlying data changes.

Snippet of Vue code that formats list of resources:

 <ul class="resources">
     <li v-for="r in urls" class="resource">
         <a v-bind:href="r.url">
           <img v-if="r.image" v-bind:src="r.image" />
         </a>
         <div class="title">
           <a v-bind:href="r.url">{{ r.title }}</a>
         </div>
         <div class="hostname">{{ r.hostname }}</div>
         <div class="description">{{ r.description }}</div>
     </li>
 </ul>

And the JSON data (snippet) that powers it:

{
   "urls": [
     {
       "url": "https://alistapart.com/",
       "title": "A List Apart",
       "description": "For people who make websites",
       "image": "https://i2.wp.com/alistapart.com/wp-content/uploads/2019/03/cropped-icon_navigation-laurel-512.jpg?fit=512%2C512&ssl=1"
     },
     {
       "url": "https://learn.jquery.com/",
       "title": "jQuery Learning Center",
       "keywords": "javascript, library",
       "image": "https://cscie12.dce.harvard.edu/images/site-card-jquery.png"
     },
     {
       "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview",
       "title": "An overview of HTTP | MDN",
       "description": "HTTP is a protocol for fetching resources such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed  the different sub-documents fetched, for instance, text, layout description, images, videos, scripts, and more.",
       "image": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview/fetching_a_page.png"
     },
     {
       "url": "http://www.w3.org/",
       "title": "World Wide Web Consortium (W3C)",
       "description": "The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.",
       "image": "https://www.w3.org/Icons/WWW/w3c_home_nb-v.svg"
     }, ... ]}