Trying Vue.js for the First Time
Вставка
- Опубліковано 13 вер 2020
- I code React all day every day, but today I decided to change it up and give Vue.js a try for the first time.
#benawad #vue
----
Checkout my side projects:
If you're into cooking: www.mysaffronapp.com/
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitter: / benawad
Twitch: / benawad
Medium: / benawad
GitHub: github.com/benawad
Facebook: / benawad97
LinkedIn: / benawad
Instagram: / benawad97
TikTok: / benawad
----
Follow me online: voidpet.com/benawad
#benawad - Наука та технологія
The church of React will not forget this
😂😂😂
🤣
🤣
🙂😁😂🤣🤣🤣🤣🤣
Have you heard the word of v2.imba.io ?
next video: trying angular for the first time (GONE WRONG) (911 CALLED) *I GOT SICK*
Found u
Someone stole my kidney I wokeup married with 5 kids I now live in germany Angular gone very wrong
I'm actually tempted to try Angular after I tried NestJs on the backend. And yes, I got the joke xD
lol, got u
💀💀💀 I'm dead 🤣😂
You're gonna get a lot of vues on this video.
Damn that’s a good one 😂
Nice one😁
@@gecko499 only from seething react fans :P
😂😂😂
You're gonna get a lot of Reacts on this comment
Almost every major programming UA-camr: Does relevant and essential programming videos.
Techlead: How I clean my ear wax with gold (as a millionaire)
Ben always has a smirk like he is making inside jokes with himself all the time. So meta!
Can't wait for "Trying Angular2 for the first time"
HyperDenAbramov
@@hatrick3117 Dan Gaybramov*
Also "Escaping from the React prison"
That ain't gonna happen 🤣🤣
Ain't gonna happen.
Typing "class" into HTML feels veird? :D Typing className is veird!
He got disturbed by the basics ha ha
exactly!!
className is very weird
`class` is a reserved word in JS. If you have to write HTML on your JS I much prefer to avoid the language reserved words :)
www.ecma-international.org/ecma-262/6.0/#sec-keywords
@@neochumbawamba7096 The point is, the Vue template allows you to be closer of the standard HTML syntax
He lighted green light in the background for making "Vue mood" .
I'd like to see red light in the background as well, if you what I mean.
@@alexmercerind nO
7:07 - Well, I know what this type is now *typing "any"
That's where I smashed like btn
LOL same here
shahahahaha))
hackerman
I couldn't stop laughing
As a vue fan I was on the edge of my seat during this whole video. I dont usually say that about youtube videos (let alone programming ones). Glad you liked it
“That’s just their version of prop types” “Okay, so that’s useless” 👌😂🌹
1:47 “uh oh, my vue code is emo”
3:12 you won't have type issues if the user doesn't even know how to pass the wrong type, thats a big stonks right there
😂😂😂
Haha 10/10 solution
Was looking forward to this :D
Awesome video - really good to see how someone else explores and learns new tech.
Next video: "React dev codes a Vue crud app"?
Would be fun and very clickable!
What I like about Vue is it's simplicity. Templates are pretty much plain HTML and data manipulation and events are pretty easy
Jump cutting out all the intermediate typing and reading the docs is AMAZING. Love it. Most of us don’t need hand holding.
this video is super chill just started out learning coding I like the video format your doing. its help me understand better the mind behind coding
not considering myself a vue+typescript expert but I have been working on vue+typescript for more than a year.
So the way it works is that you don't need to assign types when you are in the template. You need to define that when you are in the script. And part of it is because, unlike react, vue complies temples like angular's HTML.
Haha! Nice ending ^^ I'm a react webdev about to Start a new position as Vue webdev... after watching your video I feel more ready and can't wait to start that wonderful journey. 🙌
Thanks for sharing!
7:05 "Well I know what this type is now". You got me laughing there 😂
Love how you just dive in!
This is what I did last xmas - the two biggest things that make vue stand apart from a *cultural* perspective IMO;
* progressive "incrementally adopt" approach to functionality (Ben you probably noticed this, you could just 'add on' as you needed and the docs were right there telling you how to)
* A solid API that hasn't really changed since 2016, no real major deprecations ( a couple of attempted deprecations but unlike React they actually consult the community on these matters!)
Also - did you know vue supports JSX? I think that's how you might get your typescript checks working.
it's kind of weird to hear people saying it's 'weird' to use "class=xxx" instead of "className=xxx" in their template.... lol
I also am used to typing class since I didn't use frameworks
Typical React "devs" that never learned HTML standards
That was fun. I'd love to see more videos on Vue!
1:46 "oh, my vue code is emo" LMAO
Vue 3 was recently released built with Typescript in mind and has first class citizen support.
6:55 Good ol 'any' solving problems since the beginning of times.
Vue is great! I am interested to see if you think react is still the king after being in vue a little more extensively lol There are some great vue extensions in vs code and vs co-sign that help with some of lifting/auto complete stuff you mentioned :)
I'm so happy Ben is experiencing the exact same feeling I had when I was trying to make TS works in Vue lol
Great move dude! You gonna love it!
The reactions are hilarious 🤣🤣🤣🤣🤣
I'm a recent Vue convert myself
me: oh, he's talking about vue, maybe he will do one about svelte
Ben: Ive been trying svelte
me :0
Ben: and ive kind of liked it
me: and you didnt make a video about it!?!?
Svelte all day!
He streamed a bit on twitch...
@@antonshtipliyski 😲 i need the linkkkk
there will probably be some future videos on svelte, sit tight ;)
Svelte life is silky smooth
when you assign a property to v-bind directive, if you want to send a string you would do: v-bind:prop="' ' Hello ' " also, you don't need to write v-bind you could do just :prop=" ' Hello ' ", great video Ben! I've been following you for a while because I want to learn React, thanks for sharing your content is gold.
I like your videos, I mean your style, so funny yet useful :D
As a JSX fan, when i started using vue it felt really weird to me, and the the thing that bothered me the most was having my template at the top but when you put the script tag at the top and start using vue with composition api or typescript, man it was somehing else, i fell in love with it right after that
As someone who has worked with several templating languages across different programming languages, it always irks me when people feel uncomfortable with other syntaxes. I feel a good developer should extract the concepts of templating and be able to work with different ways of templating. Also, as someone who prefers OOP for better code organization, I think Vue 3's composition API has been a disaster because it's just a ripoff of Reacts disgusting hooks and this is leading to messier code.
This was actually really helpful
what chrome extension was he using to get the keyboard shortcuts on chrome?
I found it btw its vimium
Hey. I've been intending to explore this stuff today. So, your video forced me to start. Thanks
Hey can I know how did you control your browser with keyboard keys only.. which software is it?
Finally ive been praying for this
Been programming for a year, using Vue for a month and its the first time I watch a coding video that makes me laugh from time to time, thank you.
When using Vue you don't need to use Pure components/React.memo as it internally takes care of the dependecies. That's the coolest thing about vue.
Great video! we are trying Quasar these days, also based in VueJs. We'd love to see a video with your thoughts about it!
How did you enable that characters on each controll of page. I wanna do the same. It's convinient I guess
1:12
Hey man, it's called Vimium, thanks to @Vinicius from this comment section for pointing it out.
@@benyamynbrkyc It's perfect thing, thank you. I'll leave it here ua-cam.com/video/t67Sn0RGK54/v-deo.html&feature=emb_logo
@@benyamynbrkyc This is awesome! Thanks!
I was just about close the video b4 the end bro but I was tempted to watch.
Just to make it clear, React is still the king!🔥🔥🔥
The “I don’t know what the type is... I know what the type is now” made me laugh so hard because I literally did that a few minutes ago
In the template, it's JS only, no TS, as far as I can tell.
You absolutely can use a lambda in the @click="".
Event type is just `Event`.
async changeLanguage(e: Event) {
// (e.target as HTMLInputElement).value
//...
}
I will say, I used Vue before React... going into React I hated it, but the more I used each, the more I liked React due to it's better typescript support.
Vue is awesome. Especially so for those that don't write a huge amount of JS, or don't want to use TypeScript.
But React is far better if you are interested in using TypeScript.
Same ^
@@MarisaClardy The problem with Vue right now is to rename symbol. Renaming a variable from both template and script file is horrifying. String based emit is awful as you can be prone to error when using this.$emit("your-parent-function"). Vuex(Vue's Adaption to State Management) typescript support is still awful. Luckily there is a package called nuxt-typed-vuex it does give me intellisense, but configuration is hell as fuck. Using typescript with props gives you an error.
Vue 3 doesn't do the same as it still doesn't support Typescript out of the box. Vue is easy, but as your project goes, you can't expect to scale your project that well with Typescript.
you need a skillful vue developer to know what or when to use these v-directives instead of an IDE helping you what you want to know without disturbing other devs.
Agreed!
@@martinmalia7228 How is it related? we are talking about the strong typing inside the templates.
Seems very easy working with actions and data, I think I'm going to try too.
Vue was my favorite framework about a year ago. I came back to it recently and man, its gotten way more complex!
How so?
@@samuelmorkbednarzkepler First, documentation and examples are now split between V2 and V3 which makes finding help/googling harder. It especially makes starting a new project more challenging because you want the newer, fancier stuff in V3 but need to know in advance if all the packages you want to use work in V3, since many don't. Second, before it felt like starting a project was like 2 cli commands and thats it. Now there is way more configuration you need to do with Babel and Webpack. Creating a blank project is still easy of course, but as soon as you try to put in new packages or third party additions like google maps or just code you found online you are almost guaranteed to run into Webpack/Babel errors which are a nightmare to debug (especially for the aforementioned reason of there being solutions that work for V2 but not V3 or vice versa)
Try adding vue-class-component and vue-property-decorator. I think that takes Vue to the next level.
If you want more typescript, use only the vue setup function with the composition API. You can replace data, computed, methods, etc just by returning object from setup function and it has better typescript support. I’ve fully switched over and I’m not going back
What do you use so when you press Alt? you get the letter for the shortcut. Is that a Chrome Extension?
We did a bunch of vue in school last semester. I completely forgot I even did it until I saw the vue logo a few weeks ago. I wonder if I still have that code somewhere. I'm liking react a lot more but next semester we have to learn Angular.
1:10 - What extension you're using to have those keyboard shortcuts?
[EDIT]: Nevermind, I've used my senior developer search abilities and found out it is Vimium.
Vim extension for vscode afaik
is it worth working with mobx in react native or its not that important ? specially that i already work with rxjs
The framework itself has typescript support, but it was introduced in 3.0, which was officially a few days ago. So some of the toolings may not work as expected. The documentations, browser extension, Vetur are all being updated still. It literally came out a few days ago, and since Vue 3 is new, there aren't a while lot of people who are expert at Vue +TS
TypeScript has existed in Vue since 2.0 but the most efficient way to use it in Vue 2.0 is to adopt the Class API
Finally Ben, that took a long time
Can someone explain the value of reading the docs when learning. You can't intuit everything.
So is there going to be a Svelte video coming too, or did i miss it? From watching this the complaint about no Typescript would be concerning too, seems like one step forward and two back.
The reactive stuff instead of vuex is fine but with VueX you can make it more scalable and allow you know where mutations and actions before mutations happen. Keeps your code seperated and ensures that you can trace back any bugs that may arise.
Yup unless you are making a hello world app never mutate state directly in the component
Anyone know the name of that util that marks the links with what I assume to be keyboard shortcuts? Can be seen at 1:10
7:07 "Well, I know what this type is now."
😂 That's hilarious :D
Very interesting, might make a React-ion video on this!
How he show and click buttons on webpage at start of video? What does he use?
Weird how much YT algorithm loves your content
I choose Vuejs as my first front end framework to learn. I pass the course on udemy and start use it at work.. funny thing is that version 3 came right the next day after I have finished my studies. Now I will finish mvp at work and will do migration to vue 3
vue or react finally :) ?
@@emdadgar_official you can build cross platform with Vue now, any platform even on desktop and mobile, and backend is handled with Nuxt and/or Appwrite. I am building an MVP with Vue, Nuxt, Quasar, Appwrite and Django all by myself, in microservices and apis, if it was another stack I would be so slow.
sorry one question at 0:30
what did you try out? sorry for asking i did not understand the word.
Using vue with webstorm is heaven
Hi Ben
How i clear cache in vue js.
Cache is creating to much problem for me, somethime my function run or sometime not.
I have to use private browse every time.
Plz someone help me.
what's the tool that ben uses to navigate the google results at around the 1 minute 5 seconds mark?
I'd love to see how you handle LitElement from the polymer-project!
I think it's early days with typescript for Vue. For example, I can do I 10 lines of vanilla js what would take 60 lines and even 2 other additional files for vuex
I think vueJS is cool especially the syntax is so clean and the logic is making sense I will use in a project asap
Hi Ben. How do you show the shortcut keys for each link on the page at 1:10 ?
it is an extension called Vimium, I believe
How do you get the visualization of shortcuts across websites?
There is a really nice type script support, and you can config the color easily.
And try vuex which is amazing
Hey Ben, what's that feature you used at 1:09 that assigns some characters to everything on the screen?
If I remember correctly it's called Vimium
@@mecomputer100 Thanks a lot, it is indeed Vimium :)
Found it, thanks to
Benjamin Brkic & Michael Gitart.
It's called Vimium, thanks to @Vinicius from this comment section for pointing it out.
ua-cam.com/video/t67Sn0RGK54/v-deo.html
I am not familiar with Vite - did it replace the Vue-CLI or what happened to that?
do folks not know they can change specific parts of their vscode theme in settings.json with a tm extension?
Evan You talks about how the "composition API" which is new in Vue 3 is inspired by React hooks.
Shots fired!
the king!
The directives remind me of AngularJS days!
Use the vetur extension for better highlightning
7:06 "well I know what this type is now" hahaha
10/10
I'm jealous at how fast you're learning this
He's not a new developer...
Careful Ben, as per their docs, AngularJS was an inspiration for some of the syntax you enjoyed in this video. :D
Hey Ben, when React is still the king for you, it would be very interesting to tell, what do you like more in React.
Can you rewrite angular in Vue?
What does he use for navigating webpages without mouse? That isn't some built in functionality is it?
What an awesome POINT OF VUE from BEN 😁
Anybody know what chrome browser that he used to browse the link through the keyboard shortcut?
Enable VTI to add the type support in the temple
You are the best React teacher on youtube nowadays
It's incredible how in one year. You beat TraversyMedia, Web Dev simplified, Net Ninja and Dev Ed in quality of content
I can't believe these guys have more subscribers than you
You made me realy love react and typescript, and you are supersmart aswell
I think only one youtuber, who is close to you is CJ Garden
You should do Code Catas with him .
That would be clash of the titans for me :)
Sorry for bad english and Thank you for superGreat free content.
I was wrong about you. I'm sorry
He is great. V from Codevolution is great in content delivery too. With react
What's that thing that you're using to use your keyboard to click buttons?
I want to know too! Please tell us
I may find it: Vimium
Angular and Vue are used by the same rebels who do red sql.
I prefer for(...){} above
1:09 which google search navigator are you using here?
What are those extension that map web button to keyboard?