Автор оригинала: Ramanjaneya K.
История: в этой статье серия. Мы построим PAGE PAGE DELAIL PRODUCT PROUND с нуля с помощью Vue.js и прохождение его функций. Рекомендуется иметь промежуточные знания HTML, CSS и JS. Начнем с Barebone HTML, CSS-скелета и простого файла JS.
Примечание: включите ссылку Vue.js CDN в проекте, как показано ниже
index.html.
app.js.
Теперь у нас есть наш index.html и app.js с помощью экземпляра Vue инициализированы. Vue Axament – корню проекта. Он получает варианты как объект. Объект опций имеет различные свойства для выполнения действий и привод желаемого поведения приложения.
При этом экземпляр VUE подключен к HTML-элементу и устанавливает взаимосвязь между экземпляром Vue и HTML DOM.
Данные:
Когда экземпляр VUE создан, имеет объект данных для хранения информации. Для отображения заголовка продукта и цена продукта на веб-странице. Нам нужно встроить название продукта и цена продукта внутри тега H1, используя выражение JavaScript (двойные фигурные скобки), как показано на изображении ниже.
Выход:
Ой! Наше VUE первое приложение создано, и он работает. Когда вы меняете название продукта или цену в App.js. Он будет автоматически обновляться в браузере, потому что объект данных связан с DOM.
Vue обрабатывает эти изменения, используя концепцию, называемую реактивностью. Реакционная способность установит взаимосвязь между объектом данных и элементами HTML, которые мы ссылались в Index.html. В этом сценарии тег H1 – это элемент, который мы ссылались. Вы можете играть вокруг добавления большего количества свойств до объекта данных и ссылаться на элементы HTML с выражениями.
Связывание атрибута:
Само слово будет указывать связывание атрибутов. Мы собираемся связать свойства объекта данных к атрибутам элемента HTML. Vue предлагает несколько директив для привязки выражений JavaScript:
V-HTML V-BING V-на V-модели V-IF V-для
V-bind:
Мы будем использовать V-Bind Directive для отображения изображения из приложений Vue Exampe Examption Теперь мы отображим свойство Banner Image для атрибута SRC изображения с использованием директивы V-Bind. V-bind выбирает путь к изображению от экземпляра Vue динамически связывается с атрибутом SRC. Если мы изменим баннермаж. Он будет перерезать динамический путь изображения и отображать обновленное изображение.
выход:
Ура!. Изображение появляется. Изображение отображается успешно.
V-для: Директива используется для петли массива элементов
выход:
Условный рендеринг
Используя V-IF Directive, мы можем отображать элементы условно
Окончательная страница продукта Предварительный просмотр:
Заключение:
Заполненный код можно найти на CodePen & Github: