在Vue中自定义指令:
inserted:
inserted主要涉及和行为相关的指令, 来看这个界面:
现在我们想自定义一个指令v-focus,使得每次进入页面时,我们的光标都停在search的输入栏。为了实现这个功能,可以定义全局指令,代码如下:
Vue.directive('focus',{
inserted:function(el){
el.focus()
}
})
- Vue.directive是自定义指令的语句
- inserted:function(el)中的el不可省略
- 最终形成的指令为v-focus
将上述代码插入到**<script> 代码块最前端**,得到全部代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.inner{
height:30px;
background-color:crimson
}
</style>
<link href="./cssfiles/table_type1.css">
</head>
<body>
<div id="app">
<div class="inner">user management</div>
<label>
Id:<input type="text" v-model="id">
</label>
<label>
Name:<input type="text" v-model="name" @keyup.enter="add">
</label>
<input type="button" value="add" @click="add">
<label>
Search:<input type="text" v-model="keywords" v-focus>
</label>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td>{{item.name}}</td>
<td>{{ item.ctime }}</td>
<td>
<a href="" @click.prevent="delete(item.id)">delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.directive('focus',{
inserted:function(el){
el.focus()
}
})
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'userA',ctime:new Date()},
{id:2,name:'userB',ctime:new Date()},
{id:3,name:'userC',ctime:new Date()}
],
msg:'vue test'
},
methods:{
add(){
var user={id:this.id,name:this.name,ctime:new Date()}
this.list.push(user)
this.id=''
this.name=''
},
delete(id){
this.list.some((item,i) => {
if(item.id==id){
this.list.splice(i,1)
return true;
}
})
},
search(keywords){
var newList=[]
this.list.forEach(item=>{
if(item.name.indexOf(keywords)!=-1){
newList.push(item)
}
})
return newList
}
}
})
</script>
</body>
</html>
显示的效果为:
可以看到进入页面后,search栏的输入框内有光标
bind:
bind主要涉及样式相关的指令,还是上面那个界面,现在我们希望search文本框中字体的颜色为红色,自定义指令如下:
Vue.directive('color',{
bind:function(el,arg){
el.style.color=arg.value
}
})
这段代码的意思是,我们自定义的指令名为v-color,arg是传入参数的形参,是一个表示颜色的字符串。全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.inner{
height:30px;
background-color:crimson
}
</style>
<link href="./cssfiles/table_type1.css">
</head>
<body>
<div id="app">
<div class="inner">user management</div>
<label>
Id:<input type="text" v-model="id">
</label>
<label>
Name:<input type="text" v-model="name" @keyup.enter="add">
</label>
<input type="button" value="add" @click="add">
<label>
Search:<input type="text" v-model="keywords" v-color="'blue'">
</label>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td>{{item.name}}</td>
<td>{{ item.ctime }}</td>
<td>
<a href="" @click.prevent="delete(item.id)">delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.directive('color',{
bind:function(el,arg){
el.style.color=arg.value
}
})
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'userA',ctime:new Date()},
{id:2,name:'userB',ctime:new Date()},
{id:3,name:'userC',ctime:new Date()}
],
msg:'vue test'
},
methods:{
add(){
var user={id:this.id,name:this.name,ctime:new Date()}
this.list.push(user)
this.id=''
this.name=''
},
delete(id){
this.list.some((item,i) => {
if(item.id==id){
this.list.splice(i,1)
return true;
}
})
},
search(keywords){
var newList=[]
this.list.forEach(item=>{
if(item.name.indexOf(keywords)!=-1){
newList.push(item)
}
})
return newList
}
}
})
</script>
</body>
</html>
可以看到search输入框部分的代码为:
<label>
Search:<input type="text" v-model="keywords" v-color="'blue'">
</label>
注意这里"‘blue’“是一个字符串(双引号内单引号),如果写成"blue”(只有双引号)则代码会在data数据块中找变量blue而不是识别blue这个字符串。
显示的效果为: