Home

CharlesAnjos' Vue3KB

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 v3.

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.

Basic Functionality Code

Creating and Connecting Vue App Instances

Vue app instances can be created on a javascript file, then connected to an HTML element with a specific ID defined when creating the Vue app instance

On a javascript file

// creates a Vue instance
const app = Vue.createApp({
  data(){ // function that defines data that will be available to the HTML page
    return {
      ...
    };
  },
  methods: {
    ... // methods that will be availabe to use to the HTML page
  }
});

// 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 -->
      <!-- All data and methods defined on the vue app will be available to the HTML elements here -->
    </section>
    ...
  </body>
</html>

Data Interpolation / Binding

Data interpolation is the access of data related to the Vue instance through the connected HTML element. It can be done directly or via data binding.

In your Vue app script:

const app = Vue.createApp({
  data(){ // function that defines data that will be available to the HTML page
    return {
      var1: 'Hello',
      var2: 123,
      var3: [1,2,3],
      obj1: {params: "you can pass objects"}
      link: 'https://vuejs.org'
    };
  },
  ...
});

In your HTML file:

    ...
    <section id="my-vue-app">
      <!-- Data is accessed from inside elements using the interpolation operator {{ }} -->
      <p>{{ var1 }}</p>
      <p>{{ var2 }}</p>
      <p>{{ var3 }}</p>
      <p>{{ obj1.params }}</p>
      <!-- The following code WILL NOT WORK. Data interpolation can't be used as HTML parameters, only content internal to HTML elements-->
      <p>Learn more <a href="{{link}}">about Vue</a>.</p>
      <!-- For this, it's necessary to use the  v-bind directive and the name of the parameter to be bound to.-->
      <p>Learn more <a v-bind:href="link">about Vue</a>.</p>
    </section>
    ...

Function Calls

Similarly to data, functions can also be created on the Vue instance and accessed by the HTML element bound to it.

In your Vue app script:

const app = Vue.createApp({
  data(){
    ...
  },
  methods: { // Defines methods to be accessed through the HTML element
    oneMethod(){
      ...
      return 'something';
    },
    anotherMethod(){
      ...
      return 'something else';
    },
  }
});

In your HTML file:

    ...
    <section id="my-vue-app">
      ...
      <!-- Functions can be accessed similarly to data previously shown -->
      <p>{{ oneMethod() }}</p>
      <p>{{ anotherMethod() }}</p>
    </section>
    ...

Access Vue data through Vue functions

Data defined on the Vue instance can only be accessed by functions defined on the Vue instance through the this object, which represents the Vue instance internally

In your Vue app script:

const app = Vue.createApp({
  data(){
    return{
      someVar: 'some value', // Definition of the data
    };
  },
  methods: {
    someMethod(){
      this.someVar = 'some other value' // Access to the data defined before
      return this.someVar;
    }
  }
});

Outputting raw HTML content

It is possible to output content that will be interpreted as HTML directly, viabilizing the dinamic creation of HTML content.

In your Vue app script:

const app = Vue.createApp({
  data(){
    return{
      htmlCode: '<h2>some HTML elements</h2>', // this variable has text that can be interpreted as HTML code
    };
  },
  methods: {
    outputHtml(){
      return this.htmlCode; // Functions can also output HTML code
    }
  }
});

In your HTML file:

    ...
    <section id="my-vue-app">
      ...
      <!-- The following code WILL NOT WORK. Simple data interpolation will not interpret the HTML code. It will be outputted out as simple text (protection against XSS attacks) -->
      <p>{{ htmlCode }}</p>
      <!-- the v-html directive needs to be used in these cases.  -->
      <p v-html="htmlCode"></p>
      <!-- the v-html directive will also work with functions.  -->
      <p v-html="outputHtml()"></p>
    </section>
    ...

Nevertheless, this SHOULD NOT BE DONE, because you will be intruducing a security flaw by allowing your app to execute HTML code directly, without any checks.

Navigation Menu

Uh oh!