V html vue js не работает

Почему не работает директива v-html?

Я хочу вывести разметку svg иконки внутрь блока, созданного в компоненте, в который я через props доставляю эту иконку.

В Vue DevTools props есть, вывел в консоль при в колбэке created — тоже есть. Но на страницу не рендерится. Ошибок нет ни в терминале, ни в браузере. Код экземпляра (осторожно — кофе. я не сплю в 5м часу ночи):

• Вопрос задан более трёх лет назад
• 862 просмотра

я и получаю промисом.
Скинул две иконки в компонент двумя разными props — и заработало.

Меня либа эта уже неоднократно удивляла странным поведением, хотя я понимаю что она на proxy и нужно задавать начальное значение, всё равно — больше недели на ней не попишу — сяду и сижу полночи за одним багом

В: Ведется ли работа над Vue 3.0? Если да, то каковы ключевые изменения?
O: У нас есть планы на 3.0, но пока что ничего определенного. Ближайший большой релиз — это ветка 2.x-next, которая полностью совместима по возможностям с 2.x, но в ней внутренняя система реактивности переписана на ES2015 Прокси. Это улучшит производительность и позволит избавиться от некоторых ограничений существующей реализации (например, отслеживание изменений в объектах и массивах — прим. пер.). Мы прекратим поддержку IE11 и ниже, но позволим использовать последние возможности ES2015 для более эффективного кода.

Источник

Favicon

Блог по web технологиям. Веб студия г. Воронеж. Создание и поддержка сайтов на заказ.

• Главная
• /
• JavaScript
• /
• Vue.js
• /
• Когда VueJS не может помочь вам

Когда VueJS не может помочь вам

Если вы хотите создать веб-страницу с помощью JavaScript, VueJS поможет вам и выполнит грязную работу за вас. Но есть условие: он работает только на тех блоках страницы, в которых он имеет единоличный контроль. Любая часть, которая может быть помешана другими скриптами или плагинами уже не для Vue.

Это значит, что теги head и body являются зонами без Vue. То есть если вы хотите управлять классом тега body напрямую например, то у вас ничего не получится.

Так как Vue не может управлять тегами head и body напрямую, он все равно поможет вам управлять ими другими способами.

Почему Vue придирчив к тому, где он работает?

Vue оптимизирует рендеринг страницы с помощью виртуального DOM. Это JavaScript-представление «реального» DOM, которое Vue хранит в памяти. Обновление DOM часто бывают медленным, поэтому сначала изменения происходят в виртуальном DOM, затем он обновляет реальный DOM, так Vue собственно и оптимизирует процесс.

Эта система будет сломана, если какая-либо третья сторона внесет изменения в DOM без ведома Vue, вызывая несоответствие между реальным DOM и виртуальным DOM.

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

Связывание с элементом

Первое, что мы обычно делаем в проекте Vue — это связываем селектор в объекте Vue через свойство el:

Источник

Топ вопросов, как что-то сделать на Vue.js (Быстрые ответы)

• 03-01-2019 •

Быстрые ссылки, чтобы не искать

Как на Vue.js вставить значение атрибута?

Так же можно использовать такой метод для любого тэга. К примеру :title=»imgLink», :alt, :href.

Как добавлять и изменять классы на vue.js

В данном примере, по нажатию на кнопку «Change class«, будет вызываться метод changeClass, где мы меняем значение переменной hideClass на true/false. И в зависимости от значения, будет удалятся/добавляться класс hide.

Как получить значение checkbox на vue.js

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

Как добавить заготовленный html на vue.js

Бывает и такие моменты, когда надо добавить заготовленный html

Как использовать циклы на vue.js

Если вам нужно отображать индекс текущего элемента, то можно использовать следующий вариант:

Как использовать условия на vue.js

При использовании v-if , v-else html полностью удаляется в отличии от v-show где устанавливается класс display: none;

v-show не работает вместе с v-else!

Как отключить кнопку (disabled) на vue.js

События на vue.js

Пожалуй это самые популярные вопросы касающиеся vue.js , если у вас остались вопросы, задавайте в комментариях, буду пополнять список топ вопросов!

One thought on “ Топ вопросов, как что-то сделать на Vue.js (Быстрые ответы) ”

Добрый день. А как реализовать такое? При наведении на .two менять класс у .first, только у элемента, который в общем блоке с .two?

Источник

Синтаксис шаблонов

Для связывания DOM с данными экземпляра Vue использует синтаксис, основанный на HTML. Все шаблоны Vue являются валидным HTML-кодом, который могут распарсить все HTML-парсеры и браузеры.

Для работы Vue компилирует шаблоны в render -функции виртуального DOM. В сочетании с системой реактивности, Vue умеет определять минимальное число компонентов для повторной отрисовки и применяет минимальное количество манипуляций к DOM при изменении состояния приложения.

Если вы знакомы с концепцией виртуального DOM и предпочитаете использовать ничем не ограниченную мощь JavaScript — можете также писать render-функции напрямую, минуя шаблоны и даже используя JSX.

Интерполяции

Текст

Наиболее простой способ связывания данных — это текстовая интерполяция с использованием синтаксиса Mustache (двойных фигурных скобок):

Выражение в фигурных скобках будет заменено значением свойства msg соответствующего объекта данных. Кроме того, оно будет обновлено при любом изменении этого свойства.

Возможно также выполнение интерполяции однократно, которая не обновится при изменении данных — с помощью директивы v-once, но обратите внимание, это повлияет сразу на все связанные переменные в рамках данного элемента:

Сырой HTML

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

Двойные фигурные скобки: << rawHtml >>

Содержимое тега span будет заменено значением свойства rawHtml , интерпретированного как обычный HTML — все привязки данных игнорируются. Запомните, вы не можете использовать v-html для вложения шаблонов друг в друга, потому что движок шаблонов Vue не основывается на строках. Вместо этого нужно использовать компоненты, позволяющие сочетать и переиспользовать элементы UI.

Динамическая отрисовка произвольного HTML-кода на вашем сайте крайне опасна, так как может легко привести к XSS-уязвимостям. Используйте интерполяцию HTML только для доверенного кода, и никогда не подставляйте туда содержимое, создаваемое пользователями.

Атрибуты

Синтаксис двойных фигурных скобок не работает с HTML-атрибутами. Используйте вместо него директиву v-bind :

При использовании с булевыми атрибутами (когда их наличие уже означает true ) v-bind работает немного иначе. В этом примере:

Если значением isButtonDisabled будет null , undefined или false , то атрибут disabled не добавится в элемент .

Использование выражений JavaScript

Пока мы связывали данные со свойствами в шаблонах только по простым ключам. Но на самом деле при связывании данных Vue поддерживает всю мощь выражений JavaScript:

Выражения будут вычислены как JavaScript-код в области видимости соответствующего экземпляра Vue. Единственное ограничение в том, что допускается лишь одно выражение, поэтому код ниже НЕ сработает:

Выражения в шаблонах выполняются в режиме «песочницы», поэтому доступ есть только к ограниченному списку глобальных объектов, таким как Math и Date . Не пытайтесь получить доступ к пользовательским глобальным объектам внутри выражений используемых в шаблонах.

Директивы

Директивы — это специальные атрибуты с префиксом v- . В качестве значения они принимают одно выражение JavaScript (за исключением v-for , которую мы изучим далее). Директива реактивно применяет к DOM изменения при обновлении значения этого выражения. Вспомним пример из введения:

В этом случае директива v-if удалит или вставит элемент

в зависимости от истинности значения выражения seen .

Аргументы

Некоторые директивы могут принимать «аргумент», отделённый от названия директивы двоеточием. Например, директива v-bind используется для реактивного обновления атрибутов HTML:

В данном случае href — аргумент, указывающий директиве v-bind связать атрибут href элемента со значением выражения url .

Другим примером будет директива v-on , которая отслеживает события DOM:

В данном случае аргументом является тип события. Подробнее на обработке событий мы остановимся позднее.

Динамические аргументы

Начиная с версии 2.6.0, можно использовать JavaScript-выражение в аргументе директивы, заключив его в квадратные скобки:

Здесь attributeName будет выполняться как выражение JavaScript, а его вычисленное значение использоваться в качестве финального значения аргумента. Например, если ваш экземпляр Vue имеет в данных свойство attributeName , значение которого равно «href» , то это будет эквивалентно привязке v-bind:href .

