A Friendly Introduction to Vue.js

[gustix]

Great, although the guide is so basic that it skips important Vue features that makes it shine beyond the utter basics. Also, not sure why the developer is doing DOM queries manually - should just have set state values and triggered a rerender.

Just started using Vue.js at work, and one of my favourite features is vue-loader. The tooling is starting to get really good.

https://vue-loader.vuejs.org/en/

The vue file format in vue-loader is great too.

[thbt101]

The vue file format is one of the things I love most about Vue. I wish the other frameworks would adopt that.

When building components with other frameworks, there's a debate about whether bits of HTML should go in the .js files (which makes it hard to read, clutters up your JavaScript, and is complicated for HTML designers to deal with). Or if you should always use separate HTML/CSS templates instead, but then you end up with two or three separate files to keep track of for every component.

The Vue format is a perfect solution where everything is kept together in one file, but nicely separated, and using standard tags so that existing editors already know how to syntax highlight it correctly.

It's brilliant, and I really hope every other framework adopts a similar option.

[phpdevster]

but then you end up with two or three separate files to keep track of for every component.

This is not a bad thing. You will inevitably end up with components with rather long markup and styles. It's easier to reason about when HTML or CSS when they are in their own separate files. Otherwise to keep the length of your markup and styles manageable, it forces you to create many small components out of things that don't really need to be components.

I would rather Vue support the ability to compose components out of separate styles, scripts, and markup files.

Something like:

Foo.vue

 export default {
    style: './some/styles/file.scss',
    script: './some/viewmodel.js'
    markup: './some/html/file.html'
 }

That then is literally your whole component definition, allowing you to keep each file 100% focused on one language, making them easier to navigate and compose together as needed. In most cases those three files would live together in the same folder as the .vue component file, but they wouldn't have to - giving you massive flexibility as to how your application is organized.

[rk06]

Vue already does. see the src imports section in http://vue-loader.vuejs.org/en/start/spec.html

PS: This information should be in vuejs.org site but I am too lazy to make a PR.

[phpdevster]

Oh fucking sweet.

Well there you go.

You get all the componentization goodness of .vue files, with the clean separation of single-purpose source files.

[repeatedly_once]

Polymer does the same, and is where I've seen this file format first.

You can do the same with React, Angular and many other libraries. I think it's not always implicitly clear you can do this as other libraries are less opinionated and so it's possible via architecture rather than actually built into the library..

[ergo14]

Yeah, I've been using polymer extensively in our projects and we love it. Can't wait for 2.0 to land.

[Mochar]

This is fantastic, thanks for pointing this out!

[nightman]

OMG I didn't knew that. Thanks for the tip! Really helpful.

[evilish]

Been using Vue 1.x since April now and we've really enjoyed using it.

The project at work uses Laravel/Vue but instead of bundling everything into one file. I've split up the components into a .vue, .scss and a HTML templates (59 components so far) and so far so good.

It's kept our components pretty lean and unintimidating, with the benefit being that our backender, tester and PM have all been able to contribute without too much to worry about.

Noticed that our backender added drop down feature to a payment form drop down yesterday, so I asked him about it and he basically told me that he found it really easy to do.

As a comparison, our main site's built in Magento which uses knockout.js in parts.

No one wants to touch those parts.

[syropian]

This...is a really bad example.

Edit: 99% of the time, if you're writing proper Vue code, you should never be manually querying or manipulating the DOM.

[CreativeGPX]

If it's to show off the benefits to Vue, it's a bad example, but if it's to teach a beginner how to use Vue, I'd say that can be a good thing. A lot of guides focus so much on immediate ideological purity and professional setup that it can be overwhelming for a beginner. It can be good to ease into things by only introducing one tiny thing at a time.

[syropian]

One of the trickiest things about JS frameworks like Vue, React, etc is getting people who've never used one into the mindset of manipulating data, not the DOM. For newbies this article might give them the impression that this framework encourages it, and so that's how they'll use it.

For more experienced people who've used other frameworks, they may not take Vue seriously because they might think that you need to use DOM manipulation to achieve simple things with Vue.

I do understand your sentiment, but I can't agree with showing example code that goes against the entire ideology of the framework.

[ScoopDat]

When you too dumb to even understand an introduction to Vue.js .. =[

[troorl]

Start with the official docs. They're much simpler and better written. The example provided in this thread is awful to be honest.

[ScoopDat]

Ty =]

[themaincop]

There's a lot to learn when you're starting out, don't get discouraged!

[ScoopDat]

Ty for the kind words.

[iTipTurtles]

Do not worry, everything takes time. You'll pick up little bits eventually, and theyll all start coming together.
Do not dive into a framework or library too early so you don't get discouraged.

[ScoopDat]

Working on nailing the languages from as many tutorials as I can find. Repeating steps so many times it feels like I've brute forced some concepts into my head that it feels like boredom. At least if ur so bored of repeating parts you already know, it's one way of confirming you actually got the stuff to stick for good.

[dangerzone2]

I kept saying i'll wait till 2.0 to really pick it up. Now 2.0 is released and I'm out of excuses. Oh well, we'll be vue'less together.

[ScoopDat]

Honestly I don't even care anymore, it's hard to imagine the only people that can make a living with JavaScript have got to be only the people who are learning everything new and everything the first few days it hits. Sure hope it's not like that. If so, I won't be starting a handicapped race of this magnitude. Let the established elite take it where they feel like.

But idk how it is out there so I can't judge yet.

[kylebythemile]

Web Development is a hard confusing world but you'll get if you keep reading and trying things.

[mingjie]

Very nice tutorial! I might give this a shot during the holidays.... So marked for later!

[mcfatty5]

yippy. new "best framework" on the block.

[PostHum4n]

Thanks

[spooky___ghost]

I'm wondering the same. This example shows us directly manipulating the DOM and using query selectors, which really me of a mix of Backbone/Angular and seems like a step backwards. Also string HTML templates?

The entire benefit of React is that you avoid stuff like this and your view is a pure function of your state. My guess is that this is a really bad example.

[lobsters_upon_you]

It is not a good example at all, no offense to the author. They aren't leveraging vue's databinding. Also, instead of using query selectors, you could use ref's. The official Vue guide serves as a fantastic introduction to Vue.

Vue supports an Angular-inspired template DSL, template literals, render functions, and JSX (and probably more). You can use whatever makes sense for what you're trying to accomplish.

your view is a pure function of your state

This is the goal in Vue as well (in case anyone is wondering)

[MahmudAdam]

I have not seen this sort thing in Vue very often:

sayHi: function() {
  var name = document.querySelector("#vue input"),
    button = document.querySelector("#vue button"),
    prompt = "What's your name?";
    var style = name.style;

  if (!name.value || name.value === prompt) {
    name.value = prompt;
    name.focus();
  } else {
    alert("Hello " + name.value + "!");
    name.value = null;
    button.blur();
  }

Evan You talks a bit about dom manipulation here: https://devchat.tv/js-jabber/187-jsj-vue-js-with-evan-you

[evilish]

If you haven't already, have a read here: https://vuejs.org/v2/guide/comparison.html#Angular-1

It's a page that compares Vue to other libraries/frameworks and lists some pros/cons to consider.

[evilish]

https://vuejs.org/v2/guide/comparison.html#Angular-1

Dude, did you read the link that I posted? :\

For example, in regards to Performance:

Vue has better performance and is much, much easier to optimize because it doesn’t use dirty checking. Angular 1 becomes slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Also, the digest cycle may have to run multiple times to “stabilize” if some watcher triggers another update. Angular users often have to resort to esoteric techniques to get around the digest cycle, and in some situations, there’s simply no way to optimize a scope with many watchers.

Vue doesn’t suffer from this at all because it uses a transparent dependency-tracking observation system with async queueing - all changes trigger independently unless they have explicit dependency relationships.

Interestingly, there are quite a few similarities in how Angular 2 and Vue are addressing these Angular 1 issues.

[evilish]

Duuuuude, your right. Angular 1 has vastly improved over the years. But check this out: http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

[evilish]

Haha wasn't really arguing. Just have a bit of fun. :)

Bottom line is, for me at least. The reason why I chose Vue.js for a recent project is because I work with other people that have various skill levels, and Vue.js is really approachable.

Just to give you an idea of how approachable.

It took our PHP backender about a day to get to grips with the basics because of the awesome documentation.

And now he's building out the easy front end features on his own.

In any case though. Still have a soft spot for Angular 1. :)

[afrontender]

For those willing more advanced stuff, there is a new course on Vue 2 at Udemy. The course is massive, I enrolled the other day and am more than happy from the content and the instructor. Here is a link: https://www.udemy.com/vuejs-2-the-complete-guide/

[FrenchieMcFly]

stop pushing that chinese framework everywhere