От автора: Vue JS директивы являются, по сути, инструкцией к действиям. Мы уже знакомы с такими директивами как v-if, v-show, v-else, v-for, v-bind, v-model, v-on, и т.д.
В данном разделе мы познакомимся с пользовательскими директивами. Мы создадим глобальные директивы, похожим образом, как мы это делали с компонентами.
Синтаксис
|
1 2 3 4 |
Vue.directive('nameofthedirective', { bind(e1, binding, vnode) { } }) |
Директива создается использованием Vue.directive. Она получает имя, как продемонстрировано в коде выше. Давайте рассмотрим пример для того, чтобы разобраться, как работают директивы.
Пример
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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, как показано в следующем коде.
|
1 2 3 4 5 6 7 |
Vue.directive("changestyle",{ bind(e1,binding, vnode) { console.log(e1); e1.style.color = "red"; e1.style.fontSize = "30px"; } }); |
Мы присваиваем следующую директиву changestyle для div.
|
1 |
<div v-changestyle>VueJS Directive</div> |
Если мы просмотрим код элемента в браузере, то увидим отображение текста VueJs Directive в красном цвете и с увеличенным размером шрифта до 30px. Результат
Мы использовали метод bind, который является частью директивы method. Нам понадобятся три аргумента e1 и элемент, которому должна быть присвоена пользовательская директива. Привязка — это как передача аргументам пользовательской директиве, например, v-changestyle = ”{color:’green’}”, где green будет вычисляться в аргументе привязки, а vnode — это элемент, то есть nodename.
В следующем примере мы консолидировали документы. Ниже приведён пример, на котором значение было передано пользовательской директиве.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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> |
Результат
Цвет текста изменён на красный. Значение передаётся при помощи следующего кода.
|
1 |
<div v-changestyle = "{color:'green'}">VueJS Directive</div> |
А доступ можно получить при помощи следующего отрывка кода.
|
1 2 3 4 5 6 7 8 9 |
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. Пример
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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 и определить используемый фильтр с помощью следующего кода.
|
1 2 3 4 5 |
filters : { countletters : function(value) { return value.length; } } |
Мы определяем метод countletters и возвращаем заданную длину строки. Чтобы использовать фильтр в отображении, мы использовали оператор pipe и имя фильтра, то есть countletters.
|
1 |
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span> |
В браузере будет отображаться следующее.
Мы также можем передать в фильтр аргументы, используя следующий код.
|
1 |
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span> |
Теперь countletters будет содержать три параметра: message, a1 и a2. Кроме того, мы можем передать множественные фильтры интерполяции при помощи следующего кода.
|
1 |
<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span> |
В свойстве фильтров countlettersA и countlettersB будут содержаться два метода и countlettersA будет передавать данные в countlettersB.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
