- 一、自定义指令
当vue提供的系统指令不能满足需求时,就需要自己定义指令来进行扩展。例如v-focus指令来实现文本框自动获取焦点功能。
练习1
具体知识点在代码的注释中!!!!!1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE自定义指令</title>
</head>
<body>
<div id="app">
<input v-jiaodian="xxx">
<!-- v-jiaodian后面没有东西,就是没有属性值 -->
<div v-ba="3+3">自定义指令</div>
<!-- 注意这里的v-ba一定要跟东西 -->
<div v-ba="pink">自定义指令修改颜色</div>
<div v-ba="blue">自定义指令修改颜色</div>
<div v-ba="green">自定义指令修改颜色</div>
</div>
<script src="vue.js"></script>
<script>
// 重点!!!!一定要在new VUE之前!!!!
Vue.directive("jiaodian", {
bind: function () {
console.log('bind')
},
inserted: function (el) {
el.focus();
// 这样在上边的input中调用v-jiaodian的时候,就会给一个焦点了
},
updated: function () {
console.log('update');
}
})
var vm = new Vue({
el: "#app",
data: {},
directives: {
// 如果只写一个方法,那么代表是update
// 第一个el代表的是作用在的元素, 第二个参数bind, 第三个参数vnode
// 第一个和第二个参数经常用到,第三四个不经常用
ba: function (el, bind, vnode) {
console.log(bind);
el.style.fontsize = '100px';
el.style.background = bind.expression;
// 当v-ba中是文字的时候,需要写expression
}
}
})
</script>
</body>
</html>
- 二、过滤器
过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。可被用于一些常见的文本格式化。
练习2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>局部过滤器</title>
</head>
<body>
<div id="app">
<h2>{{now | datefmt("-")}}</h2>
<!-- 过滤器的写法,| 过滤器(参数) -->
<!-- 过滤器的参数 sc就是上面datefmt的参数 - -->
<h2>{{msg | rs}}</h2>
<h2>{{msg | dl}}</h2>
<h2>{{msg | dl | dl | dl | dl | dl}}</h2>
<!-- 多重过滤器 -->
</div>
<script src="vue.js"></script>
<script>
// 在new vue之前写!!!
// 这个是全局的过滤器
Vue.filter("datefmt", function (input, sc) {
// 第一个参数input是要过滤的东西
let date = new Date(input);
// 获取日期
let year = date.getFullYear();
// 获取哪一年
let mon = date.getMonth() + 1;
// 获取月份
let day = date.getDate();
// 做一些美化
if (mon < 10) mon = '0' + mon;
if (day < 10) day = '0' + day;
return year + sc + mon + sc + date;
// ***************重点!!!过滤器一定要有return******************
})
var vm = new Vue({
el: "#app",
data: {
msg: 'yuanlei',
now: new Date(),
},
// 这里就是局部的过滤器
filters: {
rs: function (input) {
return input.split("").reverse().join("");
},
dl(input) {
return "$" + input;
}
}
})
</script>
</body>
</html>
- 自定义指令和过滤器都有“局部”和“全局”之分,即写在new Vue({})中,还是写在它外面,区别就是当写在new Vue({})外部的时候,这个指令或者过滤器是弄够以文件的形式emport并被其他文件import的,就是可以被很多个文件使用的!!!
今天的代码,自己拿去玩吧