VueJS-ディレクティブ
ディレクティブは、VueJSが特定の方法で物事を行うための指示です。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";
}
});次の変更スタイルをdivに割り当てています。
<div v-changestyle>VueJS Directive</div>ブラウザに表示される場合、テキストVueJsディレクティブが赤色で表示され、フォントサイズが30pxに拡大されます。
出力
ディレクティブの一部であるbindメソッドを使用しました。3つの引数が必要ですe1、カスタムディレクティブを適用する必要がある要素。バインディングは、カスタムディレクティブに渡される引数に似ています。たとえば、v-changestyle =” {color： 'green'}”です。ここで、緑色はバインディング引数で読み取られ、vnodeは要素（ノード名）です。
次の例では、すべての引数を慰め、それぞれがどのような詳細を提供するかを示しています。
以下は、カスタムディレクティブに値が渡される例です。
<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>
And it is accessed using the following piece of code.
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フィルターは、テキストボックスに入力された文字数をカウントします。フィルタを使用するには、次のコードでfilterプロパティを使用し、使用するフィルタを定義する必要があります。
filters : {
countletters : function(value) {
return value.length;
}
}メソッドを定義しています countletters 入力した文字列の長さを返します。
ディスプレイでフィルターを使用するために、パイプ演算子とフィルターの名前を使用しました。 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 3つのパラメータがあります。 message, a1, and a2。
次のコードを使用して、複数のフィルターを補間に渡すこともできます。
<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>フィルタプロパティで countlettersA そして countlettersB 2つの方法と countlettersA 詳細をに渡します countlettersB。