本教程为入门教程，如有错误，请各位前端大佬指出。
1.什么是自定义指令
Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，例如需要判断按钮是否显示，通常的解决方案就是自定义指令，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。
2.全局自定义指令代码实现
全局指令：在整个项目中都可以使用。下文将教你如何建立全局指令。
1.创建指令
在创建指令时，需要在main.js中新建与声明指令。
//全局指令 Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function(el) { // 聚焦元素 el.focus() } }) Vue.directive('mycss', { // 当被绑定的元素插入到 DOM 中时…… inserted: function(el) { // 聚焦元素 el.style.color = "#f00" } }) 复制代码
2.添加g-direct.js
同时我们也需要新建g-direct.js ，并在js中新建自定义指令。
import Vue from 'vue' //全局指令 Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function(el) { // 聚焦元素 el.focus() } }) Vue.directive('mycss', { // 当被绑定的元素插入到 DOM 中时…… inserted: function(el) { // 聚焦元素 el.style.color = "#f00" } }) 复制代码
3.引入g-direct.js
然后在main.js引入新建立的g-direct.js 。
import Vue from 'vue' import App from './App' import router from './router' import g_direct from './g-direct' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 复制代码
4.使用自定义指令
这样，我们就可以页面中使用我们新建立的自定义指令了。当使用指令后，会执行指令的函数。
<template> <div id="example-3"> hello <input v-focus type = "text" name = "" <p v-mycss>aaaa</p> </div> </template> <script> export default { name: 'anim', data () { return { show: true } }, methods: { } } </script> <style> </style> 复制代码
3.局部指令实现
顾名思义，局部指令为当前页面建立，且只能在当前页面使用。下文介绍如何建立和使用局部指令。
<template> <div id="example-3"> hello <input v-test type = "text" name = ""/> <p v-mycss>aaaa</p> </div> </template> <script> export default { name: 'anim', data () { return { show: true } }, methods: { }, directives: { test: { // 指令的定义 inserted: function (el) { el.focus() } } } } </script> <style> </style> 复制代码
inserted是什么意思 vue提供了5个勾子函数： 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置，bind是初始化调用。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
4.过滤器
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
1.全局过滤器
这里有两种写法，下文分别介绍。
1.直接写在main.js中
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import g_direct from './g-direct' Vue.config.productionTip = false Vue.filter('capitalize', function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 复制代码
2.新建.js文件然后引入
main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import g_direct from './g-direct' import filter from './filter' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 新建的filter.js文件 import Vue from 'vue' Vue.filter('capitalize', function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) 复制代码
3.调用过滤器
这样就可以执行过滤器中的函数了。
<template> <div id="example-3"> <p>{{message|capitalize}}</p> </div> </template> <script> export default { name: 'anim', data () { return { message: "aaaaa" } }, methods: { } } </script> <style> </style> 复制代码
2.局部过滤器
只能在本页面中新建使用。以下附上代码。
<template> <div id="example-3"> {{money|myMoney}} </div> </template> <script> export default { name: 'anim', data () { return { message: "aaaaa", money:11 } }, methods: { }, filters:{ myMoney(value){ return "$"+value } } } </script> <style> </style>