Таким же образом можно использовать динамические аргументы для привязки обработчика к динамическому имени события:

В этом примере, когда значение eventName будет «focus» , то обработчик v-on:[eventName] будет эквивалентен v-on:focus .

Ограничения значений динамического аргумента

Ожидается, что динамические аргументы в результате будут строкой, за исключением null . Специальное значение null можно использовать для явного удаления привязки. Любые другие нестроковые значения будут вызывать предупреждения.

Ограничения динамического выражения

Для выражений динамических аргументов есть синтаксические ограничения, поскольку некоторые символы, такие как пробелы и кавычки, являются недопустимыми внутри имён атрибутов HTML. Например:

Обойти это ограничение можно использованием выражения без пробелов или кавычек, или заменой комплексного выражения на вычисляемое свойство.

При использовании шаблонов в DOM (шаблонов, написанных непосредственно в HTML-файле), следует избегать именования ключей заглавными буквами, поскольку браузеры будут приводить имена атрибутов к строчным:

Модификаторы

Модификаторы — особые постфиксы, добавляемые после точки, обозначающие, что директива должна быть связана каким-то определённым образом. Например, модификатор .prevent говорит директиве v-on вызвать event.preventDefault() при обработке произошедшего события:

Больше примеров применения модификаторов вы увидите далее, когда будем подробнее разбирать v-on и v-model .

Сокращения

Префикс v- служит для визуального определения Vue-специфичных атрибутов в шаблонах. Это удобно, когда Vue используется для добавления динамического поведения в существующей разметке, но для часто используемых директив может показаться многословным. В то же время необходимость в v- менее значима при создании одностраничных приложений, где Vue контролирует каждый шаблон. Поэтому есть сокращённая запись для двух наиболее часто используемых директив, v-bind и v-on :

Сокращение v-bind

Сокращение v-on

Такие атрибуты на вид несколько отличаются от обычного HTML-кода, но символы : и @ являются валидными символами для названий атрибутов, и все браузеры поддерживающие Vue могут их корректно обработать. К тому же, в итоговой разметке они не появятся. Сокращённый синтаксис совершенно необязателен, но он скорее всего вам понравится, когда вы узнаете больше о том, как он используется далее.

Источник

Vue.js для сомневающихся. Все, что нужно знать

В данной статье речь пойдет о замечательном фронтенд фреймворке Vue.js. Как вы видите, статья называется «Vue.js для сомневающихся», и, если вы до сих пор не могли решиться попробовать Vue.js на практике, то надеюсь, что после прочтения вы все-таки на это решитесь.

Фреймворки разрабатываются для того, чтобы упростить нам жизнь и освободить от написания однотипного кода. Но, по мере того как кодовая база некоторых фреймворков сильно разрастается, они начинают привносить свою долю сложности в проект. Из-за этого при планировании разработки мы должны учитывать два фактора:

1. сложность нашего приложения
2. сложность фреймворка, который мы используем

Немного абстрагируемся и назовём это внутренней сложностью (то есть сложностью, от которой мы не можем избавиться при разработке) и сложностью инструмента, с помощью которого мы достигаем той или иной цели. Естественно манипулировать мы можем только сложностью инструмента.

Из вышесказанного, у нас получается два варианта выбора инструмента:

1. Вариант недостаточности. Когда инструмента недостаточно, чтобы перекрыть внутреннюю сложность. Функции, необходимые для реализации приложения, отсутствуют в фреймворке, и нам приходится вручную дорабатывать и добавлять необходимый инструментарий.
2. Вариант избыточности. Когда необходимый для приложения функционал перекрывается только небольшой частью инструмента. Остальная же часть инструментария висит мертвым грузом и только создает нам проблемы: ограничения при разработке, замедление загрузки приложения и т.п.

Так что же делать? Возможно, буду немного Капитаном Очевидностью, но надо действовать по принципу: “Для каждой цели — свой инструмент”. При планировании нам необходимо искать золотую середину так, чтобы сложность (и, следовательно, функциональность) приложения были на одном уровне.

О Vue.js и авторе

Итак, разберемся с Vue и каким образом он может облегчить нам разработку приложения.

