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

CS498RK SPRING 2020 VUE.JS th e progressiv e javascrip t framewor k

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 <div id="app"> var app = new Vue({ <p> el: '#app', directiv e {{ message }} data: function () { </p> return { <p> message: 'Hello Vue!', <span v-bind:title="title"> title: 'You loaded this page on Hover over to see dynamic title ' + new Date().toLocaleString() </span> } </p> } </div> }) CodePen tex t interpolatio n https://vuejs.org/v2/guide/

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

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

COMPOSITION Vue.component('todo-item', { <div id="app"> props: ['todo'], <ol> template: '<li>{{ todo.text }}</li>' <todo-item }) v-for="item in todos" v-bind:todo="item" v-bind:key="item.id" var app = new Vue({ ></todo-item> el: '#app', </ol> data: function () { </div > return { todos: [ { id: 0, text: 'Work it' }, { id: 1, text: 'Make it' }, { id: 2, text: 'Do it' } CodePen ] } } }) https://vuejs.org/v2/guide/

TEMPLATE SYNTAX Text <span>Message: {{ msg }}</span> Raw HTML <span v-html="rawHtml"></span> Attributes <div v-bind:id="myId"></div> Directives <p v-if="show">show is True</p> Expressions {{ ok ? 'YES' : 'NO' }}

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

runs at the very initialization of your component. data has not been made reactive, beforeCreate() and events have not been set up yet. you will be able to access reactive data and events are active. Templates and Virtual DOM created() have not yet been mounted or rendered. runs right before the initial render happens and after the template or render functions have beforeMount() been compiled you will have full access to the reactive component, templates, and rendered DOM (via. this. mounted() $el) runs after data changes on your component and the update cycle begins, right before the beforeUpdate() DOM is patched and re-rendered. updated() runs after data changes on your component and the DOM re-renders beforeDestroy() fired right before teardown destroyed() 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 Use Props ! Parent Child 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> ` })

dem o 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/