Was sind die am häufigsten verwendeten APIs in Vue?-Front-End-Fragen und Antworten-php.cn

Zu den APIs von

vue gehören: 1. „$forceUpdate“; 4. „$root“; . „$data“; 10. „$props“ usw.

Was sind die am häufigsten verwendeten APIs in Vue?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

nextTick

Funktion: Fügen Sie einen verzögerten Rückruf hinzu, nachdem der nächste Dom-Aktualisierungszyklus endet. Nach dem Ändern der Daten können Sie den aktualisierten Dom erhalten.
Verwendung:

Vue.nextTick( [callback, context] )
vm.$nextTick( [callback] )
// 用法2
// 作为一个 Promise 使用 (2.1.0 起新增)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

Nach dem Login kopieren

Beschreibung:

callback: verzögerte Callback-Funktion
context: optionales Objekt

ps: neu seit 2.1.0: wenn kein Callback bereitgestellt wird und in einer Umgebung, die Promise unterstützt, Es wird ein Versprechen zurückgegeben. Bitte beachten Sie, dass Vue keine Promise-Polyfills enthält. Wenn Ihr Zielbrowser Promise also nicht nativ unterstützt (IE: Warum sehen Sie mich an), müssen Sie die Polyfills selbst bereitstellen.

Erweiterung: In Bezug auf den Ausführungsmechanismus und die Verwendungsszenarien von nextTick müssen wir auch die ähnlichen requestAnimationFrame() und process.nextTick() beherrschen. Ersteres ist der eigene Monitor des Browsers (wird vor dem nächsten Neuzeichnen ausgeführt), und letzteres ist es In der Knotenumgebung wird es zum nächsten Ereignisabfragezeitpunkt ausgeführt.

Mixin

Funktion: Registrieren Sie ein Mixin, das sich auf jede nach der Registrierung erstellte Vue-Instanz auswirkt. Plug-in-Autoren können Mixins verwenden, um benutzerdefiniertes Verhalten in Komponenten einzufügen.
Verwendung:

// 为自定义的选项 &#39;myOption&#39; 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: &#39;hello!&#39;
})
// => "hello!"

Nach dem Login kopieren

Beschreibung:

Objekt: eine Eigenschaft oder Methode einer VM

ps: Bitte verwenden Sie globale Mixins mit Vorsicht, da sich dies auf jede individuell erstellte Vue-Instanz (einschließlich Komponenten von Drittanbietern) auswirkt ) ). In den meisten Fällen sollte dies nur auf benutzerdefinierte Optionen angewendet werden, wie im obigen Beispiel. Es wird empfohlen, es als Plugin zu veröffentlichen, um wiederholte Anwendungsmixins zu vermeiden.

$forceUpdate

Funktion: Erzwingen Sie ein erneutes Rendern der Vue-Instanz.
Verwendung:

vm.$forceUpdate()

Nach dem Login kopieren

Beschreibung: Beachten Sie, dass es nur die Instanz selbst und die in den Slot-Inhalt eingefügten untergeordneten Komponenten betrifft, nicht alle untergeordneten Komponenten.

Festlegen, Löschen

Funktion: Eigenschaften reaktionsfähiger Daten festlegen und löschen und gleichzeitig Ansichtsaktualisierungen auslösen.
Verwendung:

// 用法1
Vue.set( target, key, value )
Vue.delete( target, key )
// 用法2
vm.$set( target, key, value )
vm.$delete( target, key )

Nach dem Login kopieren

Anweisungen:

target: Zielobjekt
key: hinzuzufügender Attributname
value: hinzuzufügender Attributwert

ps: Hauptverwendungsszenarien, Sie können Vue vermeiden Die Beschränkung der zu löschenden Eigenschaft kann nicht erkannt werden

Filter

Funktion: Wird für einige gängige Textformatierungen und einige kanonische Datenzuordnungen verwendet.
Verwendung:

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

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

Nach dem Login kopieren

// 注册
filters: {
  capitalize: function (value) {
    if (!value) return &#39;&#39;
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Nach dem Login kopieren

// 全局注册
Vue.filter(&#39;capitalize&#39;, function (value) {
  if (!value) return &#39;&#39;
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

Nach dem Login kopieren

Beschreibung:

Die Filterfunktion erhält immer den Wert des Ausdrucks (das Ergebnis der vorherigen Operationskette) als ersten Parameter.
Filter sollten am Ende von JavaScript-Ausdrücken hinzugefügt werden, was durch das „Pipe“-Symbol gekennzeichnet ist.

ps: Der Filter kann mehrere Parameter akzeptieren, z. B. {{ message |. filterA('arg1', arg2) }} Hier ist filterA als Filterfunktion definiert, die drei Parameter empfängt. Der Wert der Nachricht wird als erster Parameter verwendet, die gewöhnliche Zeichenfolge „arg1“ wird als zweiter Parameter verwendet und der Wert des Ausdrucks arg2 wird als dritter Parameter verwendet.

Richtlinie

Funktion: Wird zum Registrieren benutzerdefinierter Anweisungen verwendet.
Verwendung:

<!-- 当页面加载时，该元素将获得焦点 --> 
<input v-focus>

Nach dem Login kopieren

// 注册一个全局自定义指令 `v-focus`
Vue.directive(&#39;focus&#39;, {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

Nach dem Login kopieren

// 注册局部指令，组件中也接受一个 directives 的选项
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

Nach dem Login kopieren

Eingefügt ist nur eine der Interpolationsfunktionen der Registrierungsanweisung. Die vollständigen Registrierungsattribute können auch Folgendes umfassen:

bind: wird nur einmal aufgerufen, wenn die Anweisung gebunden ist Das Element zum ersten Mal aufrufen, wo Sie einmalige Initialisierungseinstellungen vornehmen können.

eingefügt: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (nur der übergeordnete Knoten ist garantiert vorhanden, wird aber nicht unbedingt in das Dokument eingefügt).
- Update: Wird aufgerufen, wenn der VNode der Komponente aktualisiert wird, es kann jedoch passieren, dass der untergeordnete VNode aktualisiert wird. Der Wert der Direktive kann sich geändert haben oder auch nicht, unnötige Vorlagenaktualisierungen können jedoch ignoriert werden, indem die Werte vor und nach der Aktualisierung verglichen werden.
- componentUpdated: Wird aufgerufen, nachdem alle VNodes der Komponente, in der sich die Anweisung befindet, und ihre Unter-VNodes aktualisiert wurden.
- unbind: Wird nur einmal aufgerufen, wenn die Bindung der Anweisung vom Element gelöst wird.
- ```
Vue.directive(&#39;my-directive&#39;, {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})
```
  Nach dem Login kopieren

V-Modell wird häufig für die bidirektionale Bindung von Daten an Formularelemente wie verwendet. Neben nativen Elementen kann es auch in benutzerdefinierten Komponenten verwendet werden.

V-Modell ist ein Syntaxzucker, der in Requisiten: Wert und Ereignisse: Eingabe zerlegt werden kann. Das heißt, die Komponente muss eine Requisite mit dem Namen „Value“ und ein benutzerdefiniertes Ereignis mit dem Namen „Input“ bereitstellen. Wenn diese beiden Bedingungen erfüllt sind, kann der Benutzer das V-Modell für die benutzerdefinierte Komponente verwenden. Das folgende Beispiel implementiert beispielsweise einen Zahlenselektor:

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: &#39;InputNumber&#39;,
    props: {
      value: {
        type: Number
      }
    },
    data () {
      return {
        currentValue: this.value
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit(&#39;input&#39;, this.currentValue);
      }
    }
  }
</script>

Nach dem Login kopieren

props 一般不能在组件内修改，它是通过父级修改的，因此实现 v-model 一般都会有一个 currentValue 的内部 data，初始时从 value 获取一次值，当 value 修改时，也通过 watch 监听到及时更新；组件不会修改 value 的值，而是修改 currentValue，同时将修改的值通过自定义事件 input 派发给父组件，父组件接收到后，由父组件修改 value。所以，上面的数字选择器组件可以有下面两种使用方式：

<template>
  <InputNumber v-model="value" />
</template>
<script>
  import InputNumber from &#39;../components/input-number/input-number.vue&#39;;

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

Nach dem Login kopieren

或：

<template>
  <InputNumber :value="value" @input="handleChange" />
</template>
<script>
  import InputNumber from &#39;../components/input-number/input-number.vue&#39;;

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    },
    methods: {
      handleChange (val) {
        this.value = val;
      }
    }
  }
</script>

Nach dem Login kopieren

如果你不想用 value 和 input 这两个名字，从 Vue.js 2.2.0 版本开始，提供了一个 model 的选项，可以指定它们的名字，所以数字选择器组件也可以这样写：

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: &#39;InputNumber&#39;,
    props: {
      number: {
        type: Number
      }
    },
    model: {
      prop: &#39;number&#39;,
      event: &#39;change&#39;
    },
    data () {
      return {
        currentValue: this.number
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit(&#39;number&#39;, this.currentValue);
      }
    }
  }
</script>

Nach dem Login kopieren

在 model 选项里，就可以指定 prop 和 event 的名字了，而不一定非要用 value 和 input，因为这两个名字在一些原生表单元素里，有其它用处。

.sync 修饰符

如果你使用过 Vue.js 1.x，一定对 .sync 不陌生。在 1.x 里，可以使用 .sync 双向绑定数据，也就是父组件或子组件都能修改这个数据，是双向响应的。在 Vue.js 2.x 里废弃了这种用法，目的是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。

不过在 Vue.js 2.3.0 版本，又增加了 .sync 修饰符，但它的用法与 1.x 的不完全相同。2.x 的 .sync 不是真正的双向绑定，而是一个语法糖，修改数据还是在父组件完成的，并非在子组件。

仍然是数字选择器的示例，这次不用 v-model，而是用 .sync，可以这样改写：

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span >{{ value }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: &#39;InputNumber&#39;,
    props: {
      value: {
        type: Number
      }
    },
    methods: {
      increase (val) {
        this.$emit(&#39;update:value&#39;, this.value + val);
      }
    }
  }
</script>

Nach dem Login kopieren

用例：

<template>
  <InputNumber :value.sync="value" />
</template>
<script>
  import InputNumber from &#39;../components/input-number/input-number.vue&#39;;

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

Nach dem Login kopieren

看起来要比 v-model 的实现简单多，实现的效果是一样的。v-model 在一个组件中只能有一个，但 .sync 可以设置很多个。.sync 虽好，但也有限制，比如：

不能和表达式一起使用（如 v-bind:title.sync="doc.title + '!'" 是无效的）；
不能用在字面量对象上（如 v-bind.sync="{ title: doc.title }" 是无法正常工作的）。

其它简单的常用属性和方法

// console.log(vm.$root); 
vm.$root    //实例对象

vm.$el  //根元素（真实的DOM元素）
// console.log(vm.$el);

vm.$el.innerHTML    //得到根元素（真实的DOM元素）中的内容
// console.log(vm.$el.innerHTML);

vm.$data    //实例下的data对象
// console.log(vm.$data);

vm.$options     //实例下的挂载项
// console.log(vm.$options);

vm.$props   //组件之间通信的数据
// console.log(vm.$props);

vm.$parent      //在组件中，指父元素
// console.log(vm.$parent);

vm.$children    //在组件中，指子代元素
// console.log(vm.$children);

vm.$attrs   //用来获取父组件传递过来的所有属性
// console.log(vm.$attrs);

vm.$listeners   //用来获取父组件传递过来的所有方法
// console.log(vm.$listeners);

vm.$slots   //组件中的插槽
// console.log(vm.$slots);

vm.$scopedSlots     //用来访问作用域插槽
// console.log(vm.$scopedSlots);

vm.$refs    //用来定位DOM元素（使用ref进行追踪）
// console.log(vm.$refs);

vm.$watch   //用于监听数据（在vue文件中使用后会自动销毁）
// console.log(vm.$watch);

vm.$emit    //用于派发事件（常用于数据通信）
// console.log(vm.$emit);

vm.$on  //用于监听事件的派发
// console.log(vm.$on);

vm.$once    //只监听事件一次（之后不监听）
// console.log(vm.$once);

//生命周期
beforeCreate() {
}
created() {
}
beforeMount() {
}
mounted() {
}
beforeUpdate() {
}
updated() {
}
beforeDestroy() {
}
destroyed() {
}

Nach dem Login kopieren

（学习视频分享：vuejs教程、web前端）

Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten APIs in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!