Начало работы с Vue3

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

Когда вы только начинаете изучать Vue, мы не рекомендуем использовать инструмент командной строки vue-cli для создания проектов. Более простой способ — напрямую подключить файл vue.global.js на странице для тестирования и обучения.

Приложение в Vue3 создается с помощью функции createApp, формат синтаксиса следующий:

const app = Vue.createApp({ /* 根组件选项 */ })

Параметры, передаваемые в createApp, используются для настройки корневого компонента.

Экземпляр приложения должен быть отрендерен только после вызова метода.mount(). Метод.mount()принимает параметр "container", который может быть фактическим DOM-элементом или строкой CSS-селектора:

<div id="app"></div>
app.mount('#app')

Простой пример:

Vue.createApp(HelloVueApp).mount('#hello-vue')

Параметром createApp является корневой компонент (HelloVueApp). При монтировании приложения этот компонент является отправной точкой рендеринга.

Приложение необходимо смонтировать в DOM-элемент. В приведенном выше коде используетсяmount('#hello-vue')для монтирования приложения Vue HelloVueApp в

элемент.

Далее мы начнем изучение с кодаHello Vue!!.

Пример Vue 3.0

<div id="hello-vue" class="demo"> {{ message }} </div> ​ <script> const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } ​ Vue.createApp(HelloVueApp).mount('#hello-vue') </script>

Попробуйте »

Нажмите кнопку "Try it", чтобы просмотреть онлайн-пример.

В приведенном выше примере мы сначала подключаем JS-файл Vue на HTML-странице:

<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>

На HTML-странице есть элемент div:

<div id="hello-vue" class="demo">
  {{ message }}
</div>

mount('#hello-vue')Смонтировать приложение Vue HelloVueApp в

элемент.

{{ }}Используется для вывода свойств объекта и возвращаемых значений функций.

{{ message }}Соответствует значениюmessageв приложении.

Шаблон корневого компонента

Шаблон корневого компонента обычно встроен в определение компонента, но его также можно указать отдельно, напрямую определив шаблон внутри контейнера в точке монтирования.

Пример

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<script>
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    };
    return { count, increment };
  }
});

app.mount('#app')
</script>

Попробуйте »

Когда у корневого компонента не задана опция template, Vue автоматически использует innerHTML контейнера в качестве шаблона.

Пояснение к коду:

  • Использованиеsetupфункция: В Vue 3 логика компонента обычноsetupопределяется в функции. Здесь мы используемsetupфункцию для определения реактивных данныхcountи методы.increment。

  • Использованиеref: Вsetupфункции мы используемrefдля создания реактивных данных.count。

  • Определитеincrementметод: Определитеincrementметод для увеличенияcountзначения.

  • Верните реактивные данные и методы: Вsetupфункции, вернитеcountиincrement, чтобы к ним можно было обращаться и использовать их в шаблоне.

Опция data

Опция data— это функция. Vue вызывает эту функцию в процессе создания нового экземпляра компонента. Она должна возвращать объект, после чего Vue оборачивает его системой реактивности и сохраняет в экземпляре компонента как $data.

Пример

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// Изменение значения vm.count также обновит $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// и наоборот
vm.$data.count = 6
document.write(vm.count) // => 6

Попробуйте »

Приведённые выше свойства экземпляра добавляются только при первом создании экземпляра, поэтому вам нужно убедиться, что все они находятся в объекте, возвращаемом функцией data.

Методы

Мы можем добавить методы в компонент, используя опциюmethods, которая содержит объект с нужными методами.

В следующем примере мы добавили опцию methods, которая содержит методincrement():

Пример

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` указывает на экземпляр компонента
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5

Попробуйте »
Другие расширения