Академический Документы
Профессиональный Документы
Культура Документы
js
Marco Monteiro
Summary
1. Concepts
2. Vue instance
Marco Monteiro 3
Vue.js
} Framework for building user interfaces and
simplifying SPA development
} MVVM (Model-View View-Model) pattern
} Adoptable
} Core library focused on view layer only
} Can integrate other libraries or projects to create
full SPA applications
} Communication; Routing; State Management; Testing;
Animations; etc.
} ”Easy to learn, difficult to master”
Marco Monteiro Vue.js (1/4) 4
Main paradigm
} UI rendering is not done directly (using DOM
or jQuery), but by using HTML-based
declarative templates and manipulating the
application model
} It is the Vue.js framework which is responsible
for the UI rendering. Vue.js binds the rendered
DOM to the underlying model data
} Similar paradigm is used by Angular, React, and
most SPA frameworks
} v-model directive
} Two-way binding directive
} Only for UI elements that allow user input (form
inputs). <input v-model="message">
Marco Monteiro 15
Vue Instances
} Vue instances are the core of Vue applications
} Every Vue application starts by creating a
new Vue instance with the Vue function
var vm = new Vue({
// options
})
new Vue({
data: { a: 1 },
created: function () {
console.log('Vue instance was just created')
}
})
Marco Monteiro 31
Bibliography
} Vue.js, https://vuejs.org
} Anthony Gore, Exploring Vue.js: Reactive Two-Way
Data Binding, https://medium.com/js-dojo/exploring-
vue-js-reactive-two-way-data-binding-da533d0c4554
} vue-devtools, https://github.com/vuejs/vue-devtools
} Laracasts, “Learn Vue 2: Step By Step”,
https://laracasts.com/series/learn-vue-2-step-by-step