前端学习-Vue进阶语法

自定义指令

指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装。
当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置。

自定义全局指令

• 指的是可以被任意 Vue 实例或组件使用的指令。

<div id="app">
    <input type="text" v-focus.a.b="100+1">
</div>

<script>
    // 当对象被插入dom时自动获取焦点
    Vue.directive('focus', {
      inserted (el, binding) {
        //binding获取绑定的一些参数
        el.focus();
      }
    });

    new Vue({
      el: '#app',
      data: {

      }
    });
</script>

自定义局部指令

• 指的是可以在当前 Vue 实例或组件内使用的指令。

<div id="app">
    <input type="text" v-focus>
</div>
  
<script>
    // 自定义局部指令
    new Vue({
      el: '#app',
      data: {},
      directives: {
        focus: {
          inserted (el) {
            el.focus();
          }
        }
      }
    });
</script>

过滤器

过滤器用于进行文本内容格式化处理。 过滤器可以在插值表达式和 v-bind 中使用。

全局过滤器

• 可以将一个数据传入到多个过滤器中进行处理。

<div id="app">
    <p v-bind:title="value | filterA">这是标签</p>
    <p>{{ value2 | filterA }}</p>
  </div>

  <div id="app2">
    <p>{{ value | filterA }}</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    // 设置全局过滤器
    Vue.filter('filterA', function (value) {
      return value.split('-').join('');
    });


    new Vue({
      el: '#app',
      data: {
        value: 'a-b-c',
        value2: 'x-y-z'
      }
    });
    new Vue({
      el: '#app2',
      data: {
        value: 'q-w-e'
      }
    })
    
</script>

• 一个过滤器可以传入多个参数。

<div id="app">
    <p>{{ value | filterC('lagou-', 200) }}</p>
    <p>{{ value | filterC('qqq-', 200) }}</p>
</div>
<script>
    Vue.filter('filterC', function (par1, par2, par3) {
      return par2 + par1.split('-').join('');
    });

    new Vue({
      el: '#app',
      data: {
        value: 'a-b-c'
      }
    });
  </script>

局部过滤器

• 局部过滤器只能在当前 Vue 实例中使用。
• 局部过滤器和全局过滤器重名时只有局部过滤器会生效.

<div id="app">
    <p>{{ content | filterA | filterB }}</p>
    <p>{{ content | filterA | filterC('lagou-') }}</p>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        content: 'a-b-c',
        content2: 'x-y-z'
      },
      filters: {
        filterA: function (value) {
          return value.split('-').join('');
        },
        filterB: function (value) {
          return value.split('').reverse().join('');
        },
        filterC (value, prefix) {
          return prefix + value;
        }
      }
    });
  </script>

计算属性

• Vue.js 的视图不建议书写复杂逻辑，这样不利于维护。
• 计算属性使用时为属性形式，访问时会自动执行对应函数。

<div id="app">
    <p>{{ getSum() }}</p>
    <p>{{ getSum() }}</p>
    <p>{{ getSum() }}</p>

    <p>{{ getResult }}</p>
    <p>{{ getResult }}</p>
    <p>{{ getResult }}</p>
    <p>{{ getResult }}</p>
</div>

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: [1, 2, 3, 4, 5]
      },
      methods: {
        getSum () {
          console.log('执行了函数功能');
          var arr = this.arr;
          var sum = 0;
          for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
          }
          return sum;
        }
      },
      computed: {
        getResult () {
          console.log('执行了计算属性');
          var arr = this.arr;
          var sum = 0;
          for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
          }
          return sum;
        }
      }
    })
</script>

methods 与 computed 区别

• computed 具有缓存型，methods 没有。
• computed 通过属性名访问，methods 需要调用。
• computed 仅适用于计算操作。

v-for 与 计算属性结合

<div id="app">
    <ul>
      <li v-for="item in result">{{ item }}</li>
    </ul>

    <ul>
      <li v-for="item in result">{{ item }}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: [1, 11, 2, 22, 3, 33, 4, 44, 5, 55]
      },
      computed: {
        result () {
          console.log('执行了代码');
          //只会返回大于10个数组内容
          return this.arr.filter(item => item > 10);
        }
      }
    });
</script>

计算属性的 setter

• 计算属性默认只有 getter，Vue.js 也允许给计算属性设置 setter。

<div id="app">
    <p>{{ fullName }}</p>
</div>

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: '张',
        lastName: '三'
      },
      computed: {
        // 默认书写方式：
        /* fullName () {
          return this.firstName + this.lastName;
        } */

        // 分开书写 getter 与 setter
        fullName: {
          get () {
            return this.firstName + this.lastName;
          },
          set (newValue) {
            var nameArr = newValue.split(' ');
            this.firstName = nameArr[0];
            this.lastName = nameArr[1];
          }
        }
      }
    });
</script>

侦听器

• 侦听器用于监听数据变化并执行指定操作。
• 为了监听对象内部值的变化，需要将 watch 书写为对象，并设置选项 deep: true，这时通过 handler 设置处理函数。
• 注意:当更改(非替换)数组或对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组、对象。
• 注意:数组操作不要使用索引与length，无法触发侦听器函数。

<div id="app"></div>

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        title: '这是内容',
        obj: {
          content1: '内容1',
          content2: '内容2'
        },
        arr: [1, 2, 3, 4, 5]
      },
      watch: {
        title (val, oldVal) {
          console.log('title 被修改了', val, oldVal);
        },
        obj: {
          deep: true,
          handler (val, oldVal) {
            console.log('obj 被修改了', val, oldVal);
            console.log(val === oldVal);
          }
        },
        arr (val, oldVal) {
          console.log('arr 修改了', val, oldVal)
        }
      }
    });
</script>

Vue DevTools

• Vue.js 官方提供的用来调试 Vue 应用的工具。
• 注意事项:
  网页必须应用了 Vue.js 功能才能看到 Vue DevTools
  网页必须使用 Vue.js 而不是 Vue.min.js
  网页需要在 http 协议下打开，而不是使用 file 协议本地打开。

Vue.js 生命周期

• Vue.js 生命周期指的是 Vue 实例的生命周期。
• Vue 实例的生命周期，指的是实例从创建到运行，再到销毁的过程。

Vue.js 生命周期函数

• 通过设置生命周期函数，可以在生命周期的特定阶段执行功能。
• 生命周期函数也称为生命周期钩子。

创建阶段:

• beforeCreate:实例初始化之前调用。
• created: 实例创建后调用。
• beforeMount:实例挂载之前调用。
• mounted: 实例挂载完毕。
• 特点:每个实例只能执行一次。

运行阶段:

• beforeUpdate:数据更新后，视图更新前调用。
• updated: 视图更新后调用。
• 特点:按需调用。

销毁阶段:

• beforeDestroy:实例销毁之前调用。
• destroyed: 实例销毁后调用。
• 特点:每个实例只能执行一次。