Scribd
Upload
22 views28 pages

Vuejs (Autosaved)

Vue.js is a JavaScript framework for building user interfaces that focuses on the view layer. It offers directives for binding element attributes to data, composing reusable components, and routing. Components allow encapsulation and reuse of code. Events allow communication between components. Axios enables communication between the frontend and backend via HTTP requests.

Uploaded by

LeHieu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views28 pages

Vuejs (Autosaved)

Vue.js is a JavaScript framework for building user interfaces that focuses on the view layer. It offers directives for binding element attributes to data, composing reusable components, and routing. Components allow encapsulation and reuse of code. Events allow communication between components. Axios enables communication between the frontend and backend via HTTP requests.

Uploaded by

LeHieu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

Vue.

js

• Vue is more simple and flexible

• The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or
existing projects

• On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications
Below is a diagram for the instance lifecycle.
You don’t need to fully understand everything going on
right now, but as you learn and build more, it will be a useful reference.
Vue.js Directives

• Directives are the part of Vue.js that attach special meaning and behavior to plain html elements on the page
Vue.js V-model
• v-model directive to make two way binding between the HTML element and
the data attribute it refers to in the Vue JavaScript code
Vue.js Conditionals and Loops

• v-if directive can be used to test some conditions over the JavaScript object data

• v-else directive can be used when the conditions on the v-if fails

• v-else-if directive can be used much like you would use else-if clauses in JavaScript
Vue.js Directives Summary

• v-model: used to create a two way binding between the element and the data

• v-show: used to conditionally display an element (css based)

• v-if, v-else, v-else-if: used to conditionally render an element

• v-for: iterate over a range, an array, an object, or an array of objects

• v-on: listen to various DOM events (click, keyup, submit, etc..)

• v-bind: used to dynamically bind one or more attributes, or a component prop, to an expression

• v-text: same as {{ interpolation }} and updates the element’s textContent


Vue.js Components
• Components are reusable structures with encapsulated functionalities.
That is, elements that have html, css and javascript encapsulated and that can be reused either within the same
project or even in others projects

• Components are reusable Vue instances with a name: in this case, <button-counter>.


We can use this component as a custom element inside a root Vue instance created with new Vue
• here are two types of component registration: global and local.
So far, we’ve only registered components globally, using Vue.component:
Vue communication between components
Vue communication between components
Father -> Son
• Father pass value to son component:

• Son receive the value of the Father component


Vue communication between components
• Son -> Father
• Son emit a event: The functions need 2 param is name of function in father component and value
Vue communication between components
Son -> Father
• Father listener the event of son and call another function:

<todo-list v-bind:tarefas="terafas" v-on:check="checkTerafa” @remover="age = $event"></todo-list>


Vue communication between components
Son1 -> Father -> Son2
• Father listener the event of son1 and call to Son2:
All props form a one-way-down binding between the child property and the parent one: when the parent property
updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally
mutating the parent’s state, which can make your app’s data flow harder to understand.
Undirection data flow ***
Warning if using this way
Define a variable local data in child Component has value same value of prop from father.
Usign computed property, define it in child component https://vuejs.org/v2/guide/computed.html#Computed-Setter
Vue communication between components
Calling between two component independent.
Vue.js Routes
Vue.js Routes
• Routers is the way you can “change” the page at single-page applications

• At the main.js:

• Import the vue-router library,

• Import the routes.js file

• Declare Vue.use (VueRouter)

• Create a VueRouter variable and, define this variable at app component

• Create a project and install the vue-router library


+Add "vue-router": "^3.0.6" in dependencies of package.json
Npm install
+Npm install vue-router --save
npm run dev
Vue.js Routes
Sometimes it is more convenient to identify a route with a name,
especially when linking to a route or performing navigations.
You can give a route a name in the routes options while creating the Router instance:
Vue.js connecting with the back-end
Install Axios:

npm install
npm install axios --save
Vue.js connecting with the back-end
• Front-end:
• Create a file and declare an AXIOS constant and import it on
App.vue component
• Axios is a HTTP client write base on Promises
Vue.js connecting with the back-end
Front-end:
• Declaredatatoholdtheinformation,a new object and an array
of news.
Vue.js Tools
Vue.js 42

Vue.js Tools
Visual Studio Code
• Syntax Highlight
• Compiler
• Integrated Terminal

         
Vue Extensions
For development install Vue.js devtools on Firefox or Chrome
References
• https://vuejs.org/v2/guide/
• https://www.devmedia.com.br/vue-js-tutorial/ 38042
• https://www.shopify.com/partners/blog/vuejs- tutorial
• https://github.com/vuejs-templates/webpack
• http://www.vuejs-brasil.com.br/crie-rapidamente-um-projeto-vue-com-vue-cli-e-browserify/
• https://medium.com/@thiagorossener/como-fazer- um-hello-world-com-vue-js-2-62ea708c1399
References
• http://vegibit.com/vue-js-directives/
• https://alligator.io/vuejs/rest-api-axios/
• https://www.thepolyglotdeveloper.com/2017/10/ consume-api-data-http-vuejs-web-application/
• https://medium.com/codingthesmartway-com- blog/vue-js-2-state-management-with-vuex- introduction-db26cb495113
• https://vuejsdevelopers.com/2017/04/01/vue-js- prerendering-node-laravel/

You might also like