Tweet
Tweet

Slide 1

Slide 1 text

Introducing Vue.JS (A casual introduction)

Slide 2

Slide 2 text

What is Vue?

Slide 3

Slide 3 text

What is Vue? It's a JavaScript framework. It has a Virtual DOM and composable, reactive components. Its core is small and works well with companion libraries for routing, global state, and HTTP requests. It's light, fast, and flexible.

Slide 4

Slide 4 text

How is it different from ... • jQuery? (jQuery is not a framework, it's a library) • Knockout? (more modern, lifecycle hooks, better component management, more active development) • AngularJS? (simpler, faster, less opinionated, more flexible, one-way data binding) • React? (faster, simpler tooling, and prefers HTML/CSS over JavaScript for templates) • Ember? (simpler, less opinionated, no need for Ember objects, faster)

Slide 5

Slide 5 text

How is it different from ... Learn more: Vue's internal comparison with other frameworks https://vuejs.org/v2/guide/comparison.html

Slide 6

Slide 6 text

What does the syntax look like?
{{ message }}
new Vue({ el: '#app', data: { message: 'Hello World!' } })

Slide 7

Slide 7 text

What did that just do? • Create a Vue instance that's bound to a div with an id of "app" • Interpret the contents of that div as its template • Read Mustache-style syntax ({{ message }}) and in response echo out the contents of the "message" variable

Slide 8

Slide 8 text

Reactive data

Slide 9

Slide 9 text

Reactive data The data in the previous example is "reactive"—if we change the message it'll update the template: var vm = new Vue({ el: '#app', data: { message: 'Hello World!' } }) // here, or in your console: vm.message = 'Goodbye World!' // ... template will update

Slide 10

Slide 10 text

Data binding with v-model

Message is: {{ message }}

new Vue({ el: '#app', data: { message: '' } })

Slide 11

Slide 11 text

V-model in action

Slide 12

Slide 12 text

Options for templating

Slide 13

Slide 13 text

What else can we do in our templates? • You could write your own render functions and even use JSX • mustache: {{ propertyName }} • v-bind for attributes:
• expressions: {{ signedUp ? 'Cancel' : 'Sign up' }},
• filters: {{ slug | capitalize }}

Slide 14

Slide 14 text

Vue Directives: v-* • v-if / v-else:

{{ message }}

• v-show:

{{ message }}

• v-for:
  • {{ dog.name }}

    • Slide 15

    Slide 15 text

    Vue Directives: v-* (continued) • v-on:event: Do stuff • modifiers: v-on:submit.prevent="onSubmit" • v-bind:class:

    Slide 16

    Slide 16 text

    Methods

    Slide 17

    Slide 17 text

    Methods Defining repeated behavior once, with a name.
    {{ showThing() }}
    new Vue({ el: '#app', data: { message: 'Hello World!' }, methods: { showThing: function () { return `THING SHOWN: ${this.message}` } } })

    Slide 18

    Slide 18 text

    Methods (continued) ... also can be used anywhere an expression is accepted in Vue templates. So this:

    [+]
    {{ counter }}

    new Vue({ el: '#app', data: { counter: 0 } })

    Slide 19

    Slide 19 text

    Methods (continued) ... can become this:

    [+]
    {{ counter }}

    new Vue({ el: '#app', data: { counter: 0 }, methods: { increment: function () { this.counter++ } } })

    Slide 20

    Slide 20 text

    Methods (continued) ... or this:

    [+]
    {{ counter }}

    new Vue({ el: '#app', data: { counter: 0 }, methods: { increment: function (amount) { this.counter += amount } } })

    Slide 21

    Slide 21 text

    Interlude: shortcuts Commonly used directives often have shortcuts. • v-on:click can be represented as @click click me • v-bind:href can be represented as :href

    Slide 22

    Slide 22 text

    The event object in methods
    Do it.
    new Vue({ el: '#app', methods: { doIt: function (event) { console.log(event.target) } } })

    Slide 23

    Slide 23 text

    Computed properties

    Slide 24

    Slide 24 text

    Computed properties Like decorators with magical listeners built in. Any property based on the content of another. What's different between a method and a computed property? Methods run every they're re-requested; computed properties are cached based on their dependencies, and only change when their dependencies change.

    Slide 25

    Slide 25 text

    Computed properties (continued)

    {{ messageReversed }}

    new Vue({ el: '#app', data: { message: 'Howdy!' }, computed: { messageReversed: function () { return this.message.split('').reverse().join('') } } }) // @todo better example

    Slide 26

    Slide 26 text

    Computed properties (continued) Are "get"-only by default, but can be both get and set: // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ... // @todo make this real example

    Slide 27

    Slide 27 text

    Lifecycle hooks • Callback hooks on given events for each component • beforeCreate, created • beforeMounted, mounted • updated • destroyed

    Slide 28

    Slide 28 text

    No content

    Slide 29

    Slide 29 text

    Lifecycle hooks (continued) new Vue({ el: '#app', data: { topics: [] }, mounted: function () { this.topics = ajaxMethodFromElsewheregettingTopics() } })

    Slide 30

    Slide 30 text

    A few caveats (with Vue's reactive model) • If you set props on a instance after it starts up, those props won't be reactive (vm.newProperty = 'please-track-me') • If you're setting a prop of an array/object, you have to use Vue.set in order for it to be tracked/reactive Vue.set(myArray, itemIndex, value)

    Slide 31

    Slide 31 text

    Vue Components

    Slide 32

    Slide 32 text

    Defining and using Vue components Each component is a little Vue instance. Defining a global component named "todo-item": Vue.component('todo-item', { props: ['todo'], template: '
  • {{ todo.text }}
    • ' })

    Slide 33

    Slide 33 text

    Defining and using Vue components You can also define components locally: var TodoItem = { props: ['todo'], template: '
  • {{ todo.text }}
    • ' } new Vue({ // ... components: { 'todo-item': TodoItem } })

    Slide 34

    Slide 34 text

    Vue component caveats • data property must be a method, not an object: Vue.component('whatever', { // ... data: function () { return { propName: true } } }) • If your template is in HTML, you may have to use

    Slide 35

    Slide 35 text

    Props, events, and sync

    Slide 36

    Slide 36 text

    Props, events, and sync Pass property from parent to child using props. Send changes from child to parent using custom events. "Props down, events up"

    Slide 37

    Slide 37 text

    Passing props into a component Pass data into a component as a "prop" on the component instance— sort of like a constructor property. Vue.component('banner', { props: ['message'], template: '
  • {{ message }}
    • ' })

    Slide 38

    Slide 38 text

    Passing dynamic props If the data is pulled from data on the parent, it's "dynamic":

    Slide 39

    Slide 39 text

    Side note: variable casing CamelCase in the JavaScript, kebab-case in HTML.

    Slide 40

    Slide 40 text

    Emitting and listening to custom events Vue.component('terms-of-service', { template: 'Accept', methods: { accept: function () { this.$emit('accept-terms-of-service') } } }) new Vue({ el: '#app', methods: { acceptTOS: function () { // ... } } })

    Slide 41

    Slide 41 text

    Passing data with custom events Vue.component('terms-of-service', { template: 'Accept', methods: { accept: function () { this.$emit('accept-terms-of-service', {'somedata': 'here'}) } } }) new Vue({ el: '#app', methods: { acceptTOS: function (data) { // ... } } })

    Slide 42

    Slide 42 text

    Using a new Vue instance as an event bus var bus = new Vue() // in component A's method bus.$emit('id-selected', 1) // in component B's created hook bus.$on('id-selected', function (id) { // ... })

    Slide 43

    Slide 43 text

    Sync It's old. Don't use it anymore.

    Slide 44

    Slide 44 text

    Slots

    Slide 45

    Slide 45 text

    Simple slot

    Title of child

    Fallback content here

    Title of parent

    This is some original content

    Slide 46

    Slide 46 text

    Named slot

    Here might be a page title

    A paragraph for the main content.

    Slide 47

    Slide 47 text

    Other ways to load Vue vue-cli Simple CLI tool for scaffolding Vue projects https://github.com/vuejs/vue-cli Default templates: - Webpack - Browserify - Simple HTML

    Slide 48

    Slide 48 text

    Not going to cover in depth:

    Slide 49

    Slide 49 text

    Routing Vue-Router: http://router.vuejs.org/ https://github.com/mattstauffer/suggestive

    Slide 50

    Slide 50 text

    State management If event bus isn't good enough, check out Redux or Vuex https://vuex.vuejs.org/

    Slide 51

    Slide 51 text

    Testing Many options, but first recommendation is Karma. https://vuejs.org/v2/guide/unit-testing.html

    Slide 52

    Slide 52 text

    Prerendering For SEO, marketing, etc. you can build pages to HTML: https://github.com/chrisvfritz/prerender-spa-plugin

    Slide 53

    Slide 53 text

    Server side rendering Actual live SSR using vue-server-renderer https://vuejs.org/v2/guide/ssr.html

    Slide 54

    Slide 54 text

    Mixins Like mixins in Ruby or traits in PHP; bring in a group of properties. // define a mixin object var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // -> "hello from mixin!"

    Slide 55

    Slide 55 text

    Single-file syntax (Vueify) // component.vue
    {{ message }}
    export default { data: { message: 'Hello World!' } } .my-component { color: lighten(#175023, 20%); }

    Slide 56

    Slide 56 text

    Conclusion