Документация по Vue.js Часть 1

В этой серии статей о Vue.js я буду углубляться в документацию Vue. Сначала я рассмотрю учебник по Vue.

Поскольку сейчас я работаю в браузере с Vue, в этом руководстве не будет рассказано, как настроить Vue.js.

Использование тегов сценариев и шаблонов — декларативный рендеринг

В тегах сценария мы пишем наш JS-код и сценарий файла, который расширяется до HTML. Отсюда мы используем состояния и вносим изменения в наш HTML.

Ниже вы увидите data(){}, это место, где мы храним наши данные. Эта функция должна что-то возвращать, иначе она не будет работать. Мы можем использовать значения в data() внутри наших тегов <template>, именно там остается HTML.

<script>
export default {
  data () {
    return {
      msg: "Hello Vue!" // msg is property key || "Hello Vue!" is property value
    }
  }
}
</script>

<template>
  <h1> {{msg}} !</h1>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы использовать значения в data, нам нужно напечатать наши ключи свойств msg в данном случае в двойных фигурных скобках (так называемый синтаксис усов)

Связывание атрибутов

В приведенном ниже коде у меня просто есть ключ свойства titleClass, и он имеет значение свойства "title". title получает свой стиль от тегов style. Проявите свои навыки CSS в тегах style 🙂

<script>
export default {
  data() {
    return {
      titleClass: "title",
    };
  },
};
</script>

<template>
  <h1 v-bind:class="titleClass">Change the color of this title</h1>
</template>

<style>
.title {
  color: red;
}
</style>

Вход в полноэкранный режим Выход из полноэкранного режима

Сокращение для v-bind:.

Для связывания атрибутов в Vue мы используем префикс v-. Таким образом, для связывания атрибутов нам нужно использовать код v-bind:, который идет после двоеточия : в качестве аргумента.

Слушатели событий

Используйте v-on: для использования слушателей событий в Vue. Я ленивый, есть ли у нас короткий путь? Конечно, это @. Итак, вместо того чтобы набирать v-on:click, вы можете набрать @. В этот раз я воспользуюсь быстрой версией v-on:

<script>
export default {
  data() {
    return {
      count: 0
        }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

<template>
  <!-- make this button work -->
  <button @click="increment">count is: {{ count }}</button>
</template>
Войти в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше блоке кода есть кнопка. Она вызывает метод increment при нажатии (@ или v-on:click помните?). Когда вы хотите получить доступ к ключам ваших свойств в data(){}, вы должны использовать ключевое слово this, чтобы получить его в ваших методах. В противном случае Vue не поймет, на что вы ссылаетесь. Это потому, что я кодирую в стиле options, и не буду здесь вдаваться в подробности об этом 🙂

v-on и v-bind, или просто используйте v-model — привязка к форме

В приведенном ниже коде, чтобы ввести что-то в input и отобразить (получить значение на экране) его значение, нам нужна комбинация v-on: и v-bind. С помощью v-bind: мы получаем доступ к значению text, а с помощью v-on: мы вызываем метод onInput, который принимает event в качестве параметра. Чтобы получить значение, нам просто нужно something.target.value. Нашим параметром является событие e, поэтому для получения значения внутри input нужно сказать e.target.value. Более того, ключ свойства text (который изначально является пустой строкой) будет присвоен значению внутри ввода.

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    onInput(e) {
      this.text = e.target.value;
    },
  },
};
</script>

<template>
  <input v-bind:value="text" v-on:input="onInput" placeholder="Type here" />
  <p>{{ text }}</p>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Однако Vue.js делает все проще и предоставляет нам v-model:, который объединяет v-bind: и v-on:. С v-model: нам не нужно вызывать функцию явно. Здесь это так:

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    onInput(e) {
      this.text = e.target.value;
    },
  },
};
</script>

<template>
  <input v-model="text" placeholder="Type here" />
  <p>{{ text }}</p>
</template>
Войти в полноэкранный режим Выйти из полноэкранного режима

Другими словами, я полностью удалил v-on: и заменил v-bind на v-model=.

Условный рендеринг

Используйте v-if=""" v-else=""" и, если у вас больше условий v-else-if для условного рендеринга. Если условие не выполнено, Vue не отрисовывает его. И это главное различие между v-if и v-show. v-show рендерится в любом случае.

<script>
export default {
  data() {
    return {
      awesome: true,
    };
  },
  methods: {
    toggle() {
      this.awesome = !this.awesome;
    },
  },
};
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Svelte are coming!</h1>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Если awesome равно true рендерим <h1 v-if="awesome">Vue is awesome!</h1>, иначе рендерим <h1 v-else>Svelte are coming!</h1>.

Прежде чем закончить часть, я хочу поговорить об этой строке this.awesome = !this.awesome. Это означает, что следующее значение будет противоположно текущему значению, когда сработает слушатель события. Если текущее значение будет ложным, то следующее значение будет истинным и наоборот.

Подводя итог, в этой части мы поговорили о декларативном рендеринге (синтаксис усов), привязке атрибутов (v-bind), слушателях событий (v-on), привязке форм (v-model), условном рендеринге (v-if, v-else, v-else-if).

Это конец первой части, в следующей части я рассмотрю v-for.

};

переключить

Vue — это круто!

Svelte на подходе!




If `awsome` is `true ` render `<h1 v-if="awesome">Vue is awesome!</h1>`, else render `<h1 v-else>Svelte are coming!</h1>`

Before I finish part, I want to talk about this line `this.awesome = !this.awesome`. This means, next value will be opposite of the current value when event listener is triggered. If current value is falsy, mext value will be truthy and vice verca.

To sum it up, in this part we talked about declarative rendering (mustache syntax), bind attributes (v-bind), event listeners (v-on), Form Bindings (v-model), conditional rendering (v-if, v-else, v-else-if)

This is the end of part 1, I will go over `v-for` in the next part.
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий