Comment utiliser les composants Vue

Cette fois, je vais vous montrer comment utiliser les composants Vue et quelles sont les précautions lors de l'utilisation des composants Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

Instance Vue

Processus de démarrage du projet

Regardez notre projet maintenant et réfléchissez au processus de démarrage de l'ensemble du projet (pour ouvrir l'index directement Accès à la méthode .html comme exemple pour illustrer) ?

Vous avez d'abord ouvert index.html, il n'y avait qu'un seul p avec id='root' écrit dedans, et vous avez introduit le code packagé, puis Vue a dû l'exécuter tout seul (il peut être considéré comme Initialisation de la vue).

Ensuite, Entry.js doit être exécuté (car le packaging est packagé par webpack, il s'agit du fichier d'entrée que vous avez configuré).

Qu'a fait Entry.js ? Oui, il a créé un objet d'instance Vue, puis la zone gérée par cet objet est connue en fonction de l'attribut el. Ce devrait être le p avec id='root' in. index.html, donc Il ne reste plus qu'à comprendre comment cet objet d'instance Vue gère cette zone. C'est le contenu suivant.

Qu'est-ce qu'un objet instance Vue ?

Selon la documentation officielle : Chaque application Vue commence par créer une nouvelle instance Vue avec une fonction Vue.

Vous pouvez simplement comprendre qu'il ne s'agit que d'un objet ordinaire, mais cet objet a reçu des fonctions spéciales. Faisons-le connaissance !

[Nous mènerons des expérimentations sur l'objet Vue créé dans Entry.js]

La méthode de création d'un objet instance Vue est la suivante :

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

Par conséquent, ce dont je veux parler ensuite, ce sont quelques configurations couramment utilisées (pas toutes, les plus spéciales devraient être mentionnées plus tard, après tout, tout vient du début, j'ai peur que nous soyons tous les deux trop fatigués).

Configuration de base des objets d'instance Vue

[1]el: sélecteur | Noeud DOM

Dans notre projet, nous configurons :

el:'# root'

Il s'agit d'une chaîne, un peu similaire au Sélecteur CSS, qui utilisera le nœud trouvé comme zone de gestion (bien sûr il existe d'autres options CSS L'appareil peut également être utilisé ).

De plus, vous pouvez également passer un nœud directement. Par exemple, modifions le code maintenant :

el: document.getElementById('root')

C'est également possible, vous pouvez l'essayer.

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

Ce qui précède est la méthode d'écriture de la fonction flèche ES6, par exemple :

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

La méthode d'écriture de ES6 ci-dessus est équivalente à la méthode d'écriture de ES5 ci-dessous :

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

En termes simples : (x,y)=>x+y signifie qu'il y a deux paramètres x et y, Une fonction qui renvoie x+y, donc la fonction ci-dessus est écrite dans ES5 comme :

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

Remarque : VNode est un nœud virtuel généré par la compilation Vue. Pensez aux nœuds Jquery et aux nœuds Node. ça n'a pas un goût très similaire.

J'ai donc légèrement modifié le rendu dans le projet :

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

N'est-ce pas très clair, pour parler franchement, c'est une fonction dont la valeur de retour finale est VNode.

Ainsi, lorsque vous voyez les deux mots « nœud », vous devriez pouvoir comprendre pourquoi la page affiche le modèle dans l'application. Vous pouvez également comprendre comment ajuster le routage et pourquoi le fichier .vue est configuré. .

【3】router:VueRouter

C'est plus facile à comprendre, c'est-à-dire que vous savez quelle configuration de routage est utilisée, car le projet est :

router:router

Il ça a l'air étrange, modifions-le légèrement :

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

C'est tout pour les bases, juste trois. Les autres attributs sont liés à beaucoup de choses, je vais donc les expliquer petit à petit.

Vue ObjectCycle de vie

Je n'inclurai pas la photo officielle, je ne pense pas que cela signifie grand-chose, je vous recommande d'y jeter un œil après l'avoir reçu. a commencé, donc les articles suivants peuvent parler.

Modifions d'abord le code dans Entry.js et voyons les résultats d'exécution. Voici le 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');
  }
});

Exécutez-le et voyez la console.

Ainsi, c'est-à-dire que l'objet Vue fournit une méthode hook lorsque l'état change à chaque étape depuis sa création jusqu'à sa mort finale. Vous pouvez l'enregistrer si vous souhaitez le faire lorsqu'un. changements d'état spécifiques. Si vous commandez quelque chose.

到这里，基本上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实现电子时钟效果

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!