Vue.js

narzędzie do tworzenia w vue – vue-cli

npm install -g @vue/cli

 

tworzenie projektu – vue create <project name>

  1. manualny setup projektu:
  2. technologie tworzonej aplikacji:
    1. TypeScript
    2. PAW
    3. Router ✓
    4. Vuex
    5. CSS pre-processors ✓
    6. Linter / Formatter ✓
    7. Unit testing ✓
    8. E2E Testing
  3. CSS pre-procesor – sccs/sass
  4. ESLint + Airbnb
  5. Lint on save
  6. unit testin na Jest lub Mocha + Chai
  7. in dedicated config files – w osobnym pliku

 

 

dyrektywa v-bind – pozwala łączyć reaktywny element z obiektu data z templatem, skrótowo zastępowana :

v-bind:style=”myStyle” skracamy do :style=”myStyle”

 

const NewComponent = {
  name: 'NewComponent',
  template: `
<h2>Lorem ipsum dolor</h2>

`
}

new Vue({
  el: "#app",
  components: {
    NewComponent,
  },
  data: {
    name: "Agnieszka",
    myStyle: {
      color: '#e22117'
    }
  },
  methods: {
    handleClick() {
      alert('heeello!');
    }
  },
  template: `
    
<div>
      
<h1 :style="myStyle">Hello {{name}}</h1>

      <NewComponent/>
      <button v-on:click="handleClick">click me</button>
    </div>

  `
});

deklaracja użycia stworzonych komponentów przez obiekt components, a użycie poprzez zamieszczenie nazwy w tagach.

dyrektywa v-on – obsługa eventów, skrótowo zastępowana @ + nazwa eventu
v-on:click=”handleClick” skracamy do @click=”handleClick”

dyrektywa v-model – tworzy 2-way binding

Komponenty tworzymy w plikach z rozszerzeniem .vue a potem importujemy do pliku .js

 

cukier syntaktyczny do v-banding i @input=”handlerchange”

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.