Vuejs-directives
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ディレクティブが赤色で表示され、フォントサイズが30ピクセルに増加します。
出力
ディレクティブの一部である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フィルタは、テキストボックスに入力された文字の数をカウントします。 フィルターを使用するには、次のコードによって、フィルタープロパティを使用し、使用するフィルターを定義する必要があります。
filters : {
countletters : function(value) {
return value.length;
}
}メソッド 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つのパラメーターがあります。 *メッセージ、a1、およびa2 *。
次のコードを使用して、複数のフィルターを補間に渡すこともできます。
<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>フィルタープロパティでは、 countlettersA および countlettersB が2つのメソッドになり、 countlettersA は詳細を countlettersB に渡します。
