VueJS — Директивы

VueJS — Директивы

От автора: Vue JS директивы являются, по сути, инструкцией к действиям. Мы уже знакомы с такими директивами как v-if, v-show, v-else, v-for, v-bind, v-model, v-on, и т.д.

В данном разделе мы познакомимся с пользовательскими директивами. Мы создадим глобальные директивы, похожим образом, как мы это делали с компонентами.

Синтаксис

Vue.directive('nameofthedirective', {
 bind(e1, binding, vnode) {
 }
})

Директива создается использованием Vue.directive. Она получает имя, как продемонстрировано в коде выше. Давайте рассмотрим пример для того, чтобы разобраться, как работают директивы.

Пример

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "databinding">
 <div v-changestyle>VueJS Directive</div>
 </div>
 <script type = "text/javascript">
 Vue.directive("changestyle",{
 bind(e1,binding, vnode) {
 console.log(e1);
 e1.style.color = "red";
 e1.style.fontSize = "30px";
 }
 });
 var vm = new Vue({
 el: '#databinding',
 data: {
 },
 methods : {
 },
 });
 </script>
 </body>
</html>

В данном примере мы создали пользовательскую директиву changestyle, как показано в следующем коде.

Vue.directive("changestyle",{
 bind(e1,binding, vnode) {
 console.log(e1);
 e1.style.color = "red";
 e1.style.fontSize = "30px";
 }
});

Мы присваиваем следующую директиву changestyle для div.

<div v-changestyle>VueJS Directive</div>

Если мы просмотрим код элемента в браузере, то увидим отображение текста VueJs Directive в красном цвете и с увеличенным размером шрифта до 30px. Результат

Мы использовали метод bind, который является частью директивы method. Нам понадобятся три аргумента e1 и элемент, которому должна быть присвоена пользовательская директива. Привязка — это как передача аргументам пользовательской директиве, например, v-changestyle = ”{color:’green’}”, где green будет вычисляться в аргументе привязки, а vnode — это элемент, то есть nodename.

В следующем примере мы консолидировали документы. Ниже приведён пример, на котором значение было передано пользовательской директиве.

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "databinding">
 <div v-changestyle = "{color:'green'}">VueJS Directive</div>
 </div>
 <script type = "text/javascript">
 Vue.directive("changestyle",{
 bind(e1,binding, vnode) {
 console.log(e1);
 console.log(binding.value.color);
 console.log(vnode);
 e1.style.color=binding.value.color;
 e1.style.fontSize = "30px";
 }
 });
 var vm = new Vue({
 el: '#databinding',
 data: {
 },
 methods : {
 },
 });
 </script>
 </body>
</html>

Результат

Цвет текста изменён на красный. Значение передаётся при помощи следующего кода.

<div v-changestyle = "{color:'green'}">VueJS Directive</div>

А доступ можно получить при помощи следующего отрывка кода.

Vue.directive("changestyle",{
 bind(e1,binding, vnode) {
 console.log(e1);
 console.log(binding.value.color);
 console.log(vnode);
 e1.style.color=binding.value.color;
 e1.style.fontSize = "30px";
 }
});

Фильтры

VueJS поддерживает фильтры, которые помогают форматировать текст. Они используются вместе с v-bind и интерполяциями ({{}}). Для фильтров нам нужно указывать символ конвейеризации в конце выражений JavaScript. Пример

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "databinding">
 <input  v-model = "name" placeholder = "Enter Name" /><br/>
 <span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
 </div>
 <script type = "text/javascript">
 var vm = new Vue({
 el: '#databinding',
 data: {
 name : ""
 },
 filters : {
 countletters : function(value) {
 return value.length;
 }
 }
 });
 </script>
 </body>
</html>

В коде выше мы создали простой фильтр countletters. Фильтр countletters подсчитывает количество символов, введённых в текстовое поле. Чтобы использовать фильтры, нам нужно использовать свойство filter и определить используемый фильтр с помощью следующего кода.

filters : {
 countletters : function(value) {
 return value.length;
 }
}

Мы определяем метод countletters и возвращаем заданную длину строки. Чтобы использовать фильтр в отображении, мы использовали оператор pipe и имя фильтра, то есть countletters.

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>

В браузере будет отображаться следующее.

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

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>

Теперь countletters будет содержать три параметра: message, a1 и a2. Кроме того, мы можем передать множественные фильтры интерполяции при помощи следующего кода.

<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>

В свойстве фильтров countlettersA и countlettersB будут содержаться два метода и countlettersA будет передавать данные в countlettersB.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree