article Annuaire
Filtre 1.Vue (le filtre)
1.1 Qu'est-ce qu'un filtre?
Installation de traitement comme un filtre, le filtre peut filtrer admissible, n'étaient pas admissibles au traitement;
1.2 filtre vue pour où?
Officiel donne: Vue.js vous permet de personnaliser les filtres, peuvent être utilisés dans un texte commun formatage.
compréhension personnelle: Le filtre peut être optimisé pour obtenir les données dans le format que vous voulez
1.3 Comment filtre vue?
Les filtres peuvent être utilisés en deux endroits: deux accolades interpolation et expressions v-bind. Comme suit:
<!-- 在双花括号中 -->
{{ message | filterName }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | filterName"></div>
Remarque: Le filtre peut être utilisé en série
{{message | filterA | filterB} } // un message filterA d' abord par le traitement dans le résultat de la transformation de continuer filterB
2. Filtre personnalisé
vue Vous un filtre en deux types: les filtres de filtre global et local
Définir filtre global 2.1
Aucun paramètre de filtre:
Vue.filter('filterName', function (msg) {
//如何处理数据
return msg.replace(/单纯/g, '邪恶') //将msg中的单纯替换成邪恶
})
Il y a des paramètres de filtre:
Vue.filter('filterName', function (msg,arg1,arg2) {
//如何处理数据
return msg.replace(/单纯/g, arg1+arg2) //将msg中的单纯替换成邪恶
})
Exemple complet:
<div id="app">
<p>{{ msg | msgFormat}}</p> //无参过滤器的使用
<p>{{ msg | msgFormat2('疯狂','~~')}}</p> //有参过滤器的使用
</div>
//msg: 我是单纯的少年
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function(msg) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, '邪恶') //我是邪恶的少年
})
Vue.filter('msgFormat2', function(msg，arg1，arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg1+arg2) //我是疯狂~~的少年
})
</script>
Définir filtre local 2.2
Définition du filtre partiel et utiliser le même filtre global.
La seule différence est que les filtres locaux sont définis dans l'exemple de vue.
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '我是单纯的少年'
},
methods: {},
//定义私用局部过滤器。只能在当前 vue 对象中使用
filters: {
dataFormat(msg) {
return msg.replace(/单纯/g, '邪恶') //我是邪恶的少年
}，
dataFormat2(msg，arg1，arg2) {
return msg.replace(/单纯/g, arg1+arg2) //我是疯狂~~的少年
}
}
});
Remarque: Quand il y a deux nom local et global des mêmes filtres lorsque l'appel sera au principe de proximité, à savoir: la priorité locale sur filtre global est appelé filtre
3. touches de modification
Lors de l'écoute des événements de clavier, nous avons souvent besoin de vérifier le bouton détaillé. Vue permet aux v-sur modificateurs clavier bouton Ajouter lorsque des événements d'écoute
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
Vue fournit des modificateurs clés:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up （上）
.down（下）
.left（左）
.right（右）
4. modificateurs personnalisés clés
Alias personnalisés modificateurs de clés config.keyCodes objets globaux par:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112 //112为f1的键盘码
//F2 键抬起时调用add方法
<input type="text" class="form-control" v-model="name" @keyup.f1="add">
5. commande personnalisée (directive)
5.1 et instruction locale globale personnalisée
Vue des instructions couramment utilisées: v-texte, v-html , v-si, v-show, v-bind (:), v sur (@), v-manteau, v-modèle
utilisation spécifique référant notes d'étude Vue [ 1]
En plus de la fonctionnalité de base de la valeur par défaut commande intégrée (v-modèle et v-show), Vue a également permis d'enregistrer commande personnalisée.
Par exemple , la boîte d'entrée de mise au point, lorsque la page est chargée, l' entrée se concentrera boîte d' entrée.
Tant que vous ne l' avez pas cliqué sur tout le contenu après l' ouverture de la page ou la zone d'entrée doit être mise au point.
registre d'instruction GLOBALS
// 注册一个全局自定义指令 `v-focus`
//参数1：指令 的名称，注意，在定义的时候，指令的名称前面不要加 v- 前缀
//在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
//参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数在特定的阶段，执行特定的函数
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
Inscription instruction locale, les directives d'assemblage accepte également une option
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
Ensuite, vous pouvez utiliser le nouvel attribut v-focus sur un élément dans le modèle, comme suit:
<input v-focus>
5.1 fonction de crochet d'instruction personnalisée
Vue.directive('focus', {
//每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
bind: function (el) {
//注意在每个函数中，第一个参数永远时el，表示被绑定了指令的那个函数，这个 el 参数时原生的 js 对象
//在元素刚绑定了指令的时候，还没有插入到 DOM 中去，这时候调用 focus 方法没有作用
//因为一个元素，只有插入 DOM 之后，才能获取焦点
// el.focus()
},
// inserted 表示元素插入到 DOM 中的时候会执行的函数，只执行一次
inserted: function (el) {
el.focus()
},
//当VNode更新的时候，会执行函数，可能会触发多次
updated: function (el) {
}
})
bind: appelée une seule fois, la première fois, est lié à l'élément de commande de l'appel. Ici, vous pouvez définir une initialisation unique.
inséré: Appelée lorsque le nœud parent est inséré dans l'élément de liaison (pour assurer que seule la présence du nœud parent, mais ne doit pas nécessairement être inséré dans le document).
Mise à jour: les mises à jour lorsque VNODE où les appels d'assemblage, mais peut se produire avant que leurs enfants de mise à jour VNODE. La valeur de l'instruction peut être modifié, ou non. Mais vous pouvez ignorer la mise à jour du modèle inutile en comparant les valeurs avant et après la mise à jour (paramètres de la fonction de crochet en détail ci-dessous).
componentUpdated: instruction où les composants et les sous-VNODE VNODE tous les appels après la mise à jour.
unbind: il est appelé une seule fois, lorsque la solution d'instruction d'appel et de l'élément de liaison.
Si la fonction ne se passe bind et mise à jour, peut être abrégé, deux méthodes ont la fonction raccourci
var vm2 = new Vue ({
el: '#app2',
data: {
// dt: new Date(),
},
directives: {
'focus' : function(el, binding) {
// el.focus()
}
},
})
fonction de raccordement de commande de paramètre personnalisé 5,2
Site officiel est expliqué comme suit:
Remarque: En plus de la EL, d' autres paramètres doivent être en lecture seule, ne doit pas être modifié.
