Vue学习笔记【2】

1.Vue过滤器(Filter)

1.1 什么是过滤器？

过滤器就像一个加工车间，过滤器可以筛选出符合条件的，对不符合条件的进行加工处理；

1.2 vue过滤器用于何处？

官方给出：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

个人理解：过滤器可以将得到的数据优化成你想要的格式

1.3 vue过滤器如何用？

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。如下：

<!-- 在双花括号中 -->
{{ message | filterName }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | filterName"></div>

注意：过滤器可以串联使用
{{ message | filterA | filterB }} // message 先由filterA处理，将处理结果给filterB继续处理

2.自定义过滤器

vue中的过滤器分为两种：局部过滤器和全局过滤器

2.1 定义全局过滤器

无参数过滤器：

Vue.filter('filterName', function (msg) {
  //如何处理数据
  return msg.replace(/单纯/g, '邪恶') //将msg中的单纯替换成邪恶
})

有参数过滤器：

Vue.filter('filterName', function (msg,arg1,arg2) {
  //如何处理数据
  return msg.replace(/单纯/g, arg1+arg2) //将msg中的单纯替换成邪恶
})

完整示例：

<div id="app">
   <p>{{ msg | msgFormat}}</p>   //无参过滤器的使用
   <p>{{ msg | msgFormat2('疯狂','~~')}}</p>   //有参过滤器的使用
</div>
//msg: 我是单纯的少年
<script>
   // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
   Vue.filter('msgFormat', function(msg) {
       // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
       return msg.replace(/单纯/g, '邪恶') //我是邪恶的少年
   })
   Vue.filter('msgFormat2', function(msg，arg1，arg2) {
       // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
       return msg.replace(/单纯/g, arg1+arg2) //我是疯狂~~的少年
   })
</script>

2.2 定义局部过滤器

局部过滤器的定义和使用方法与全局的过滤器一样。
唯一的区别在于局部过滤器是定义在vue的实例中。

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
    el: '#app',
    data: {
        msg: '我是单纯的少年'
    },
    methods: {},
    //定义私用局部过滤器。只能在当前 vue 对象中使用
    filters: {
        dataFormat(msg) {
            return msg.replace(/单纯/g, '邪恶') //我是邪恶的少年
        }，
        dataFormat2(msg，arg1，arg2) {
            return msg.replace(/单纯/g, arg1+arg2) //我是疯狂~~的少年
        }
    }
});

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用

3.按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

Vue提供的按键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up   （上）
.down（下）
.left（左）
.right（右）

4.自定义按键修饰符

通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112   //112为f1的键盘码

//F2 键抬起时调用add方法
<input type="text" class="form-control" v-model="name" @keyup.f1="add">

5.自定义指令(directive)

5.1 自定义全局&局部指令

Vue中常用的指令：v-text、v-html、v-if、v-show、v-bind（:）、v-on（@）、v-cloak、v-model
具体用法参看Vue学习笔记【1】

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

举个聚焦输入框的例子，当页面加载时，input输入框将获得焦点。
只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。

注册全局指令

// 注册一个全局自定义指令 `v-focus`
//参数1：指令 的名称，注意，在定义的时候，指令的名称前面不要加 v- 前缀
//在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
//参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数在特定的阶段，执行特定的函数
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

注册局部指令，组件中也接受一个 directives 的选项

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：

<input v-focus>

5.1 自定义指令时的钩子函数

Vue.directive('focus', {
       //每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
       bind: function (el) {
           //注意在每个函数中，第一个参数永远时el，表示被绑定了指令的那个函数，这个 el 参数时原生的 js 对象
           //在元素刚绑定了指令的时候，还没有插入到 DOM 中去，这时候调用 focus 方法没有作用
           //因为一个元素，只有插入 DOM 之后，才能获取焦点
           // el.focus()
        },
 
       // inserted 表示元素插入到 DOM 中的时候会执行的函数，只执行一次
       inserted: function (el) {
          el.focus()
       },
 
       //当VNode更新的时候，会执行函数，可能会触发多次
       updated: function (el) {
 
       }
})

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

如果说函数只打算在 bind 和 update 上，可以进行简写，简写后两个方法上都有函数

var vm2 = new Vue ({
      el: '#app2',
      data: {
        // dt: new Date(),
      },
      directives: {
        'focus' : function(el, binding) {
          // el.focus()
        }
      },  
})

5.2 自定义指令时的钩子函数的参数

官网解释如下：

注意：除了 el 之外，其它参数都应该是只读的，切勿进行修改。