Custom instruction

Instructions are used to simplify DOM operations and encapsulate the underlying DOM operations. We can customize directive Settings when we want to use some DOM functionality that the built-in directives don’t have.

Custom global directives

• Directives that can be used by any Vue instance or component.

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

<script>
    // Get focus automatically when an object is inserted into the DOM
    Vue.directive('focus', {
      inserted (el, binding) {
        //binding gets the parameters of the bindingel.focus(); }});new Vue({
      el: '#app'.data: {}});</script>
Copy the code

Custom local directives

• Directives that can be used within the current Vue instance or component.

<div id="app">
    <input type="text" v-focus>
</div>
  
<script>
    // Custom local directives
    new Vue({
      el: '#app'.data: {},
      directives: {
        focus: { inserted (el) { el.focus(); }}}});</script>
Copy the code

The filter

Filters are used to format text content. Filters can be used in interpolation and v-bind.

Global filter

  • A single data can be passed into multiple filters for processing.
<div id="app">
    <p v-bind:title="value | filterA">This is the label</p>
    <p>{{ value2 | filterA }}</p>
  </div>

  <div id="app2">
    <p>{{ value | filterA }}</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    // Set the global filter
    Vue.filter('filterA'.function (value) {
      return value.split(The '-').join(' ');
    });


    new Vue({
      el: '#app'.data: {
        value: 'a-b-c'.value2: 'x-y-z'}});new Vue({
      el: '#app2'.data: {
        value: 'q-w-e'}})</script>
Copy the code
  • A filter can pass in multiple parameters.
<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(The '-').join(' ');
    });

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

Local filter

  • Local filters can only be used in the current Vue instance.
  • If a local filter has the same name as a global filter, only the local filter takes effect.
<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(The '-').join(' ');
        },
        filterB: function (value) {
          return value.split(' ').reverse().join(' ');
        },
        filterC (value, prefix) {
          returnprefix + value; }}});</script>
Copy the code

Calculate attribute

  • The vue.js view does not recommend writing complex logic, which is not conducive to maintenance.
  • The calculation attribute is used in the form of attribute, and the corresponding function is automatically executed when accessing.
<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('Function function performed');
          var arr = this.arr;
          var sum = 0;
          for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
          }
          returnsum; }},computed: {
        getResult () {
          console.log('Evaluated property performed');
          var arr = this.arr;
          var sum = 0;
          for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
          }
          returnsum; }}})</script>
Copy the code

Methods are different from computed

  • Computed has a cache type, whereas Methods does not.
  • Computed is accessed by attribute name, and methods needs to be called.
  • Computed applies only to computing operations.

V-for is combined with computed attributes

<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('Code executed');
          Only more than 10 array contents are returned
          return this.arr.filter(item= > item > 10); }}});</script>
Copy the code

Evaluate the setter for the property

  • By default, computed properties only have getters, and vue.js also allows setters for computed properties.
<div id="app">
    <p>{{ fullName }}</p>
</div>

<script>
    var vm = new Vue({
      el: '#app'.data: {
        firstName: '张'.lastName: '三'
      },
      computed: {
        // Default writing mode:
        /* fullName () { return this.firstName + this.lastName; } * /

        // Write getter and setter separately
        fullName: {
          get () {
            return this.firstName + this.lastName;
          },
          set (newValue) {
            var nameArr = newValue.split(' ');
            this.firstName = nameArr[0];
            this.lastName = nameArr[1]; }}}});</script>
Copy the code

The listener

  • Listeners are used to listen for data changes and perform specified actions.
  • To listen for changes in the object’s internal values, write watch as an object and set the option deep: true.
  • Note: When you change (not replace) an array or object, the new value in the callback function is the same as the old value, because their references refer to the same array, object.
  • Note: Do not use index and length for array operations. Listener functions cannot be triggered.
<div id="app"></div>

<script>
    var vm = new Vue({
      el: '#app'.data: {
        title: 'Here's the content'.obj: {
          content1: Content of the '1'.content2: Content of the '2'
        },
        arr: [1.2.3.4.5]},watch: {
        title (val, oldVal) {
          console.log('Title has been modified', val, oldVal);
        },
        obj: {
          deep: true,
          handler (val, oldVal) {
            console.log('OBj has been modified', val, oldVal);
            console.log(val === oldVal);
          }
        },
        arr (val, oldVal) {
          console.log('ArR changed', val, oldVal)
        }
      }
    });
</script>
Copy the code

Vue DevTools

  • Vue. Js official provided to debug Vue application tools.
  • Vue DevTools pages must use vue.js, not vue.min. js. Pages must be opened over HTTP, not file.

Vue.js life cycle

  • The vue.js lifecycle refers to the lifecycle of a Vue instance.
  • The life cycle of a Vue instance refers to the process of creating, running, and destroying the instance.

Vue.js life cycle function

  • By setting life cycle functions, you can perform functions at specific stages of the life cycle.
  • Lifecycle functions are also called lifecycle hooks.

Creation phase:

  • BeforeCreate: called before instance initialization.
  • Created: called after an instance is created.
  • BeforeMount: called before the instance is mounted.
  • Mounted: Indicates that an instance is mounted.
  • Features: Each instance can only be executed once.

Operation phase:

  • BeforeUpdate: Called after data is updated before view is updated.
  • Updated: Invoked after the view is updated.
  • Features: Call on demand.

Destruction stage:

  • BeforeDestroy: Called before instance destruction.
  • Destroyed: Called after the instance is destroyed.
  • Features: Each instance can only be executed once.