Недавно я начал изучать 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. У вас могут быть некоторые переменные приложения, которые вы, возможно, захотите отобразить. Это делается совершенно аналогичным образом. Все, что вам нужно сделать, это использовать имя переменной между одним и тем же…