3 x-bind in AlpineJS - Alpine JS Tutorial for Beginners

foreign [Music] [Applause] [Music] welcome so in the previous video we worked with X data in this video I'm going to work with X bind and what is X bind in alpine.js the X pint is a directive that allows you to dynamically bind an HTML elements attributes the JavaScript expressions or values using the X bind you can change an element's attributes based on changes in your application State user input or other events this can be a powerful tool or building a dynamic and interactive user interfaces so let's remove this and let's start new div and let's just start the X data which is going to be equal with double quotes and inside object and here we defined or state so let's say we'll just say selected image URL is going to be equal with the URL a string from I'm going to copy from the on Splash and here just select copy the image address and paste it in here good now let's close this and before we do we bind that what we have and what I'm going to do is just the install the Alpine login for vs code so let's go to the extensions and let's search for Alpine and Pine and yeah here we have the unpine intellisense and install this one okay now let's close this and come here I'm going to close also this one and I'm going to say here now image I'm going to add image if I say Source here which is going to be equal with the selected image URL copy and paste that one inside and it's close is for now if I say then open the browser but yeah we have here a missing image now let's use the X bind we can use that by saying X minus bind colon to the source attribute of this image and if I save we have here the image as you can see just lets me add some classes let's say class the B width of 96 and also age the same and let's save now yeah here we have if we change that URL of the selected image so let's just copy this and paste it here save and go to the yeah we have the same here okay so this is how we can use the X bind to this image so in this image we use the X bind the source attribute and we pass here the select in selected image URL state from the X data good now let's uh just do something else now I'm going to add and let's make like this with that one more State and let's say just show and the show is going to be a Boolean I'm going to say false here and I'm going to binder class now we can use x bind again so let's say x minus bind colon glass which is going to be equal and based on this state now I'm going to bind a class but as you can see we have X Point here x bind and maybe we have in many cases we can use also the shorthand which is just the colon and it's going to work so just colon n is the same as the X bind colon yeah okay now based on this state I'm going to bind the class here and let's say uh if the show is true I'm going to add nothing if the show is false I'm going to say and with other hidden glass now if this is false and this is going to be hidden the image let's see let's open yeah if I change the show the true and click save or you can see it now we see the image also we can use the object syntax so instead of something like this we can add an object here and inside I'm going to say with the add the hidden class if the show is false so let's say if the show is false now I'm going to apply the hidden if I save come here yeah we see the image because the show is true if I change the show defaults save come here yeah we don't see that also you can apply a you can bind styles so let's say the same colon and style or let's find the style in the input I'm going to add an input here type is going to be text and let's add one more state so let's say input value which is going to be let's say just handle like this and that then in here I'm going to bind now the value of the input at the value attribute of the input so let's say colon value to be equal with input value so input or value like this so also let's bind the style here so colon style which is going to be equal with and I'm going to add an object here and say colder to be color let's be red and let's close this and let's save and let's see yeah here we have a red color just let's change the show to be true also here and let's save this and yeah here we have the image and also we have the input with hello which has the red color okay friends so that's it about the X bind in aspind Js so we have the X data with selected image URL show and the input value and we bind the image class and also the source based on this state and the input value we bind the value and the start here I hope you enjoy friends and if you like don't forget to like the video and subscribe to my channel see you in the next one all the best

Channel: Code With Tony

Views: 1,774

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, alpine js, alpinejs, alpine js tutorial, alpinejs with laravel, alpinejs course, full tutorial, alpinejs full course, learn alpine JS, javascript, javascript framework, alpinejs directives, alpinejs modal, alpinejs tabs, alpinejs search

Id: 2y5NM8YR8cM

Length: 8min 16sec (496 seconds)

Published: Fri Apr 07 2023