Morioh
Login
Jack Downson

Jack Downson

3 years ago

Study Of The Official Documentation Of The Vuejs Library / Framework

Vuejs Exercises

Study of the official documentation of the VueJs library / framework

COMPONENTS

Important: In components, data is a function.
// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

Components are reusable objects

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
Component tree

there is a root component and then cascading all the grafted components.

Component tree

Props

To pass the data to a component as an attribute you use the props, see example below.

Let’s register a post component
Vue.component("blog-post", {
  props: ["title"],
  template: "<h5>{{ title.titolo  + ': '+title.descrizione }}</h5>",
});

this component takes an object as input through the prop: title.

we register the root app which also contains data as well as a reference to the “postlist” div.
new Vue({
  el: "#elencoPost",
  data: {
    nomepagina: "Elenco post",
    elencoPost: [
      { id: 101, titolo: "Apple", descrizione: "questo post parla di Apple" },
      { id: 102, titolo: "Google", descrizione: "questo post parla di Google" },
      { id: 103, titolo: "Amazon", descrizione: "questo post parla di Amazon" },
    ],
  },
});
We attach the blog-post component to the root div listPost as many times as there are elements of the data.elencopost array, we cyclically value the prop.
  <div id="elencoPost" class="demo">
      <h2>{{nomepagina}}</h2>
      <blog-post
        v-for="post in elencoPost"
        v-bind:key="post.id"
        v-bind:title="post"
      >
      </blog-post>
    </div>
$ emit creates events that can be heard by the parent

Thanks to the command $ emit it is possible to generate events on the child component and propagate them to the parent.

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>
<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

or if the event handler is a method write like this

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

v-on or @ (Event Manager)

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
Event Modifiers
  • stop
  • prevent
  • capture
  • self
  • ounces
  • passive
Key Modifiers
<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">
  • enter
  • tab
  • delete (captures both “Delete” and “Backspace” keys)
  • esc
  • space
  • up
  • down
  • left
  • right

For more info https://vuejs.org/v2/guide/events.html

Array Change Detection

ue wraps an observed array’s mutation methods so they will also trigger view updates. The wrapped methods are:

  • push ()
  • pop()
  • shift ()
  • unshift ()
  • splice ()
  • sort ()
  • reverse ()

CREATE a vue js version instance 2

var vm = new Vue({
  // options
})

// Our data object
var data = { a: 1 }

// The object is added to a Vue instance
var vm = new Vue({
  data: data
})

// Getting the property on the instance
// returns the one from the original data
vm.a == data.a // => true

// Setting the property on the instance
// also affects the original data
vm.a = 2
data.a // => 2

// ... and vice-versa
data.a = 3
vm.a // => 3

v-once

this directive ensures the data-binding is only once and then no longer modifies the element. example:

This will never change: {{ msg }}

v-html

it allows you to insert html code unlike double curly brackets {{}} which are interpreted as text.

<p> Using mustaches: {{ rawHtml }}</p>

<p>Using v-html directive:  </p>

v-bind or just write:

the v-bind directive is used to dynamically modify the attributes of html elements.

<div v-bind:id="dynamicId"></div>

It’s equal to

<div :id="dynamicId"></div>

{{}}

javascript commands can also be inserted in the double curly brackets.

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

v-if

example

<p v-if="seen">Now you see me</p>

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

The v-show directive works in the same way as v-if but there is a difference at the browser level: v-if hides the element while v-show destroys and eventually recreates it.

v-show has no else

v-show doesn’t work with templates.

Specific uses of directives

<a v-bind:[attributeName]="url"> ... </a> variable parameter

<< v-on:[eventName]="doSomething"> ... </> variable parameter

<form v-on:submit.prevent="onSubmit"> ... </> event.preventDefault ()

v-on can also be written with @

<a v-on:click="doSomething"> ... </a>

It’s equal to

<a @click="doSomething"> ... </a>

The computed

They are component options similar to functions (methods) but unlike methods they are not executed if the value does not change because they are stored in the cache. They are very useful in cases where computations need to be saved. eg: if we have to download a heavy list for a list, we can decide to associate it with a completed one so the operation is performed only once.

<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>
Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // a computed getter
    publishedBooksMessage() {
      // `this` points to the vm instance
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}).mount('#computed-basics')

v-for

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

Download Details:

Author: alterani

Source Code: https://github.com/alterani/VuejsEsercizi

#vue #vuejs #javascript

Study Of The Official Documentation Of The Vuejs Library / Framework
2.75 GEEK