So verwenden Sie Vue-Komponenten

Dieses Mal zeige ich Ihnen, wie Sie Vue-Komponenten verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Vue-Komponenten gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Vue-Instanz

Projektstartprozess

Sehen Sie sich jetzt unser Projekt an und denken Sie über den Startprozess des gesamten Projekts nach (um den Index direkt zu öffnen). .html-Methodenzugriff als Beispiel zur Veranschaulichung)?

Sie haben zuerst index.html geöffnet, es war nur ein p mit id='root' darin geschrieben, und Sie haben den gepackten Code eingeführt, und dann muss Vue ihn selbst ausgeführt haben (es kann als betrachtet werden). Vue-Initialisierung).

Als nächstes sollte „entry.js“ ausgeführt werden (da die Verpackung per Webpack gepackt wird, ist dies die Eintragsdatei, die Sie konfiguriert haben).

Was hat Entry.js getan? Ja, es hat ein Vue-Instanzobjekt erstellt, und dann ist der von diesem Objekt verwaltete Bereich anhand des el-Attributs bekannt. Es sollte das p mit id='root' sein index.html, also bleibt nur noch zu verstehen, wie dieses Vue-Instanzobjekt diesen Bereich verwaltet. Dies ist der nächste Inhalt.

Was ist ein Vue-Instanzobjekt?

Laut der offiziellen Dokumentation: Jede Vue-Anwendung beginnt mit der Erstellung einer neuen Vue-Instanz mit einer Vue-Funktion.

Sie können einfach verstehen, dass es sich nur um ein gewöhnliches Objekt handelt, aber diesem Objekt wurden einige besondere Funktionen zugewiesen. Lassen Sie uns es kennenlernen!

[Wir werden alle Experimente mit dem in Entry.js erstellten Vue-Objekt durchführen]

Die Methode zum Erstellen eines Vue-Instanzobjekts ist wie folgt:

var vm=new Vue({
  //一堆配置
});

Daher, was Als nächstes möchte ich über einige häufig verwendete Konfigurationen sprechen (nicht alle, die spezielleren sollten später erwähnt werden, schließlich ist alles von Anfang an, ich fürchte, wir werden beide zu müde sein).

Grundlegende Konfiguration von Vue-Instanzobjekten

[1]el: DOM-Knoten

In unserem Projekt konfigurieren wir:

el:'# root'

Dies ist eine Zeichenfolge, die dem CSS-Selektor etwas ähnelt und den gefundenen Knoten als Verwaltungsbereich verwendet (natürlich gibt es auch andere CSS-Optionen. Das Gerät kann auch verwendet werden ).

Darüber hinaus können Sie einen Knoten auch direkt übergeben. Lassen Sie uns jetzt beispielsweise den Code ändern:

el: document.getElementById('root')

Das ist auch möglich, Sie können es versuchen.

【2】render:(createElement:()=>VNode)=>VNode

Das Obige ist die ES6-Pfeilfunktionsschreibmethode, zum Beispiel:

((x,y)=>x+y)(1,2)

Die Schreibmethode von ES6 oben entspricht der Schreibmethode von ES5 unten:

(function(x,y){
  return x+y;
})(1,2);

Einfach ausgedrückt: (x,y)=>x+y bedeutet, dass es zwei Parameter x und y und x+ gibt y ist eine zurückgegebene Funktion, daher lautet die obige in ES5 geschriebene Funktion:

function(createElement){
  //createElement是一个函数，返回类型为VNode
  //这个函数的返回类型也应该是VNode
  return VNode;
}

Hinweis: VNode ist ein durch Vue-Kompilierung generierter virtueller Knoten. Denken Sie an Jquery-Knoten und Node-Knoten.

Deshalb habe ich das Rendering im Projekt leicht geändert:

render: function (createElement) {
  return createElement(App);
}

Ist es nicht ganz klar, es handelt sich um eine Funktion, deren endgültiger Rückgabewert VNode ist.

Wenn Sie also das Wort Knoten sehen, sollten Sie verstehen, warum die Seite die Vorlage in der App anzeigt. Sie können auch verstehen, wie das Routing angepasst wird und warum die .vue-Datei konfiguriert ist.

【3】router:VueRouter

Das ist einfacher zu verstehen, das heißt, Sie wissen, welche Routing-Konfiguration verwendet wird:

router:router

Es sieht seltsam aus , wir modifizieren es leicht:

//上面的import routerObj from './router';这一句要跟着修改一下
router: routerObj

Das sind die Grundlagen, nur drei. Die anderen Attribute hängen mit vielen Dingen zusammen, also werde ich sie nach und nach erklären.

Vue-ObjektLebenszyklus

Ich glaube nicht, dass es viel bedeutet. Ich empfehle Ihnen, einen Blick darauf zu werfen, nachdem Sie es erhalten haben begonnen, daher können die folgenden Artikel sprechen.

