a brief introduction to Vue3

1. Presenter:
Seyede arezoo kamaneh

2. 2
• Working template application
• Reusable software environment
• lets you focus on the high-level functionality
• Can be modified by writing additional code

3. 72.5k 183k 167k
the JavaScript world moves fast … 3

4. • Created by Evan you
• Previously worked in Google
• Initial release in Feb 2014
• Latest release v3.0.11
4

5. • Gitlab
• Alibaba
• Google Career
• Upwork
5

6. • Progressive javaScript framework
• Single-Page Applications
• Focuses on ’’view layer’’ only
• integrate with other libraries
?
6

7. MVVM
7

8. <div id="app"> html
<h1>{{message}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
Vue.createApp({ js
data() {
return {
message: 'Hello Vue.js!'
}
},
}.mount('#app')
8

9. • Attributes with v- prefix
• Take arguments (v-bind)
• Single JavaScript expressions
• Reactive Binding
9

10. <img v-bind:src="imgSrc" alt=:"image"> </img>
V-bind:
j<div :class="active">active</div>
:shortcut
10

11. V-for:
j<div v-if:"isActive">message</div>
V-if
j<li v-for="item in elements"> </li>
11

12. V-on:
j<button @click="handleClick">Click me</button>
@Shortcut
j<button v-on:click="handleClick">Click me</button >
12

13. Root
Vue app
13

14. • Application API
• Npm
npm install -g @vue/cli
14

15. 15

16. • Easy to learn
• Powerful
• Popular
16

17. • https://en.wikipedia.org/wiki/Software_framework
• https://www.codeinwp.com/blog/angular-vs-vue-vs-
react/
• https://v3.vuejs.org/guide/introduction.html
• https://madewithvuejs.com/
• https://www.flaticon.com/
17

18. Thanks!
18