Zu den APIs von
vue gehören: 1. „$forceUpdate“; 4. „$root“; . „$data“; 10. „$props“ usw.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
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 更新了
})Beschreibung:
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.
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:
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"Beschreibung:
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.
Funktion: Erzwingen Sie ein erneutes Rendern der Vue-Instanz.
Verwendung:
vm.$forceUpdate()
Beschreibung: Beachten Sie, dass es nur die Instanz selbst und die in den Slot-Inhalt eingefügten untergeordneten Komponenten betrifft, nicht alle untergeordneten Komponenten.
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 )
Anweisungen:
ps: Hauptverwendungsszenarien, Sie können Vue vermeiden Die Beschränkung der zu löschenden Eigenschaft kann nicht erkannt werden
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>// 注册
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}// 全局注册
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})Beschreibung:
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.
Funktion: Wird zum Registrieren benutzerdefinierter Anweisungen verwendet.
Verwendung:
<!-- 当页面加载时，该元素将获得焦点 --> <input v-focus>
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})// 注册局部指令，组件中也接受一个 directives 的选项
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}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.Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})<template>
<div>
<button @click="increase(-1)">减 1</button>
<span >{{ currentValue }}</span>
<button @click="increase(1)">加 1</button>
</div>
</template>
<script>
export default {
name: 'InputNumber',
props: {
value: {
type: Number
}
},
data () {
return {
currentValue: this.value
}
},
watch: {
value (val) {
this.currentValue = val;
}
},
methods: {
increase (val) {
this.currentValue += val;
this.$emit('input', this.currentValue);
}
}
}
</script>props 一般不能在组件内修改，它是通过父级修改的，因此实现 v-model 一般都会有一个 currentValue 的内部 data，初始时从 value 获取一次值，当 value 修改时，也通过 watch 监听到及时更新；组件不会修改 value 的值，而是修改 currentValue，同时将修改的值通过自定义事件 input 派发给父组件，父组件接收到后，由父组件修改 value。所以，上面的数字选择器组件可以有下面两种使用方式：
<template>
<InputNumber v-model="value" />
</template>
<script>
import InputNumber from '../components/input-number/input-number.vue';
export default {
components: { InputNumber },
data () {
return {
value: 1
}
}
}
</script>或：
<template>
<InputNumber :value="value" @input="handleChange" />
</template>
<script>
import InputNumber from '../components/input-number/input-number.vue';
export default {
components: { InputNumber },
data () {
return {
value: 1
}
},
methods: {
handleChange (val) {
this.value = val;
}
}
}
</script>如果你不想用 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: 'InputNumber',
props: {
number: {
type: Number
}
},
model: {
prop: 'number',
event: 'change'
},
data () {
return {
currentValue: this.number
}
},
watch: {
value (val) {
this.currentValue = val;
}
},
methods: {
increase (val) {
this.currentValue += val;
this.$emit('number', this.currentValue);
}
}
}
</script>在 model 选项里，就可以指定 prop 和 event 的名字了，而不一定非要用 value 和 input，因为这两个名字在一些原生表单元素里，有其它用处。
如果你使用过 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: 'InputNumber',
props: {
value: {
type: Number
}
},
methods: {
increase (val) {
this.$emit('update:value', this.value + val);
}
}
}
</script>用例：
<template>
<InputNumber :value.sync="value" />
</template>
<script>
import InputNumber from '../components/input-number/input-number.vue';
export default {
components: { InputNumber },
data () {
return {
value: 1
}
}
}
</script>看起来要比 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() {
}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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Fensterhandle-Methode abrufen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
