Coding

COMPONENTS AND .VUE FILES | VueJS | Learning the Basics

  • 00:00:01 welcome to another video on view jsut
  • 00:00:04 now if you watched my last video and you
  • 00:00:07 may be sure to fully understand this one
  • 00:00:09 year you saw that I set up a local
  • 00:00:11 project we're using view Chasse
  • 00:00:14 with the view CLI to have a workflow
  • 00:00:16 using webpack – well be able to build
  • 00:00:19 bigger projects to have a fully
  • 00:00:21 functional workflow which also allows me
  • 00:00:23 to split up my view code over multiple
  • 00:00:26 files you also saw that in his source
  • 00:00:29 folder we get this strange dot view file
  • 00:00:31 here and you learned that this is
  • 00:00:33 basically a file handled by the view
  • 00:00:36 loader by webpack here in the end and
  • 00:00:39 everything is then bundled together in
  • 00:00:41 one file at the end it's a nice tool to
  • 00:00:43 be able to split up our code though in
  • 00:00:45 this dot view file we get three
  • 00:00:48 different sections the template the
  • 00:00:50 script section and styles off generally
  • 00:00:54 apply to the whole app but can also be
  • 00:00:56 scoped to this file here also of this
  • 00:00:58 template and that is a convenient way to
  • 00:01:01 be able to split up our code over
  • 00:01:03 multiple files now in this video I'm
  • 00:01:06 going to have a closer look at how we
  • 00:01:08 can use these files we can split up our
  • 00:01:11 application over multiple files using
  • 00:01:14 components now let's take a closer look
  • 00:01:17 we already have the app dot view file
  • 00:01:20 and I'm first going to get rid of all
  • 00:01:23 the content in there there's standard
  • 00:01:26 content ahead there I'm also getting rid
  • 00:01:28 of the content in my data field here I
  • 00:01:30 don't need the name of this component
  • 00:01:33 kind of I don't need to name it and I
  • 00:01:35 can also strip out all the styling and
  • 00:01:37 yes it's folder where we have this logo
  • 00:01:40 I can also delete that now if we have a
  • 00:01:43 looked as as much leaner and next I want
  • 00:01:46 to create a new component I will do this
  • 00:01:47 by creating a new file and I will give
  • 00:01:51 this file the name of well off the
  • 00:01:53 component in a my component shall have
  • 00:01:55 that's just a naming convention which is
  • 00:01:57 kind of used in the view chess world so
  • 00:02:00 let's say here we wanted to create a
  • 00:02:04 symbol a simple message component so a
  • 00:02:07 message to view file and in this fall
  • 00:02:10 well we need a template template or
  • 00:02:12 something you will always need
  • 00:02:14 in a template we must only have one root
  • 00:02:16 element so let's name it orb let's make
  • 00:02:19 it of type div and then there I want to
  • 00:02:22 simply say this is a great message
  • 00:02:25 whatever you like
  • 00:02:26 so in h1 tag here you could of course
  • 00:02:29 until now also use this h1 tag as the
  • 00:02:31 main element here we don't need two div
  • 00:02:33 as of now since we only have one nested
  • 00:02:36 element now this is this component and I
  • 00:02:39 already had a vision components there we
  • 00:02:42 created it with this view dot component
  • 00:02:45 command and we can still do this however
  • 00:02:49 not in this file instead here in the
  • 00:02:51 main dot JS file I first need to import
  • 00:02:55 my message to view file let me add semi
  • 00:02:59 semicolons because that's the style I'm
  • 00:03:01 using here so I'm using or am importing
  • 00:03:03 message from message dot view now
  • 00:03:07 interesting enough
  • 00:03:08 I'm not exporting anything any message
  • 00:03:10 to view file I don't have a script tag
  • 00:03:12 where I export anything it will work
  • 00:03:14 nonetheless because web page where this
  • 00:03:16 view loaded will do this behind the
  • 00:03:18 scenes for us it as I explained
  • 00:03:21 transforms this template here to
  • 00:03:23 JavaScript code anyways and it will
  • 00:03:25 export it so it can import from this
  • 00:03:29 math should view file now if the message
  • 00:03:32 imported I can simply use the view
  • 00:03:35 component method here again to set up a
  • 00:03:40 new component on my view instance and
  • 00:03:41 give it any selector of my choice like
  • 00:03:44 message or maybe also with a unique
  • 00:03:47 prefix app message for example to make
  • 00:03:49 sure I'm not interfering with any
  • 00:03:51 third-party components I might have or
  • 00:03:53 native HTML elements these second
  • 00:03:57 element then simply is message because
  • 00:03:59 this is my component remember before we
  • 00:04:02 had an object here we will where we
  • 00:04:04 would configure it
  • 00:04:05 well this object is now given to us by
  • 00:04:07 the view loader you could say by
  • 00:04:10 compiling this message dot view file
  • 00:04:12 here now with that I get my component
  • 00:04:16 registered and in the apt of you fall I
  • 00:04:19 can therefore now use app message here
  • 00:04:22 like this like the selector because it
  • 00:04:25 is richest globally now if I go to the
  • 00:04:27 term
  • 00:04:28 No and run npm run def to bring up my
  • 00:04:30 development server again let's take a
  • 00:04:33 closer look as you can see in the
  • 00:04:35 running browser window at localhost 8080
  • 00:04:37 I got this is a great message using my
  • 00:04:40 own component which I outsource any
  • 00:04:42 message dot view file now let's create
  • 00:04:45 an our component let's create the input
  • 00:04:47 dot view file for the input component
  • 00:04:50 there I'll create a number template and
  • 00:04:52 in this template I'll again add a div
  • 00:04:55 and then I want to have an input field
  • 00:04:57 type text here and let's also output
  • 00:05:00 whatever we input here below this input
  • 00:05:02 well we can use two-way binding for this
  • 00:05:06 with we model we model will simply bind
  • 00:05:09 the content we enter here to a data
  • 00:05:11 property and therefore I need to add
  • 00:05:13 such data property there for me to add a
  • 00:05:16 script and here we need to export this
  • 00:05:19 object and this object here is now setup
  • 00:05:22 like a view instance kind of I will show
  • 00:05:25 one important difference which I already
  • 00:05:28 talked about though in the components
  • 00:05:30 video here we set up data as a method
  • 00:05:34 and I can use es6 syntax for that so the
  • 00:05:37 alternative would be data colon function
  • 00:05:40 or just again the shortcut es6 gives me
  • 00:05:43 which I can use here because anavrin
  • 00:05:45 eyes feature off this web pack template
  • 00:05:48 I'm using it will compile es6 code to
  • 00:05:51 es5 so you can use es6 here now with
  • 00:05:55 this setup with this data here i need to
  • 00:05:58 return an object in here which i'll name
  • 00:06:01 message and should be empty at the
  • 00:06:03 beginning now i want to bind my input
  • 00:06:06 here to this message property with the
  • 00:06:08 mall again for two-way binding and
  • 00:06:10 thereafter i can output it in the
  • 00:06:13 paragraph below now i also have to
  • 00:06:16 register this and cue register this I
  • 00:06:18 could of course again added here with
  • 00:06:20 view component in the main dot J's fault
  • 00:06:22 to create a global component or if I
  • 00:06:25 don't know I only am going to use it
  • 00:06:27 here in my message well then I can just
  • 00:06:30 add a script tag here to export an
  • 00:06:33 object here too and add the components
  • 00:06:36 property to adjust or some local
  • 00:06:38 components here
  • 00:06:40 the keys are these electors for example
  • 00:06:42 app input and then the avert the value
  • 00:06:48 would be component itself which of
  • 00:06:50 course have to import so import input
  • 00:06:52 from and then it's from the input dot
  • 00:06:55 view file and I will then assign this as
  • 00:06:58 a value here which enables me of course
  • 00:07:00 to now use app input as an element here
  • 00:07:04 and if I save this and go back using the
  • 00:07:06 input field and if I enter something
  • 00:07:08 there you see hello awesome so with that
  • 00:07:13 we're using this web peg setup these dot
  • 00:07:16 view files to split up our code to
  • 00:07:18 contain each component in its own file
  • 00:07:21 which we then can import instead of
  • 00:07:23 globally and locally next in the next
  • 00:07:27 video I wanna have a look at how we can
  • 00:07:30 use this setup to not only output the
  • 00:07:32 message here in the input component but
  • 00:07:35 also to transfer it to our message
  • 00:07:39 component well let's have a look at this
  • 00:07:41 in the next video bye