Создателем Vue.js является Evan You, бывший сотрудник Google и Meteor Dev Group. Начал он разрабатывать фреймворк в 2013-м, а в феврале 2014-го состоялся первый публичный релиз. Vue широко используется среди китайских компаний, например: Alibaba, Baidu, Xiaomi, Sina Weibo и др. Он входит в ядро Laravel и PageKit. Недавно свободная система управления репозиториями GitLab тоже перешла на Vue.js.

В конце сентября 2016-го вышел в релиз Vue.js 2.0, еще круче и с упором на производительность — теперь используется виртуальный DOM, поддерживается серверный рендеринг, возможность использовать JSX и т.д. Хотя сейчас он поддерживается только сообществом, он держится достойно даже на уровне продуктов таких гигантов, как Google и Facebook (Angular2 и React 15), и постепенно догоняет их по популярности.

Рассмотрим самый простой пример:

• создается новый инстанс вью через new Vue
• в el мы определяем, за каким элементом следит вью
• в data у нас объект состояния

app.html

• в html, естественно, у нас должен быть элемент с нужным нам селектором
• данные из состояния выводим в усатом (mustache ведь) синтаксисе. Тут у нас обычное тернарное выражение
• инпут связываем со значением message объекта состояния с помощью директивы v-model

//codepen.io/Demetrius/embed/KNaJLW/?height=468&theme-id=16150&default-tab=result

Концепции Vue.js

Основными концепциями Vue являются:

• конструктор
• компоненты
• директивы
• переходы

В первой версии еще были фильтры, но, насколько я знаю, в текущей версии они считаются deprecated.

Конструктор

Работа с Vue.js начинается с создания нового инстанса new Vue. В el у нас элемент, за которым следит Vue. В template выбран (либо прописан инлайново) элемент, куда Vue будет рендерить. В data хранится текущее состояние инстанса, а метод computed предоставляет нам вычисляемые свойства.

В примере вычисляемое свойство full_name отслеживает first_name и last_name как зависимости и автоматически синхронизируется.

В methods можно выделить следующие кастомные методы и методы жизненного цикла Vue:

• beforeCreate — смотрит данные и инициализирует события
• created — смотрит, есть ли el или template. Если есть, то рендерит в них; если нет, то ищет метод render
• beforeMount — создает vm.$el и заменяет им el
• mounted — элемент отрендерен

При изменении состояния:

• beforeUpdate — снова рендерит VDOM и сравнивает с реальным DOM-ом, применяет изменения
• updated — изменения отрендерены
• beforeDestroy — полный демонтаж вотчеров, внутренних компонентов и слушателей событий
• destroyed — вызывается, когда выполнение операции останавливается

Директивы

Директивы — специальные атрибуты для добавления элементам html дополнительной функциональности.

Рассмотрим некоторые встроенные директивы (кто работал с Angular, тому они покажутся очень знакомыми):

• V-bind — динамически связывается с одним или несколькими атрибутами.
• V-cloak — прячет “усатые” выражения, пока не подтянулись данные
• v-if — условие для рендера элемента
• V-else — обозначает “else блок” для v-if
• V-for — циклично проходит массив объектов
• V-model — связывает состояние с input элементом
• V-on — связывает слушателя события с элементом
• V-once — рендерит элемент только вначале и больше не следит за ним
• V-pre — не компилирует элемент и его дочерние элементы
• V-show — переключает видимость элемента, изменяя свойство CSS display
• V-text — обновляет textContent элемента

Все Vue-директивы имеют префикс “v-”. В директиву передается какое-то значение состояния, а в качестве аргументов могут быть атрибуты html или события.

Компоненты

Компоненты помогают расширить основные html элементы и внедрить переиспользуемый код. По сути, компоненты — повторно используемые части UI. На этапе проектирования мы разбиваем наше приложение на независимые части и получаем древовидную структуру компонентов.

В Vue.js нет особых требований к именам компонентов, но хорошая практика — придерживаться правил W3C насчет кастомных компонентов, то есть буквы нижнего регистра и разделения через дефис.

Новый компонент объявляется с помощью Vue.component, и в первый аргумент мы передаем имя нового тега (в нашем случае simple-counter)

