vue基础知识（三）

样式处理

v-bind 对于class的增强

v-bind 对于类名操作的增强, 需要注意的是:class 不会影响到原来的 class 属性。

:class=“对象/数组”

(1) :class=“对象”

{ 类名: 布尔值, 类名: 布尔值 }

如果是true, 加上这个类, 如果是false, 移除这个类

(2) :class=“数组”

[‘类名1’, ‘类名2’, ‘类名3’]

只要有这个类, 就加上

v-bind对于style 的增强

:style=“对象”

例如 :style=“{ width: ‘200px’ }”

过滤器

基本使用

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器主要是用来转换格式。过滤器本质上就是一个函数。

过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。

过滤器由 “管道符” |进行调用，示例代码如下

格式x — 过滤器 -----> 格式y

将来开发过程中, 肯定会有对于字符串进行处理转换的需求, vue中提供了一个专门的语法: 过滤器。

1. 定义过滤器 Vue.filter(过滤器名字, 处理字符串的函数)

(1) 函数的返回值, 就是处理字符串的结果

(2) 函数的形参, 可以拿到处理的字符串

2. 使用过滤器 {{ msg | 过滤器名字 }}

<!-- 通过过滤器对message进行过滤 -->
<p>{{message | 过滤器}}</p>

<!-- 通过过滤器对title进行过滤 -->
<div :title="title | 过滤器"></div> 
1
2
3
4
5

过滤器的参数

使用过滤器支持传参。在使用过滤器的时候，可以额外传递参数

{{ name | filter1(77) | filter2(99) }}

// 使用过滤器的时候可以传递额外的参数
<p>{{msg | filterA(arg1, arg2)}}</p>

// 定义过滤器的时候，需要接收额外的参数
filters: {
  // 建议给过滤器的额外参数提供默认值
  filterA (input, arg1 = 0, arg2 = 1) {
    
  }
} 
1
2
3
4
5
6
7
8
9
10
11
12

全局过滤器 和 局部过滤器

全局过滤器: 如果希望在多个 vue 组件之间共享过滤器，可以在main.js中通过Vue.filter()方法定义全局过滤器。

// 参数1： 过滤器名称
// 参数2： 过滤器函数，处理过滤逻辑
Vue.filter('upper', function (input) {
  return input.slice(0, 1).toUpperCase() + input.slice(1)
}) 
1
2
3
4
5

局部过滤器: 组件私有的过滤器，可以在 filters 节点中定义过滤器，该过滤器只能在当前组件中调用。

export default {
  /* 
    filters: {
      过滤器名字 (过滤的值) {
        return 处理后的值
      }
    }
  */
  filters: {
    upper (input) {
      return input.slice(0, 1).toUpperCase() + input.slice(1)
    }
  }
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

调用多个过滤器

过滤器可以串联地进行调用。

<template>
  <!-- 把msg的值，交给filterA进行处理 -->
  <!-- 把filterA处理的结果，再交给filterB进行处理 -->
  <!-- 最终把filterB处理，把最终的值渲染到页面 -->
  <div>{{msg | filterA | filterB}}</div>
</template> 
1
2
3
4
5
6

计算属性computed

• 是根据已知的数据进行计算得到的新属性
• 仅当依赖的属性发生了改变，计算属性才会重新执行。

使用

• 在 computed 里面
• 写起来像一个方法
• 用起来像一个属性
• 返回计算后的值

特点

• 计算属性一定要有返回值, 返回的值,就会标签要展示的内容
• 计算属性可以使用data里之前已知的值
• (重要) 只要计算属性的 依赖的数据发生了变化 , 计算属性就会重新计算

使用场景

根据已知(data)的值,得到一个新值。并且 , 新值只想跟依赖的数据(已知的值)的变化而变化 (实时更新)

自定义指令

基本使用

1. 定义指令

   Vue.directive(指令名, 配置对象)

2. 使用指令

   使用时, v-指令名, 注意加上 v- 开头。

<div id="app">
  <input type="text">
  <input type="text">
  <input type="text" v-focus>
  <input type="text">
  <input type="text">
</div>

<script src="./vue.js"></script>
<script>
  // autofocus 有一定兼容, vue中不推荐直接使用
  // vue中推荐, 使用js的方式让元素获取焦点 inp.focus(), 将这个dom操作封装到自定义指令中
  
  // 自定义指令的语法:
  // 1. 定义指令
  // Vue.directive(指令名, 配置对象)
  // 2. 使用指令
  // 注意: v-指令 名
  Vue.directive('focus', {
    // inserted是一个函数, 会在指令所在元素被插入到页面中时执行
    inserted (el) {
      el.focus()
    }
  })
  
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello vue'
    }
  })
</script> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32