Ändern wir zuerst den Code in „entry.js“ und sehen uns die laufenden Ergebnisse an. Das Folgende ist der Code:

//根对象
var vm = new Vue({
  //挂载点
  el: document.getElementById('root'),
  //2.使用刚刚的路由配置
  router: routerObj,
  //启动组件
  render: function (createElement) {
    return createElement(App);
  },
  //下面是Vue对象的几种状态
  beforeCreate: function () {
    console.debug('Vue对象目前状态：beforeCreate');
  },
  created: function () {
    console.debug('Vue对象目前状态：created');
  },
  beforeMount: function () {
    console.debug('Vue对象目前状态：beforeMount');
  },
  mounted: function () {
    console.debug('Vue对象目前状态：mounted');
  },
  beforeUpdate: function () {
    console.debug('Vue对象目前状态：beforeUpdate');
  },
  updated: function () {
    console.debug('Vue对象目前状态：updated');
  },
  beforeDestroy: function () {
    console.debug('Vue对象目前状态：beforeDestroy');
  },
  destroyed: function () {
    console.debug('Vue对象目前状态：destroyed');
  }
});

Führen Sie ihn aus und sehen Sie sich die Konsole an.

Das heißt, das Vue-Objekt stellt eine Hook-Methode bereit, wenn sich der Status in jeder Phase von der Erstellung bis zum endgültigen Tod ändert. Sie können es registrieren, wenn Sie dies tun möchten bestimmte Zustandsänderungen, wenn Sie etwas bestellen.

到这里，基本上Vue对象实例应该比较清楚了吧？看看我们的代码，应该只有那几个.vue的文件里面的东西没有说清楚了（本文就是把前面写过的代码都说清楚，后面就可以一个新知识点接着一个的来丰富项目，因为都没有疑惑了，学习起来应该不会痛苦了吧！）。

Vue组件实例

说明

Vue组件的定义方法不是只有我们之前写的建立.vue文件那一种，比如你还可以通过Vue.component()的方法来创建，不过这些都以后吧，我们这里就只说明.vue文件这一种（不喜欢一下子说太多，而且仔细想想，不就是API吗）。

【下面都是在PageTwo.vue里面进行修改，菜单名称修改为:Vue组件实例】

.vue文件的基本模板如下（下面都会是ES5的写法，本人还是不太喜欢ES6或者TS，原谅我，反正本质一样）：

<template>
  
</template>
<script>
export default {
 //一些配置，和前面说的Vue实例类似
}
</script>
<style>
</style>

三个地方，分工明确：模板 + 控制 + 样式

接下来我们说明配置中常用的选项（很多具体的就留到后面一点点品位，好吧，留的有点多）：

常用配置
【1】data

先看看PageTwo.vue现在的代码：

<template>
  <section>
    <input type="text" v-model="justDoIt">
    <p>
      输入的数据：{{justDoIt}}
    </p>
  </section>
</template>
<script>
export default {
 //一些配置
 data() {
  return {
   justDoIt: "初始化数据"
  };
 }
};
</script>
<style>
</style>

模板中的代码应该不用说了吧，前面一篇文章说的很清楚了，直接看看data。

其返回了一个键值对（还有别的写法，推荐你这样写，因为这里如果"初始化数据"这几个字是变量，这种写法形成了闭包，是安全的），在这里就是给当前组件对象是data里面添加了一个justDoIt的数据，然后上面或者别的地方才可以用，他就是干了这事情。

【2】methods

接着，我们添加一下methods属性：

methods: {
  doIt() {
   alert(this.justDoIt);
  }
}

其实methods和data类似，只不过是用来添加的不是数据，而是方法，因此，你现在可以在模板里面添加下面代码来调用这个方法（记住，添加的全部代码必须由一个标签包裹）：

<input type="button" value="DoIt" v-on:click="doIt()">

v-on:click就是类似原生的onClick，不过因为是vue的方法，你应该用他的。

现在，你可以点击一下页面的按钮试一下，是不是很舒服。

【3】watch

这个属性是专门用来注册监听前面data里面注册的值改变的时候触发的方法集合，比如你添加下面的代码：

watch: {
  justDoIt: function(newval, oldval) {
   console.log("justDoIt改变了，新值为：" + newval + ",旧值为：" + oldval);
  }
 }

如何你运行一下，打开控制台，修改输入框的值的时候，是不是控制台时刻打印了这句话。

【4】computed

这个叫做计算属性，前面一篇文章说过了，不清楚的看看PageOne.vue，应该可以明白。

简单的说就是，它用到的data里面的值改变的时候，自己会重新计算。

生命周期
和Vue对象一样，也有类似的生命周期钩子，你可以试试，这里就随便提一下。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用Vue实现PopupWindow组件

如何操作jQuery实现电子时钟效果

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!