Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

introduction to Vue.js 3

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Deep dive into Vue.js
Deep dive into Vue.js
Wird geladen in …3
×

Hier ansehen

1 von 18 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie introduction to Vue.js 3 (20)

Anzeige

Aktuellste (20)

introduction to Vue.js 3

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

×