introduction to Vue.js 3

introduction to Vue.js 3

• 1.
  Presenter: Seyede arezoo kamaneh
• 2.
  2 • Working templateapplication • Reusable software environment • lets you focus on the high-level functionality • Can be modified by writing additional code
• 3.
  72.5k 183k 167k theJavaScript world moves fast … 3
• 4.
  • Created byEvan 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 javaScriptframework • 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> <scriptsrc="https://unpkg.com/vue@next"></script> Vue.createApp({ js data() { return { message: 'Hello Vue.js!' } }, }.mount('#app') 8
• 9.
  • Attributes withv- 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="itemin elements"> </li> 11
• 12.
  V-on: j<button @click="handleClick">Click me</button> @Shortcut j<buttonv-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 tolearn • 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