Jack Downson

Jack Downson

1611018720

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

What is GEEK

Buddha Community

Study Of The Official Documentation Of The Vuejs Library / Framework

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Benefits of Taking Education Loan to Study Abroad : edu-visa

As the cost of education is getting higher rapidly, a lot of students have to give up on their dreams to study abroad. Canada is known as the best country to study abroad for Indian students. You will need approximately between INR 12,50,000 to 19,00,000 a year if you’re an Indian citizen and looking forward to studying in Canada…Read more

This is image title

#best course to study abroad #education loan to study abroad #scholarships to study abroad #study abroad #study abroad admission process #study abroad programs

Jack Downson

Jack Downson

1611018720

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

Best Android Mobile App Development Frameworks

Are you looking for the best Android app development frameworks? Get the best Android app development frameworks that help to build the top-notch Android mobile app.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#best android mobile app development frameworks #top mobile app development frameworks #android app development frameworks #top frameworks for android app development #most popular android app development frameworks #app development frameworks

Oleta  Orn

Oleta Orn

1599030441

Vue is an amazing framework for 2020. Why?

Image for post

An amazing conference regarding the Vue framework was held in the US in the first week of March 2020 for two fantastic days. Some spectacular presentations were given during that time regarding the design, feature, and application tools of the framework. One of the most eye gazing things was that combining vue.js development services, professionals, and others as there were more than 900 attendees at the event. The brand new composition API for the Vue3 was the talk of the town.

All this leads to the conclusion that Vue might have an opportunity to be the most amazing for the year 2020. While the first quarter has been significantly better for it, let’s look at some of the characteristics which make the Vue an amazing framework for 2020.

Friendly learning curve & ease of integration

Ask any Vue.js developer and they will tell you that how working with this framework is very relaxing and even if you are a beginner, fundamental knowledge of HTML, CSS, and Javascript is good enough to build a simple application.

Do you know more than 75% of Vue.js development services just prefer it because of its ease of integration? This means you can hire Vue.js developers to build the application right from the scratch or can get an existing application accommodated to your requirements.

Although the inbuilt guide and documentation of the Vue framework make it sufficient for you to start coding.

This might interest you to know that Vue.js is for progressive web applications which also support libraries like Vue router, Vuex, Vue Test Utils, Vue-dev tools, Vue CLI for performing various functions.

It may seem a bit exaggerated but the truth is whether its loader, renderer, component caching or asset preload, etc every tool, every component in this framework performs very efficiently.

Top reasons why Vue.js is becoming the most trending JS-based framework

As noted above how Vue.js development services state that creating an application with Vue is very simple. So now we are going to look briefly into some of the top reasons why Vue.js development companies favor it from the stack of all JS-based frameworks.

Adaptable development environment: Very beneficial to the large scale projects, now and again Vue.js has proved that it adjusts with the components of other applications and develops it in remarkably less time compared to other JS-frameworks. Have you wondered why people are using it comprehensively?

Supported Libraries: Vue.js provides support libraries for any possible difficulties a developer might face. As Vue Router is for routing, Vuex for state management, Vue Test Utils for unit testing, Vue-dev tools for debugging, and Vue CLI for plugin management. And the best part here is this all inbuilt are accessible 24/7. Vue.js developer can rectify or alter the coding with the help of these support libraries.

Great Performance: For developing mobile apps, this framework tends to perform well in comparison to other frameworks. The speed of the loading page is significantly better than any other Javascript. Whether it’s a website or any other application, reliability and great performance is always the best advantage of the framework.

Community meets: Live events or meetings are organized regularly so that the Vue.js developer can get the regular updates of the features and benefits of the framework. This community is growing bigger day by day and is managed by Evan You, the developer of Vue.js framework himself.

#vue #vuejs-development-company #vuejs-developer #vuejs #vuejs-development