1. Vue.js

Vue.js — это прогрессивный фреймворк для создания пользовательских интерфейсов. Он легкий, гибкий и легко интегрируется с другими библиотеками.

Компоненты

Компоненты в Vue.js являются основными строительными блоками приложения.

• Создание компонента:

  // Определение компонента
  Vue.component('my-component', {
    template: '<p>Hello, {{ name }}!</p>',
    props: ['name']
  });
  
  // Создание экземпляра Vue
  new Vue({
    el: '#app'
  });
  
  

• Использование компонента:

  <div id="app">
    <my-component name="Alice"></my-component>
  </div>
  
  

Состояние (State)

Состояние управляется с помощью объекта data в экземпляре Vue.

• Управление состоянием:

  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  });
  
  

• Использование состояния:

  <div id="app">
    <p>{{ message }}</p>
  </div>
  
  

Свойства (Props)

Props передаются в компоненты для передачи данных.

• Определение props:

  Vue.component('child-component', {
    props: ['myProp'],
    template: '<p>{{ myProp }}</p>'
  });
  
  

• Передача props:

  <child-component my-prop="Hello, Vue!"></child-component>
  
  

Жизненный цикл

Жизненный цикл компонентов включает в себя несколько хуков, таких как created, mounted, updated, и destroyed.

• Пример хуков жизненного цикла:

  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    created() {
      console.log('Component created');
    },
    mounted() {
      console.log('Component mounted');
    }
  });
  
  

Реактивность

Vue.js обеспечивает реактивное связывание данных, что упрощает управление состоянием.

• Реактивные данные:

  new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increment() {
        this.count++;
      }
    }
  });