Недавно я начал изучать VueJS, и эта статья является частью серии моих заметок во время его изучения. В этом уроке я расскажу, как отображать значения в HTML при использовании VueJS. Кроме того, я расскажу, как с его помощью управлять атрибутами HTML.

Первоначальное применение

Для стартового приложения я буду использовать простое приложение из предыдущего поста.

<! — index.html →
<!doctype html>
<html>
 <head></head>
 <body>
   <div id=”app”>
     <div>Hello world!</div>
   </div>
   <script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script>
   <script type=”text/javascript” src=”script.js”></script>
 </body>
</html>
// script.js
Vue.createApp({
  data() {
    return {
      message: "Hello world"
    }
  }
}).mount("#app")

Я не буду вдаваться в подробности объяснения приведенного выше кода, поскольку он описан в предыдущем посте. Единственное, что я хочу отметить, это то, что для загрузки библиотеки VueJS используется CDN. Кроме того, в данных приложения есть одна переменная с именем message и жестко запрограммированная строка в HTML, содержащая текст «Hello world!».

Отображение значения в HTML

При отображении значения в HTML с помощью VueJS все, что вам нужно сделать, это поместить выражение внутри двойных фигурных скобок ({{ EXPRESSION }}) и между открытием и закрытием тега HTML. Вы можете заметить, что я использовал термин «выражение». Причина, по которой я сказал это именно так, заключается в том, что практически любое допустимое выражение JavaScript можно поместить в фигурные скобки.

<!-- index.html -->

В приведенном выше примере кода отображаются различные жестко запрограммированные значения. Как видите, здесь есть строка, число, результат математической функции и даже функция самовызова. И это возвращает меня к другому термину, который я использовал выше. Практически любое допустимое выражение JavaScript. Если результатом является некоторое значение, вы можете поместить его в фигурные скобки. Вы не можете разместить что-то вроде присваивания переменной.

Обычно вы не хотите просто отображать какое-то жестко запрограммированное значение в HTML. У вас могут быть некоторые переменные приложения, которые вы, возможно, захотите отобразить. Это делается совершенно аналогичным образом. Все, что вам нужно сделать, это использовать имя переменной между одним и тем же…