- 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
