1、对于vue来说，它有一个很强大得功能，就是指令系统
v-bind-->:
v-on-->@
v-if、v-for、v-model
2、自定义指令
通过自定义指令来完成对DOM得更多操作，并且可以在不同得场景下给我们提供很方便得操作
全局指令：放到任何一个组件中都可以使用（需要把全局指令放在入口文件中来设置，这样得话每一个组件中都可以进行使用了）
directive方法进行指令得声明，这个方法是vue上的
Vue.directive(指令名，实现得方式)
如果需要多个自定义指令直接使用directive方法即可
局部指令：只能在当前得vue实例中使用
directives：{
指令名：{
钩子函数： function(el){}
}
}
el:代表得也是当前操作对象
3、钩子函数：
inserted:只有有父节点得时候这个指令才能生效，
el：第一个参数，代表得是操作当前指令对象
4、钩子函数得参数：
el：第一个参数，代表得是操作当前指令对象
binding:绑定对象
name：指令名字
value：指令所绑定得值
oldValue：前一个值
expression：绑定得值是字符串
arg：给指令传的参数
modifiers：修饰对象得
vnode：编译生成得虚拟节点
oldVnode：上一个虚拟节点（只能在update和componentUpdated两个钩子函数中使用）
5、把常用得效果通过指令进行封装，用得时候直接通过指令名称进行调用就行了
<
template
>
<
div
id=
'app'
>
ID:
<
input
type=
"text"
v-model="
id"
v-focus
><
br
>
Name:
<
input
type=
"text"
v-model="
name"
><
br
>
<
button
type=
"button" @
click="
add"
v-color
>添加
</
button
>
<
transition-group
tag=
"ul"
name=
"fade"
> // transition 与 事件结合
<
li
v-for="(
item,
index)
in
list" :
key="
item.
id" @
click="
del(
index)"
>
id:{{
item.
id}} ,name{{
item.
name}}
</
li
>
</
transition-group
>
<!-- <div v-test-directive:xixi.a="msg"></div> -->
<
div
v-test-directive:
xixi.
a="{
name:
'lili'}"
></
div
>
<
ul
>
<
li
>首页
</
li
>
<
li
v-dropDown
>公司介绍
<
ul
>
<
li
>苹果
</
li
>
<
li
>苹果
</
li
>
<
li
>苹果
</
li
>
</
ul
>
</
li
>
<
li
v-dropDown
>公司介绍
<
ul
>
<
li
>苹果
</
li
>
<
li
>苹果
</
li
>
<
li
>苹果
</
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
</
template
>
<
script
>
import
$
from
"jquery"
export
default {
name:
'App',
data(){
return {
id:
'',
name:
'',
list: [{
id:
1,
name:
'lili'},{
id:
2,
name:
'jurey'}],
msg:
"我是msg",
show:
false
}
},
methods: {
add() {
this.
list.
push({
id:
this.
id,
name:
this.
name})
this.
id=
''
this.
name=
''
},
del (
i) {
this.
list.
splice(
i,
1)
}
},
directives :{
'color'
:{
inserted
:
function(
el){
el.
style.
color=
'#0f0'
}
},
'test-directive'
:{
bind
:
function(
el,
binding){
el.
innerHTML=
"name:" +
binding.
name +
"value:"+
binding.
value.
name +
'<br>'+
binding.
expression+
'<br>'+
'arg:'+
binding.
arg +
'<br>'+
JSON.
stringify(
binding.
modifiers)
}
},
'dropDown'
: {
inserted
:
function (
el) {
function
down(){
$(
el).
children(
'ul').
slideDown()
}
function
upp (){
$(
el).
children(
'ul').
slideUp()
}
el.
addEventListener(
'mouseenter',
down)
el.
addEventListener(
'mouseleave',
upp)
}
}
}
}
</
script
>
<
style
>
#app{
font-family:
'Avenir',
Helvetica,
Arial,
sans-serif;
-webkit-font-smoothing:
antialiased;
-moz-osx-font-smoothing:
grayscale;
text-align:
center;
color:
#2c3e50;
margin-top:
60px;
}
li{
background:
skyblue;
width:
800px;
/* height: 20px; */
line-height:
20px;
margin:
5px;
}
li:hover{
background:
#f99;
}
.fade-enter,
.fade-leave-to{
opacity:
0;
transform:
translateY(
30px);
}
.fade-leave-active,
.fade-enter-active{
transition:
1s;
}
.fade-move{
transition:
2s;
}
li
ul{
display:
none;
}
/* .fade-leave-active{
position: absolute;
} */
</
style
>