这是我参与 8 月更文挑战的第 14 天，活动详情查看： 8月更文挑战
本教程为入门教程，如有错误，请各位前端大佬指出。
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>
