一、过滤器概念
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。
作用
在我们页面显示值之前加一层过滤，展示我们过滤后的值
注意事项
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
使用语法
- {{变量 | 过滤器名}}
- {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值
全局定义：
通过Vue提供的filter方法定义：Vue.filter()
参数：过滤器的名字和过滤器执行函数
私有定义
ilters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。
- 注意事项
- 函数的第一个参数都是data，也就是我们要过滤的值。
- 过滤器可以自定义一些参数。
- 过滤器函数的返回值就是最终显示的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<script src="./vue-2.4.0.js"></script> <!-- 导入 Vue 2.4.0 版本的 JavaScript 文件 -->
</head>
<body>
<div id='app'>
<!-- 在 id 为 'app' 的 div 中渲染列表和半径及其面积 -->
<!-- 循环遍历 list 数组中的元素，将每个元素作为 data 参数传递给名为 deleter 的过滤器，生成一个新的字符串并输出在 li 元素中 -->
<ul>
<li v-for="item in list" :key="item">{{item | deleter}}</li>
<!-- 注意，v-for 指令内的语句 item 等价于 (item, index)；:key 指令绑定 item 为该元素的唯一 key 值，提高性能 -->
<li></li>
<!-- 名为 deleter 的过滤器后面加了一对括号，但过滤器函数并不需要接收任何参数，因此会忽略掉 () 中的内容 -->
<li v-for="item in list" :key="item">{{item | deleter() }}</li>
</ul>
<!-- 在输出的 div 中，使用插值表达式和名为 getSize 的过滤器计算圆的面积 -->
<div> 正方形边长是{{m}} 面积是{{m | area}}m²</div>
</div>
<script>
// 定义名为 deleter 的全局过滤器，该函数接受 data 和 format 两个参数，其中，data 表示原始数据，format 表示格式化参数，这里只用到了 data 参数
Vue.filter('deleter', function (data, format) {
return data.replace('NM', "**") // 将 NM 替换为 **
})
// 定义名为 getSize 的全局过滤器，计算圆的面积
Vue.filter('area', function (data, format) {
return data * data
})
const vm = new Vue({
el: '#app', // 定义 Vue 实例挂载的目标元素
data: {
m: 8, // 初始化半径为 10
list: ['你瞅啥', "瞅你咋地", '再瞅一个试试', '我试NM'] // 初始化列表
},
methods: {
},
})
</script>
</html>
二、键盘修饰符
- 监听所有按键：v-on:keyup
- 监听指定按键：v-on:keyup.按键码
使用按键别名
vue提供的按键别名
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按下提交</title>
<script src="./vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<form action="" method="POST" role="form">
<legend>手机密码是多少？</legend>
<div class="form-group">
<label for="">请输入 </label>
<input type="text" v-model="inputValue" @keyup.down="submit" placeholder="快点输入啊！！！着急！！">
</div>
</div>
</form>
</body>
<script>
new Vue({
el:'#app',
data:{
inputValue: ''
},
methods:{
submit() {
console.log(this.inputValue)
alert(this.inputValue)
}
}
})
</script>
</html>
五、全局定义
使用这个方法进行全局定义：Vue.directive()
参数：
1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
2. 对象，里面包含三个钩子方法
- bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted 这个元素已经渲染到界面上之后执行
- update 当元素有更新的时候执行
3. 这三个方法的参数有哪些
- el：指令所绑定的元素，可以用来直接操作 DOM 。
- binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义</title>
<script src="./vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<div v-color="'aqua'">你好</div>
</div>
</body>
<script>
Vue.directive('color', {
bind(el, bind) {
el.style.color = bind.value;
},
inserted(el) {
el.style.color = 'aqua'
},
update(el) {
}
})
// var vm = new Vue({
// el: '#app',
// directives: {
// color(el, bind) {
// el.style.color = 'aqua';
// },
// focus: {
// inserted(el) {
// el.focus();
// },
// bind(el) {
// },
// updated() {
// }
// }
// }
// })
let app = new Vue({
el:'#app',
})
</script>
</html>
8331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
