16 Matching Annotations
  1. Mar 2021
    1. Assuming you're using vue-router (and you probably should be), then you'll want to use the beforeRouteLeave guard. The documentation even gives an example of this exact situation: beforeRouteLeave (to, from , next) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) } }

      A nice example for how to prompt a user to save unsaved changes before changing routes.

  2. Apr 2020
    1. SPAs are incredibly common, popularised by client-side web frameworks like Angular, React and Vue.js.


      • popularised by client-side web frameworks like Angular, React and Vue.js
      • real difference between the MVP app is shifting most of its work on the client side
      • there's client side MVC, MVVM (model-view-view-model) and FRP (functional reactive programming)

      Angular - client side MVC framework following its pattern, except it's running inside the users web browser.

      React - implementation of FRP. A little more flexible, but more concerned with state change events in data (often using some event store like Redux)

    1. // _.debounce is a function provided by lodash to limit how // often a particularly expensive operation can be run. // In this case, we want to limit how often we access // yesno.wtf/api, waiting until the user has completely // finished typing before making the ajax request. To learn // more about the _.debounce function (and its cousin // _.throttle), visit: https://lodash.com/docs#debounce

      Seems like it could be useful at some point.

    2. Computed vs Watched Property

      Really useful example of explaining what not to do and how to simplify code.

    1. The components located under src/components are less likely to be used in a route whereas components located under src/views will be used by at least one route.
  3. Mar 2020
    1. Instead of mutating the state, actions commit mutations. Actions can contain arbitrary asynchronous operations.

      So for example an action may be a combination of mutation calls and async api calls.

    1. When you create a vue component you must give it a name:

      export default {
        name: "TodoItem",
    2. The following binds a class on a condition in order to apply conditional styling:

      <div class="todo-item" v-bind:class="{'is-complete':todo.completed}">
    3. Styling can be scoped to just the component with the scope denotation below:

      <style scope>
    4. When looping in the template the variable must be unique so we use v-bind:key and give it the id of the object as shown below:

      <div v-bind:key="todo.id" v-for="todo in todos">
    5. Really nice vue plugin for chrome dev tools-looks like it's worth installing.

  4. Jul 2019
    1. However using the proposed syntax it's easy to see how big components could have logic broken up into smaller reusable pieces, moved into separate files if necessary, leaving you with small, easy-to-understand functions and components.

      Benefits are evident and good, imho. A big improvement in code organization and separation of concerns.

      Just, I think the new syntax suffers from the loss of, as you said, that easy-to-understand-separation-by-type, that is appealing and clearer to newcomers and people that deal with pretty simple components. The component code is divided in three different sections (State, Computed, Methods) that are easy to scroll and to keep conceptually segregated.

      That's one appealing aspect for beginners, helping them to grab the main concepts and organization of Vue. Also helps giving some simpler view to who not too confident with JS and its patterns. With this "separation by function" the beginner is more disoriented since has to import state & computed as functions to place in specific points. Places that they need to know/remember, rather than just filling up the three object provided in module.exports (and I suppose there are packages that build a basic .vue template for you; maybe vue-cli itself too, that people get used to blindly use).

      So in the end the new syntax gives in my opinion a lot more power in modelling, but requires to accept some compromises with the somehow more verbose syntax (const everywhere; return & export providing private/public but necessarily longer to write) and with the slightly higher shadiness of its main concepts.

      Still, a good & efficient & clear documentation, as it was on Vuejs.org until today, will for sure easily compensate to these drawbacks and bring the most out of this new -more OOP- approach. For me also class could be use here, but I like trying to stay compatible using the prototypical approach (maybe also less overhead? Dunno, I'm not so deeply in the JS world).

      I am actually pretty curious to see how it is gonna evolve. And I am glad I didn't engage with Vue too much yet... 😜

  5. Sep 2018
  6. Mar 2017
    1. You may have been wondering where the concept of “controllers” lives in the Vue world and the answer is: there are no controllers. Your custom logic for a component would be split among these lifecycle hooks.

      Lifecycle hooks, not controllers.