KEMBAR78
introduction to Vue.js 3 | PDF
Presenter:
Seyede arezoo kamaneh
2
• Working template application
• Reusable software environment
• lets you focus on the high-level functionality
• Can be modified by writing additional code
72.5k 183k 167k
the JavaScript world moves fast … 3
• Created by Evan you
• Previously worked in Google
• Initial release in Feb 2014
• Latest release v3.0.11
4
• Gitlab
• Alibaba
• Google Career
• Upwork
5
• Progressive javaScript framework
• Single-Page Applications
• Focuses on ’’view layer’’ only
• integrate with other libraries
?
6
MVVM
7
<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
• Attributes with v- prefix
• Take arguments (v-bind)
• Single JavaScript expressions
• Reactive Binding
9
<img v-bind:src="imgSrc" alt=:"image"> </img>
V-bind:
j<div :class="active">active</div>
:shortcut
10
V-for:
j<div v-if:"isActive">message</div>
V-if
j<li v-for="item in elements"> </li>
11
V-on:
j<button @click="handleClick">Click me</button>
@Shortcut
j<button v-on:click="handleClick">Click me</button >
12
Root
Vue app
13
• Application API
• Npm
npm install -g @vue/cli
14
15
• Easy to learn
• Powerful
• Popular
16
• 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
Thanks!
18

introduction to Vue.js 3