一、过滤器
1.1vue中的过滤器
概念：Vue.js 允许自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
<body>
<div id="app">
<p>{
{ msg | msgFormat('疯狂+1', '123') | test }}</p>
</div>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + '========'
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，单纯的男人'
},
methods: {}
});
</script>
</body>
1.2多个vue实例
页面可以有多个vue实例，使用vue语法，必须实例化
<body>
<div id="app">
<p>{
{ msg }}</p>
</div>
<h2>{
{1+1}}</h2>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎学习Vue'
}
})
</script>
代码中的h2标签不会显示出2 ，虽然用到了vue语法，但是没有实例化，若想显示，需加上下面的代码
var vm2 = new Vue({
el: '#app2',
data: {
}
})
1.3私有过滤器
<div id="app">
{
{ message | resetString }} *这里方法名不需要加括号，默认把前边参数传进去，如果还有别的参数可以加括号传进去*
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello'
},
filters: {
resetString : function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
1.4全局过滤器和私有过滤器区别
1.4.1全局过滤器是定义在script标签里面，所有的vue实例控制的HTML片段都可以使用，
1.4.2私有过滤器定义在vue实例内部，只有自己可以使用
1.4.3当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
二、键盘修饰符和自定义键盘修饰符
2.1常见键盘修饰符
vue中只定义了这几个，如果想监听别的比如F2，会没有作用，这个时候就需要自定义键盘修饰符了，在js中键盘上每个值都有一个对应的keycode,查询可知F2对应的keycode为113
2.2自定义键盘修饰符
Vue.config.keyCodes.f2 = 113;
<input type="text" v-model="name" @keyup.f2="add">
三、自定义指令
3.1自定义全局指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 创建
最低0.47元/天 解锁文章
5478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
