## 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"
         }, ... ]}