Коммуникация между vue-компонентами осуществляется по принципу “Props in, Events out”. То есть от родительского элемента к дочернему информация передается через пропсы, а обратно — вызываются события.

Также во Vue.js есть так называемые однофайловые компоненты. Мы создаем файл с расширением .vue и пишем туда стили, шаблон и логику. Причем писать можно на любом удобном вам препроцессоре (SASS, Stylus, PostCSS, Jade, . ) и языке, компилирующимся в JS (CoffeeScript, TypeScript).

Переходы

Vue предоставляет различные способы применения анимационных эффектов, когда элементы отрисованы, обновлены или удалены из DOM. Они включают в себя инструменты для:

• автоматического применения классов для CSS-переходов и анимаций
• интеграции сторонних библиотек для CSS-анимаций, таких как Animate.css
• использования JavaScript для манипуляции DOM-ом
• интеграции сторонних JavaScript библиотек для анимаций, таких как Velocity.js

Рассмотрим простой пример:

Экосистема фреймворка

Роутинг

Во Vue.js за маршрутизацию отвечает отдельный пакет vue-router. Он поддерживает вложенные маршруты к вложенным компонентам, предлагает упрощенное API для навигационных хуков, управляемое поведение скрола и продвинутый контроль переходов.

Вот небольшой пример:

Ajax-запросы

Для работы с Ajax-запросами существует плагин vue-resource. Он предоставляет возможности для создания веб-запросов и обработки ответов с помощью XMLHttpRequest или JSONP. Также особенностью плагина является поддержка Promise API и URI шаблонов.

Управление состоянием

Vuex — паттерн и библиотека управления состоянием для приложений на Vue.js. Он предоставляет централизованное общее состояние для всех компонентов в приложении и правила, обеспечивающие предсказуемое изменение состояния.

На изображении ниже представлено приложение на Vue+Vuex со следующими частями:

• Состояние (State), которое является единственным источником данных для компонентов.
• Vue-компоненты(Vue-components), которые по сути являются лишь декларативным отображением состояния.
• Действия (Actions), которые отлавливают событие, которое произошло, собирают данные с внешних API и запускают нужные мутации.
• Мутации (Mutations) — единственная часть, которая может изменять состояние и, получив данные от Actions, применяет их на состоянии.

Система сборки и инструменты разработчика

Для отладки в браузере существует Vue-devtools (к сожалению, пока только для Chrome), который позволяет видеть, какие компоненты есть в нашем приложении и их текущее состояние.

Также он прекрасно работает с Vuex и позволяет выполнять так называемый time-travel debugging: в браузере мы можем увидеть историю состояний и переключаться между ними.

Почему я должен его использовать

Vue удивителен! Я считаю, это здорово, что я могу просто подключить его на странице и начать работать без необходимости шаманить с системой сборки или CLI. С ним очень просто начать работать, даже если вы никогда не работали с JavaScript фреймворками. Это идеальное сочетание удобства и мощности. Рассмотрим еще несколько аргументов в его пользу:

• Теперь он еще меньше. Runtime сборка Vue.js 2.0 весит всего лишь 16kb, а вместе с vue-router и vuex — 26kb (примерно как и ядро первой версии).

• Он еще быстрее. Во Vue.js всегда уделялось большое внимание быстродействию. Прослойка, отвечающая за рендеринг, переписана на облегченную реализацию виртуального DOM-а — форка Snabbdom.

• Vue 2.0 поддерживает серверный рендеринг. Для этого есть модуль Vue-server-renderer, поддерживающий другие инструменты из экосистемы Vue (vue-router и vuex). Теперь гораздо проще создавать изоморфные приложения.
• Ребята из Alibaba работают над Weex, кроссплатформенным нативным мобильным UI (как ReactNative и NativeScript). Отныне Vue-компоненты можно будет использовать для веб, Android и iOS.

Vue прошёл путь от небольшого аматорского проекта до широко используемого проекта с большим сообществом, а я надеюсь, что сумел развеять ваши сомнения по поводу того, стоит использовать этот фреймворк или нет.

Спасибо за внимание!

Статью подготовили: greebn9k (Сергей Грибняк), Dmitry-Ivanov (Дмитрий Иванов), silmarilion (Андрей Хахарев)

Источник