本教程为入门教程，如有错误，请各位前端大佬指出。
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>
复制代码
评论