</!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
</style>
</head>
<body>
<!-- 指令：指令与属性相似，是对指定元素样式或行为的赋予。可以有效的管理元素。-->
<!-- 在页面中自定义的全局指令，可以为每一个 vm 对象中的元素提供服务，只要 vm 中的标签引用了全局指令那么一定会即时生效，一般情况下我们普遍做的都是自定义全局指令来管理元素。 -->
<!-- 值得一提的是自定义指令需要经常搭配 vuejs 中的钩子函数来进行操作。在我们学习完指令之后，将在下一个章节（对象的生命周期）对钩子函数进行详细的学习。 -->
<!-- 自定义全局指令：Vue.directive() -->
<!-- 案例：自定义一个全局指令让文本框自动获取焦点 -->
<!-- 我们也可以通过参数为指令进行赋值 -->
<!--bind：用来操作元素样式
inserted：用来操作元素行为
updated： -->
<div id="app">
<!-- 如果不添加单引号，会在vm中的data中找green变量，所以要添加单引号 -->
<!-- 测试自定义指令：<input type="" v-dt1="'orange'"/> -->
<div v-dt1="'red'">-1</div>
<div v-dt1="'green'">1</div>
<!-- 使用私有指令和全局指令是一样的，都是以V-指令形式来写 -->
<p v-mydt>显示信息</p>
</div>
<!-- -->
<script>
//自定义全局指令
/*
参数1：指令名称，在定义的时候前面不需要添加“v-”前缀，但是在使用的过程中一定要添加“v-”前缀
参数2：json对象，在这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作(钩子函数)
*/
Vue.directive("dt1",{
//以下定义了3个函数，这3个函数是与vuejs对象生命周期密切相关的函数，在每个函数中，第一个参数el表示element,表示指令操作的元素；el对象同时也是一个原生的js对象(dom对象)
//每当指令绑定到改元素上的时候，会立即执行这个bind函数。该函数只执行一次
/*
参数1：需要操作的元素element
参数2：是在元素使用指令的时候，为函数传递的一个具体的值，该函数来接收该值，通过赋值的形式为元素来进行操作
*/
bind:function(el,binding){
//将指定文本的信息改变颜色
// el.style.color="red";
//为本狂中的信息会随着传递值的变化而变化
el.style.color=binding.value;
//在页面加载完毕后，指定文本框自动获取焦点
//方法一：无效；因为在元素绑定了指令的时候，还没有插入到dom中去，这时候调用focus方法一定是没有作用的一个元素，只有插入dom之后，才能触发dom相关的方法
// el.focus();
},
//表示在元素插入到dom的时候，会执行该函数，该函数只会执行一次
inserted:function(el){
el.focus();
},
//当vue.js中的元素更新的时候，会触发该函数，元素是可以随时进行更新的，所以该函数也可以触发多次
updated:function(el){
//对于当前指令相关的测试，该函数暂时用不到
}
})
var vm=new Vue({
el : "#app",
data:{
"str1":"aaa",
"currentTime":new Date(),
"fruitList":[
{"id":"A0001","name":"苹果","price":10},
{"id":"A0002","name":"菠萝","price":15},
{"id":"A0003","name":"桃子","price":8},
]
},
methods:{
},
filters:{
filter3:function(value){
return value+"bbb";
}
},
directives:{
"mydt":{
bind:function(el){
el.style.color="red";
}
}
},
})
</script>
</body>
</html>
浙公网安备 33010602011771号