1. 自定义指令
自定义指令时需要使用到钩子函数进行定义指令
全局指令
一进入界面输入框自动被选中
<body>
<div id="vueBox">
<input type="text" v-input_focus>
</div>
</body>
<script type="text/javascript">
Vue.directive('input_focus', {
inserted: function(el, binding) {
el.focus();
console.log( binding.value)
}
})
var vue = new Vue({
el: "#vueBox",
data: {
msg: '刷新即被选中'
}
})
</script>
局部指令
<body>
<div id="vueBox">
<input type="text" v-input_focus="msg">
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
msg: '刷新即被选中'
},
methods: {
a(event, a) {
console.log(event);
console.log(a);
}
},
directives: {
input_focus: {
inserted: function(el, binding) {
el.focus();
console.log(binding.value)
}
}
}
})
</script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c5RQcwZH-1587888425681)(en-resource://database/21358:1)]](https://img-blog.csdnimg.cn/2020042616115716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY1MTM1Ng==,size_16,color_FFFFFF,t_70)
2. 过滤器
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xxRwnOXA-1587888425692)(en-resource://database/21362:1)]](https://img-blog.csdnimg.cn/20200426161204480.png)
用于格式化数据 - 使用时可传参–类似函数调用*
语法： { { date属性名 | 过过滤器名 }} 以及在 v-bind:属性="data属性名 | 过滤器"
*全局过滤器
<body>
<div id="vueBox">
<input type="text" v-model="msg">
<p>{
{msg | filter}}</p>
</div>
</body>
<script type="text/javascript">
Vue.filter("filter", function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
})
var vue = new Vue({
el: "#vueBox",
data: {
msg: 'fd'
},
methods: {
},
})
</script>
*局部过滤器
<script>
var vue = new Vue({
el: "#vueBox",
data: {
msg: 'fd'
},
methods: {
},
filters: {
filter: function(val, args) {
console.log( args );
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
})
</script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sgr8HL7U-1587888425699)(en-resource://database/21364:1)]](https://img-blog.csdnimg.cn/20200426161213576.png)
3. 回调函数中是普通函数、箭头函数this指向问题
回调函数是：
- 箭头函数this指向父级对象
- 普通函数this指向window对象
<body>
<div id="vueBox">
<button v-on:click="test1">window对象</button>
<button v-on:click="test2">vue对象</button>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el: "#vueBox",
data: {
nums: [1,2,3,4]
},
methods: {
test1: function() {
this.nums.some(function(item) {
if(item == 1) {
console.log(this);
}
})
},
test2: function() {
this.nums.some((item) => {
if(item == 1) {
console.log(this);
}
})
}
}
})
</script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ix7e1BbI-1587888425703)(en-resource://database/21374:1)]](https://img-blog.csdnimg.cn/20200426161221467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY1MTM1Ng==,size_16,color_FFFFFF,t_70)