Coding

GETTING STARTED with VueJS | VueJS | Learning the Basics

  • 00:00:01 welcome welcome to this video great to
  • 00:00:04 have you here this video is about UJS
  • 00:00:07 and I'm going to say it right away I
  • 00:00:08 absolutely love vue.js it's a great
  • 00:00:11 JavaScript framework in this video we're
  • 00:00:13 going to dive into what it actually is
  • 00:00:16 before we then start creating our first
  • 00:00:18 app right away so let's start so what is
  • 00:00:21 view jeaious its creators describe it as
  • 00:00:25 a library for creating reactive
  • 00:00:27 components in modern web interfaces
  • 00:00:29 certainly a nice phrase but what does it
  • 00:00:31 mean it actually means that view chess
  • 00:00:34 is a framework you would use to make
  • 00:00:36 your app more reactive to control parts
  • 00:00:38 of your Dom why review chess to
  • 00:00:40 dynamically output data there to listen
  • 00:00:42 and react to user events to bring that
  • 00:00:45 mobile app feeling to a desktop app so
  • 00:00:49 making your app reactive is a very first
  • 00:00:51 important takeaway you could all think
  • 00:00:54 of view chess as kind of a replacement
  • 00:00:57 for jQuery though you have to treat this
  • 00:01:00 argument carefully it's much much more
  • 00:01:03 than that it's actually more comparable
  • 00:01:05 to frameworks like angular 2 and react
  • 00:01:08 es but if you want to use it as a simple
  • 00:01:10 replacement for jQuery you could do that
  • 00:01:12 it gives you access to the Dom it makes
  • 00:01:14 outputting data very very easy it fixes
  • 00:01:17 many of the flaws jQuery has but again
  • 00:01:20 that really is kind of an understatement
  • 00:01:22 it's much more than that it's really
  • 00:01:26 great at controlling the DOM and with
  • 00:01:28 that I mean not just giving you access
  • 00:01:30 to some element now keeping it in sync
  • 00:01:33 on its own which means you have some
  • 00:01:35 data in your JavaScript code you change
  • 00:01:37 it there you output it somewhere the DOM
  • 00:01:39 and it gets refreshed automatically you
  • 00:01:42 click a button and you'll listen to that
  • 00:01:44 event it gets executed automatically it
  • 00:01:47 makes this reactive interactive approach
  • 00:01:50 really easy well and finally you can
  • 00:01:54 build single page applications with it
  • 00:01:56 you aren't limited to creating simple
  • 00:01:59 widgets or controlling parts of your web
  • 00:02:01 page you can control the whole
  • 00:02:03 application with view chairs it goes all
  • 00:02:06 the way up to big enterprise level
  • 00:02:08 single page applications so that is view
  • 00:02:12 chairs comparable to real
  • 00:02:14 act in angular2 but really in my opinion
  • 00:02:16 like the perfect combination taking only
  • 00:02:19 the best pieces of both frameworks and
  • 00:02:21 therefore really awesome now that we
  • 00:02:24 know what it is let's dive into it and
  • 00:02:26 create our first application in order to
  • 00:02:30 get started with vue.js visiting the
  • 00:02:32 official page is probably a good idea so
  • 00:02:35 I am on you chestal org here we can
  • 00:02:37 click on get started sounds like a good
  • 00:02:39 idea if we want to get started well
  • 00:02:41 we're actually landing on the
  • 00:02:42 introduction page but let's switch to
  • 00:02:44 the installation page now there are
  • 00:02:47 different options on how you may install
  • 00:02:49 view chairs it depends on whether you
  • 00:02:51 want to set up a more complex workflow
  • 00:02:53 using let's say web pack or if you want
  • 00:02:55 to simply import a script and get
  • 00:02:57 started with it right away now for our
  • 00:03:00 first steps I'll choose the easiest and
  • 00:03:02 quickest way of simply importing a
  • 00:03:05 script and I will choose a CDN year so
  • 00:03:07 that I don't have to download and store
  • 00:03:09 it locally and you may choose whichever
  • 00:03:12 link you want I'm going to choose the
  • 00:03:14 first one from unpackaged here and with
  • 00:03:16 that link I will now head over to Jay as
  • 00:03:18 fiddle jsfiddle if you didn't know is
  • 00:03:21 kind of like a online editor where you
  • 00:03:24 can write simple HTML Javascript and CSS
  • 00:03:26 code and see it run there instantly
  • 00:03:29 really nice to try out some things you
  • 00:03:31 can also share it obviously not what you
  • 00:03:33 would choose for a real project but I
  • 00:03:36 will also have videos on how to set up a
  • 00:03:38 more realistic workflow but for learning
  • 00:03:42 and getting started with view chairs
  • 00:03:43 this is perfect so in there let's first
  • 00:03:46 go to the HTML section make it a bit
  • 00:03:48 bigger and add a script tag here you can
  • 00:03:51 simply type script and then hit tab to
  • 00:03:53 automatically expand it here we simply
  • 00:03:55 import the script we just grabbed from
  • 00:03:58 the getting started installation page
  • 00:03:59 and you may remove this version number
  • 00:04:02 two always fetch the latest version now
  • 00:04:04 with that we're having access to view
  • 00:04:07 chess now in order to use it let me
  • 00:04:09 create a div here with hash tag I app to
  • 00:04:12 give it an idea of app after hitting tab
  • 00:04:14 and then there a 1/2 a paragraph now in
  • 00:04:17 that paragraph I want to output hello
  • 00:04:18 world but typing it like this is really
  • 00:04:21 not the view chair style well that is in
  • 00:04:24 JavaScript at all right so let's
  • 00:04:27 that say I want to output this
  • 00:04:29 dynamically so my HTML code is a simple
  • 00:04:33 div with a paragraph which is empty now
  • 00:04:36 let's switch to JavaScript and let's
  • 00:04:38 imagine there would have kind of a
  • 00:04:40 result of some operation which you want
  • 00:04:42 to output in our HTML code in the end so
  • 00:04:44 in your running application to use view
  • 00:04:48 chess we have to create a view instance
  • 00:04:51 first so we have to instantiate our view
  • 00:04:54 object we can do this with the normal
  • 00:04:57 new keyword and then we have this view
  • 00:04:59 object which is provided to us because
  • 00:05:02 we have this script import appear now
  • 00:05:05 I'm not storing this view instance in
  • 00:05:07 any variable because I'm not interacting
  • 00:05:10 with the instance itself but it still
  • 00:05:12 gets created because I have two new
  • 00:05:14 keyword now right now this view instance
  • 00:05:17 isn't doing anything it exists but it
  • 00:05:19 isn't doing much we have to pass an
  • 00:05:22 object in order to configure it and to
  • 00:05:24 use it and in this object we have a lot
  • 00:05:27 of different properties and methods we
  • 00:05:29 can use to find unity we use this view
  • 00:05:32 instance which is the core of our view
  • 00:05:35 J's application in the way we need to
  • 00:05:38 use it now let's start simple with one
  • 00:05:41 property you will often use the L
  • 00:05:44 property this stands for element and it
  • 00:05:47 tells view J's which element in your Dom
  • 00:05:51 so in the HTML code up there which
  • 00:05:54 element do you want to control through
  • 00:05:56 view J s behind-the-scenes that element
  • 00:05:59 will become the template of this view
  • 00:06:01 instance and it will be this template
  • 00:06:03 which is then rendered to the DOM and 2d
  • 00:06:07 what the user sees in the end by view J
  • 00:06:09 s so what do we want to control well D
  • 00:06:13 div with the ID of app sounds like a
  • 00:06:16 good target so this element here takes a
  • 00:06:20 string which works like a CSS selector
  • 00:06:22 and since I want to select this div with
  • 00:06:24 the ID app I just use hash tag app to do
  • 00:06:27 so now we get control of this div and
  • 00:06:31 with that control we now want to have
  • 00:06:34 some data we can output there for that
  • 00:06:37 we get this data property like L this is
  • 00:06:40 kind
  • 00:06:40 a reserved word a reserved property
  • 00:06:43 beauteous will recognize and data
  • 00:06:45 actually as an object so where L was a
  • 00:06:48 string this is an object and then this
  • 00:06:50 object we store all the data we want to
  • 00:06:53 work with in this view instance and this
  • 00:06:56 view instance again is really just a
  • 00:06:58 contained piece of code controlling a
  • 00:07:02 part or whole everything of our doum
  • 00:07:04 doum whatever we want so you're
  • 00:07:06 controlling this div with the ID app now
  • 00:07:09 in here let's say we want to have a
  • 00:07:11 property in this data object and this
  • 00:07:14 name is totally up to you so I'll choose
  • 00:07:16 title and I will say hello world here
  • 00:07:18 now with that title set up we now want
  • 00:07:22 to output it here in our Dom in our HTML
  • 00:07:25 code which again behind the scenes
  • 00:07:27 became the template of this view
  • 00:07:29 instance well this view instance has the
  • 00:07:32 title data so how can we output it view
  • 00:07:35 j/s gives us a certain text you may know
  • 00:07:37 from other languages we use double curly
  • 00:07:40 braces opening and closing and in
  • 00:07:42 between we can interpolate we can output
  • 00:07:45 some data so here we can simply refer to
  • 00:07:48 title referring to our title stored in
  • 00:07:51 the data object again data is a reserved
  • 00:07:54 word in our view instance so vue.js
  • 00:07:57 knows how to access the title and if we
  • 00:08:00 now in J's we'll hit ctrl enter to load
  • 00:08:02 this we see hello world on the right
  • 00:08:05 because now we're dynamically outputting
  • 00:08:08 our title data through string
  • 00:08:11 interpolation with D double curly braces
  • 00:08:13 here in our app or in our dev here with
  • 00:08:17 the ID app which is controlled through
  • 00:08:19 UJS and this is generally how vue.js
  • 00:08:22 works you take control over a part of
  • 00:08:25 the dom then you may have some data you
  • 00:08:27 also may have other things and we'll
  • 00:08:29 come back to those and you can work with
  • 00:08:31 the data you can also listen to events
  • 00:08:33 as i will soon show you in one of the
  • 00:08:35 next videos and then create a reactive
  • 00:08:38 or possibly reactive app with that
  • 00:08:41 because the cool thing is and you will
  • 00:08:43 see this in the next video when we also
  • 00:08:44 come to events whenever title here
  • 00:08:47 changes it will automatically update to
  • 00:08:50 dawn but again i come to this in the
  • 00:08:52 next video
  • 00:08:52 these were the first steps and then
  • 00:08:54 our first view ge'ez application