VUE.JS th e progressiv e javascrip t framewor k VUE.JS "Vue is - - PowerPoint PPT Presentation

SPRING 2020 CS498RK

VUE.JS

the progressive javascript framework

VUE.JS

"Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. 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 when used in combination with modern tooling and supporting libraries."

https://vuejs.org/v2/guide/

DECLARATIVE RENDERING

var app = new Vue({ el: '#app', data: function () { return { message: 'Hello Vue!', title: 'You loaded this page on ' + new Date().toLocaleString() } } }) <div id="app"> <p> {{ message }} </p> <p> <span v-bind:title="title"> Hover over to see dynamic title </span> </p> </div>

CodePen

https://vuejs.org/v2/guide/

text interpolation directive

CONDITIONALS AND LOOPS

var app = new Vue({ el: '#app', data: function () { return { show: true, items: [ { text: 'Foo' }, { text: 'Bar' }, { text: 'Baz' } ] } }, methods: { toggle() { this.show = !this.show } } }) <div id="app"> <div> <span v-if="show">Hello there!</span> <button v-on:click="toggle"> Toggle </button> </div> <ol> <li v-for="item in items"> {{ item.text }} </li> </ol> </div>

CodePen

https://vuejs.org/v2/guide/

v- directives

HANDLING USER INPUT

https://vuejs.org/v2/guide/

var app = new Vue({ el: '#app', data: function () { return { text: 'Do you wanna see a magic trick?', button: 'Magic!' } }, methods: { magic() { this.text = this.text.split('').reverse().join('') this.button = this.button.split('').reverse().join('') } } }) <div id="app"> <div> <p>{{ text }}</p> <button v-on:click="magic">{{ button }}</button> </div> <div> <input v-model="text"> </div> </div>

CodePen

COMPOSITION

var app = new Vue({ el: '#app', data: function () { return { todos: [ { id: 0, text: 'Work it' }, { id: 1, text: 'Make it' }, { id: 2, text: 'Do it' } ] } } }) Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' })

CodePen

https://vuejs.org/v2/guide/ <div id="app"> <ol> <todo-item v-for="item in todos" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div >

TEMPLATE SYNTAX

Text

<span>Message: {{ msg }}</span> <span v-html="rawHtml"></span> <div v-bind:id="myId"></div> {{ ok ? 'YES' : 'NO' }} <p v-if="show">show is True</p>

Raw HTML Attributes Directives Expressions

SHORTHANDS

<!-- full syntax --> <a v-on:click="doSomething"> ... </a> <!-- shorthand --> <a @click="doSomething"> ... </a> <!-- full syntax --> <a v-bind:href="url"> ... </a> <!-- shorthand --> <a :href="url"> ... </a>

v-bind v-on

use : use @

beforeCreate() beforeMount() created()

runs at the very initialization of your component. data has not been made reactive, and events have not been set up yet.

mounted() beforeUpdate() updated() beforeDestroy() destroyed()

you will be able to access reactive data and events are active. Templates and Virtual DOM have not yet been mounted or rendered. runs right before the initial render happens and after the template or render functions have been compiled you will have full access to the reactive component, templates, and rendered DOM (via. this. $el) runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered. runs after data changes on your component and the DOM re-renders fired right before teardown there’s pretty much nothing left on your component

https://alligator.io/vuejs/component-lifecycle/

COMPUTED PROPERTIES

<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } })

PASSING DATA

Child Parent

Use Props! Use $emit OR Pass Handlers as Props (Like React)

SLOTS

<alert-box> Something bad happened. </alert-box>

Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot> </div> ` })

demo

https://gitlab.com/uiuc-web- programming/vue-demo

RESOURCES

Vue.js Guide https://vuejs.org/v2/guide/ Vue CLI https://cli.vuejs.org/

NEXT CLASS: GUEST LECTURE: SCALING WITH AWS

https://uiuc-web-programming.gitlab.io/sp20/