Vueグローバルインストラクション
コア機能のデフォルトの組み込みコマンド（v-modelおよびv-show）に加えて、Vueではカスタムコマンドの登録も可能です。以下にカスタム手順を紹介しVue.filter、Vue.directive
組み込みの命令は通常、フォーム要素にもう少し作用し、カスタム命令はすべての要素に適用できます。
フィルタの基本的な紹介
- Vue.jsでは、いくつかの一般的なテキストフォーマットに使用できるカスタムフィルターを使用できます。
- フィルタは、二重中括弧補間とvバインド式の2つの場所で使用できます。
- フィルタは、「パイプ
|」記号で示されるJavaScript式の最後に追加する必要があります - vueには、ローカルフィルターとグローバルフィルターの2種類のフィルターがあります。
グローバルフィルター
グローバルフィルターの文法構造を定義する
Vue.filter('过滤器的名称',function(){})
function（）の最初のパラメーターは、パイプ文字の前に渡されるデータに固定されています
フィルタはJavaScript関数であるため、パラメータを受け取ることができます。
{
{ message | filterA('arg1', 'arg2') }}
filterAこれは、3つのパラメーターを受け取るフィルター関数として定義されています。ここで、最初のパラメーターはメッセージ値arg1、2番目の引数はプレーン文字列arg2、3番目のパラメーターは式の値です。
使用法
一部の文字を他の文字に置き換えると、フィルターを使用できます
<div id="app">
<p>{
{msg | msgFormat('极了','!')}}</p>
</div>
<script>
Vue.filter('msgFormat',function(msg,arg1,arg2){
console.log(msg);
return msg.replace(/好/g,arg1+arg2);
})
new Vue({
el:'#app',
data:{
msg:'你好，我好，大家好！'
}
})
</script>
{
{msg | msgFormat}}これは、msgがパイプシンボルを介してカスタムmsgFormatフィルターに流れ込み、関数でmsgを取得できることを意味します。
フィルタは直列に接続できます
{
{ message | filterA | filterB }}
filterAこれは、単一のパラメーターを受け取るフィルター関数として定義され、式メッセージの値がパラメーターとして関数に渡されます。同じ呼が単一の引数とフィルタ関数として定義され続けfilterB、そしてfilterA結果がに送信されますfilterB。
使用法：
<div id="app">
<p>{
{msg | msgFormat('极了','!')| test}}</p>
</div>
<script>
Vue.filter('msgFormat',function(msg,arg1,arg2){
console.log(msg);
return msg.replace(/好/g,arg1+arg2);
})
Vue.filter('test',function(msg){
return msg+'==========='
})
new Vue({
el:'#app',
data:{
msg:'你好，我好，大家好！'
}
})
</script>
ローカルフィルター
ローカルフィルターの文法構造を定義する
Vueはfilters属性プライベートフィルターを定義するために提供します
filters:{过滤器的名称:function(){}}
使用法：時間形式を変換する
<div id="app">
<p>这是使用过滤器的时间格式：{
{dt | dateFormat}}</p>
<p>这是原始格式：{
{dt}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
dt:new Date()
},
methods: {
},
filters:{
dateFormat:function(dataStr){
console.log(dataStr);
var dt=new Date(dataStr);
// yyyy-mm-dd
var y=dt.getFullYear();
var m=(dt.getMonth()+1).toString().padStart(2,'0');
var d=dt.getDate().toString().padStart(2,'0');
var hh=dt.getHours().toString().padStart(2,'0');
var mm=dt.getMinutes().toString().padStart(2,'0');
var ss=dt.getSeconds().toString().padStart(2,'0');
return `${
y}年${
m}月${
d}日 ${
hh}:${
mm}:${
ss}`
}
}
})
</script>
View.directive
カスタムグローバルディレクティブ
文法構造：
Vue.directive('自定义指令名称'，{
bind:function(){
},
inserted:function(){
},
updated:function(){
}
})
v-自定义指令名称
カスタムコマンドの対応する使用形式は次のとおりです。たとえば、カスタムコマンドの名前がfocusの場合、コマンドを使用するとv-focusになります。
カスタム命令の名前は小文字でなければなりません
フック関数として、バインド、挿入、更新がここで修正されました
bind：ディレクティブが要素にバインドされると、そのディレクティブはすぐに1回だけ呼び出されます。inserted：バインドされた要素が親ノードに挿入されると、関数が呼び出されます（親ノードのみが存在することが保証されていますが、ドキュメントに挿入されていない可能性があります）。updated：VNodeがデータを更新すると、関数が実行され、複数回トリガーされる可能性があります
使用法：
<div id="app">
<input type="text" name="" v-focus id="">
<p v-color>这是一个p标签</p>
</div>
<script>
// 定义全局的自定义指令 focus
Vue.directive('focus',{
bind:function(){
},
inserted:function(el){
el.focus();
},
updated:function(){
}
})
Vue.directive('color',{
bind:function(el){
el.style.color='red'
}
})
new Vue({
el:'#app'
})
</script>
注：各フック関数の最初のパラメーターはel ---->であり、命令
elパラメーターにバインドされた要素がネイティブjsオブジェクトであることを示します
最適化：この時点での色は「デッド」に固定されています。コマンドシートに値を割り当てて色を変更する場合は、カスタムコマンドをバインドする必要があります。
<p v-color="'pink'">这是一个p标签</p>
Vue.directive('color',{
bind:function(el，binding){
console.log(bindin.name);
el.style.color=binding.value;
}
})
カスタムプライベートインストラクション
プライベートフィルターを定義する方法と同様に、vueはdirective属性命令を定義するために提供します
文法構造：
new Vue({
el:'#app',
data:{
},
methods: {
},
directives:{
'自定义指令名称':{
bind:function(el){
},
inserted:function(){
},
updated:function(){
}
}
}
})
使用法：
<div id="app">
<p>这是一个p段落标签</p>
<p v-fontweight="900" v-fontsize="50">这是一个p段落标签</p>
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods: {
},
// 自定义私有过滤器
filters:{
},
// 自定义私有指令
directives:{
'fontweight':{
bind:function(el,binding){
el.style.fontWeight=binding.value;
}
},
'fontsize':function(el,binding){
console.log(binding);
el.style.fontSize=binding.value+'px'
}
}
})
</script>
