Home

CharlesAnjos' VueKB

Introduction

In this repo I plan on annotating on the many observations and examples I hopefully come across in the journey of learning about / working with Vue.js.

Observations

General usage of this wiki

Most info will be published here in the wiki pages of this project, with code being relayed to other repos within the organization structure.

Creating and Connecting Vue App Instances

On a javascript file

// creates a Vue instance
const app = Vue.createApp({
  data(){
    return {
      //any variable put here will be available to the page element this app is bound to
      courseGoal: 'Finish the course!',
      vueLink: 'https://vuejs.org',
    };
  },
});

// Connects the Vue instance to an HTML element via an ID
app.mount('#my-vue-app');

On a HTML file

<html>
  <head>
    ...
    <!-- Vue import via CDN (get an up-to-date version at vuejs.org) -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Import your script created above -->
    <script src="myscript.js" defer></script>
    ...
  </head>
  <body>
    ...
    <section id="my-vue-app"><!-- This element ID defines the element Vue will have control over -->
      Vue app controls things here
      <p>{{ courseGoal }}</p><!-- Access to variables inside elements -->
      <p>Learn more <a v-bind:href="vueLink">about Vue</a>.</p> <!-- Access to variables as parameters to elements -->
    </section>
    ...
  </body>
</html>

Navigation Menu

Uh oh!