vue.js | Notion

https://www.youtube.com/watch?v=1rRD9uMF92o&t=6526s

<aside> 🗒️

vue.js / angular / react

</aside>

React - низкоуровневая библиотека, с помощью которой мы точечно можем изменять проект. Минусы - очень много лишнего кода, когда vue.js позволяет сделать то же самое действие с помощью 2х строк кода.

Angular - полноценный фреймворк с очень мощным инструменталом. В основном используется для работы с enterprise, то есть огромными и масштабными корпорациями.

Vue.js - что-то среднее между 2мя вышеперечисленными фреймворками, объединивший в себе самые лучшие качества каждого. Профильная область применения: маленькие проекты, проекты среднего размера, большие и гибкие приложения (интернет магазин, CRM - система и т.д.)

<aside> 🔌

Способы подключения

</aside>

Как библиотека:

<body>

/* код */

<script src="main.js"></script>
<script src="<https://unpkg.com/vue@3/dist/vue.global.js>"></script>
</body>

Создание простого счетчика:

<div class="card center">
                 <--интерполяция-->
      <h1>Счетчик: **{{ counter }}**</h1>
      <div class="btn-wrapper">
        <button class="btn primary">+</button>
        <button class="btn danger">-</button>
      </div>

const App = {
  data() {
    return {
      **counter: 33**
    }
  }
}
Vue.createApp(App).mount('#app')

Добавление пользовательских событий:

<div class="btn-wrapper">
        <button class="btn primary" **@click="counter++"**>+</button>
        <button class="btn danger"@click="counter = counter - 1">-</button>
      </div>
 
 /* В vue.js работает директива 
 **@click="counter++"**, точно также как и 
 **v-on:click="counter++"**
 */

<aside> 🔖

Работа с атрибутами на примере задания “Мои заметки”

</aside>

<input type="text" placeholder="{{placeholder}}"/>
/* Интерполяция в атрибутах не сработает, если делать таким образом */

<input type="text" **:**placeholder="placeholderString"/>
// То же самое, что и
<input type="text" **v-bind:**placeholder="placeholderString"/>

/* We can pass an object to :class (short for v-bind:class) 
to dynamically toggle classes: */

<input 
 type="text" 
 :placeholder="placeholderString" 
 :value="inputValue"
 /*Использование методов*/
 **v-on:input="inputChangeHandler"**
/>

methods: {
    inputChangeHandler(event) {
      this.inputValue = event.target.value;
    }
  }