一.什么是指令?
1.vue中内置的指令
在vue中提供了一些基础的指令,方便我们直接操作操作DOM节点,主要的内置指令有:
v-cloak:用于在数据还没插入到标签时,不显示原始文本,需要添加样式 .
<style>
[v-cloak]{
display: none;
}
</style>
<span v-cloak>{
{
mess}}</span>
v-text:用于将数据填充到标签中,但是不会出现闪动问题,类似插值和v-cloak的效果.
//这两个效果一样
<span v-text='mess'></span
<span v-cloak>{
{
mess}}</span>
v-html:用于将HTML片段填充到标签中,可以解析HTML标签.
<p v-html="message"></p>
...
message:`<span>this is a message</span>`,
效果:
v-pre:用于显示原始信息.
<p v-pre>{
{
message}}</p>
效果:
v-once:只渲染一次,后面元素中的数据变化时,都不会重新渲染.
v-for:用于遍历,类似于for …in…遍历
<li v-for="(item,index) in items" :key="index">{
{
item}}</li>
...
items:[1,2,3,4],
v-on:用于监听DOM事件.并触发绑定的javascript代码,简写为@.
<button v-on:click>登录</button>
<button @:click>登录</button>
v-bind:用于属性绑定,将属性动态和数据绑定.
v-model:实现表单数据和Model中的数据双向绑定.
v-if 、v-else-if、v-els:用于条件渲染,根据条件选择DOM节点显示.
v-show & v-if:用于显示和隐藏元素.
区别:
v-if:每次元素都会重新删除和创建,条件为false时,不会出现在DOM树上.
v-show:不会删除和创建,只是设置display:none样式.
2.vue自定义指令
除了核心的指令,Vue也允许注册自定义指令,在需要对DOM底层进行操作,这时候就会用到自定义指令.自定义指令包括全局自定义指令和局部指令.
二.自定义指令的用法
自定义指令语法:
Vue.directive('Directive_Name',{
Hook_Function:callback(el,binding)})
-
Directive_Name:自定义指令的名称(约定全小写),不需要加v-,使用时需要添加v- -
Hook_Function钩子函数
可选参数:
bind:当指令绑定到元素上时，就会执行该函数，执行一次； 此时元素还未插入到 DOM 中去。
一般执行样式相关的操作。
inserted:被绑定元素插入父节点时会调用该函数，执行一次。
一般执行 JS 行为相关的操作。
update当 vnode 更新时执行该函数，可能执行多次。 -
el用来绑定指令的元素，是一个原生 DOM 对象。 -
binding记录自定义指令信息的对象，包含许多属性，例如
name指令名，没有 v- 前缀。
value指令的绑定值（表达式计算完成后的值）。
expression指令绑定值的字符串形式（原样）。
注册一个v-focus指令,实现在页面加载完成后,输入框自动获取焦点.
全局自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局自定义指令</title>
</head>
<body>
<div id="app">
<input type="text" name="" id="" v-focus>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
//全局注册一个自定义指令:v-focus
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
const vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
自定义局部指令:
<template>
<div>
<input type="text" name="" id="" v-focus>
</div>
</template>
<script>
export default {
name:'Directive',
directives:{
focus:{
inserted:function(el){
el.focus()
}
}
}
}
</script>