Шаблон Vue.js реализован на основе DOM. Это означает, что все шаблоны Vue.js являются прочиренными и действительными HTML и улучшаются некоторыми специальными функциями. Поэтому шаблоны VUE в основном отличаются от шаблонов на основе струн, помнят об этом.
Интерполяция
текст
Самой основной формой привязки данных является текстовая интерполяция, используя синтаксис «Усы» (двойные скобки):
<pan> Сообщение: {{msg}} </span>
Тег усов заменяется значением атрибута MSG соответствующего объекта данных. Он также будет обновляться при изменении этого свойства.
Вы также можете обрабатывать только одну интерполяцию, и будущие изменения данных больше не будут вызывать обновления интерполяции:
<pan> это никогда не изменится: {{* msg}} </span>
Оригинальный HTML
Двойной тег усов анализирует данные в простой текст вместо HTML. Чтобы вывести реальные строки HTML, вам нужно использовать три теги усов:
<div> {{{raw_html}}} </div>
Содержание вставляется в виде строк HTML - привязка данных будет игнорироваться. Если вам нужно повторно использовать фрагменты шаблона, следует использовать частичные.
Очень опасно динамически отображать произвольный HTML на веб-сайте, потому что он подвержен [xss Attack] (https://en.wikipedia.org/wiki/cross-site_scripting). Не забудьте использовать HTML-интерполяцию только для доверенного контента и никогда для контента, представленного пользователем.
HTML -функции
Теги усов также могут использоваться в атрибутах HTML:
<div id = "item-{{id}}"> </div>
Обратите внимание, что интерполяция не может быть использована в режиме реального времени и специальных функций Vue.js. Не волнуйтесь, если тег усов используется в неправильном месте, Vue.js предоставит предупреждение.
Привязать выражение
Текст, помещенный в тег усов, называется привязывающим выражением. В vue.js связанное выражение состоит из простого выражения JavaScript и, необязательно одного или нескольких фильтров.
Выражения JavaScript
Пока что наши шаблоны связаны только с простыми ключами атрибута. Однако на самом деле Vue.js поддерживает полнофункциональные выражения JavaScript в привязке данных:
{{number + 1}}
{{ хорошо ? 'Да': 'Нет'}}
{{message.split (''). React (). join ('')}}
Эти выражения оцениваются в рамках экземпляра VUE, к которому они принадлежат. Одним из ограничений является то, что каждое привязка может содержать только одно выражение, поэтому следующее утверждение является недействительным:
<!-Это утверждение, а не выражение:->
{{var a = 1}}
<!-управление процессом также невозможно, вместо этого вы можете использовать тройные выражения->
{{if (ok) {return message}}}
Фильтр
Vue.js позволяет добавить дополнительного «фильтра» после выражения, указывающего с «символом трубопровода»:
{{сообщение | капитализируйте}}
Здесь мы будем использовать значение сообщения «Пиба» для выражения «труба» для встроенного фильтра. Этот фильтр на самом деле является просто функцией JavaScript, которая возвращает капитализированное значение. Vue.js предоставляет несколько встроенных фильтров, и мы поговорим о том, как разработать наши собственные фильтры позже.
Обратите внимание, что синтаксис труб не является синтаксисом JavaScript, поэтому фильтры не могут использоваться в выражениях и могут быть добавлены только к запоздалой мыслью выражения.
Фильтры могут быть подключены последовательно:
{{сообщение | Фильтра | FilterB}}
Фильтр также может принимать параметры:
{{сообщение | Filtera 'arg1' arg2}}
Функция фильтра всегда принимает значение выражения в качестве первого параметра. Котируемые аргументы рассматриваются как строки, в то время как не цитируемые аргументы рассчитываются как выражения. Здесь строка «arg1» передается в фильтр в качестве второго параметра, а значение выражения Arg2 рассчитывается как третий параметр.
инструкция
Директивы являются специальными функциями с префиксом V-. Значение директивы ограничено выражением привязки, поэтому здесь также применимы правила выражения JavaScript и фильтра, также применимы. Ответственность за инструкцию состоит в том, чтобы применить определенное особое поведение к DOM, когда изменение значения его выражения. Давайте посмотрим на пример в «Обзор»:
<p v-if = "приветствие"> Привет! </p>
Здесь директива V-IF будет удалять/вставить элемент <p> в соответствии с подлинностью значения приветствия выражения.
параметр
Некоторые инструкции могут быть разделены «аргументом» после его названия и толстой кишки в середине. Например, V-Bind Directive используется для ответственного обновления HTML-функций:
<a v-bind: href = "url"> </a>
Здесь hREF является параметром, который сообщает директиве V-Bind для связывания атрибута HREF элемента с значением URL выражения. Может быть, вы заметили, что можете использовать интерполяцию функций { % raw %} href = "{{url}}" { % endraw %}, чтобы получить тот же результат: это правильно, и фактически, интерполяция внутренней функции будет преобразована в привязку v-bind.
Другим примером является директива V-ON, которая используется для прослушивания событий DOM:
<a v-on: click = "dosomething">
Этот параметр является названием события, слушаемого. Мы также подробно объясним связывание событий.
Модификатор
Модификаторы-это специальные суффиксы, начиная с периодов полуголки. Они используются, чтобы указать, что инструкции должны быть связаны особым образом. Например, .literal Modifier сообщает директиве, чтобы проанализировать его значение в буквальную строку вместо выражения:
<a v-bind: href.literal = "/a/b/c"> </a>
Конечно, это, похоже, не имеет смысла, потому что нам просто нужно использовать href = "/a/b/c" без необходимости использовать ни одной инструкции. Этот пример просто для демонстрации синтаксиса. Позже мы увидим более практическое использование модификаторов.
аббревиатура
V-Prefix-это визуальный подсказка, которая идентифицирует определенную функцию VUE в шаблоне. Эти префиксы могут быть хорошим различием, когда вам нужно добавить динамическое поведение в какой -то существующий HTML -код. Но когда вы используете некоторые общие инструкции, вы почувствуете, что это всегда так реалистично и многословно. А при создании приложения для одной страницы (SPA) Vue.js будет управлять всеми шаблонами, а V-префикс в настоящее время не так важен. Поэтому Vue.js предоставляет специальные аббревиатуры для двух наиболее часто используемых директив v-bind и v-on:
V-BIND Аббревиатура
<!-Полный синтаксис-> <a v-bind: href = "url"> </a> <!-Abbreviation-> <a: href = "url"> </a> <!-Полный синтаксис-> <Кнопка V-bind: disabled = "onomedynamicCondition"> Кнопка </button> <! : disabled = "noneynamiccondition"> Кнопка </button>
V-ON аббревиатура
<!-Полный синтаксис-> <a v-on: click = "dosomething"> </a> <!-Аббревиация-> <a @click = "dosomething"> </a>
Они выглядят немного отличающимися от «законного» HTML, но они правильно проанализированы во всех браузерах с поддержкой Vue.js и не появляются в финальном визуализированном теге. Грамматика аббревиатуры совершенно необязательна, но когда вы учитесь шаг за шагом, вы будете рады их иметь.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.