Première introduction aux fichiers *.Vue dans Vue.js_vue.js

vue.js est un cadre progressif pour la création d'interfaces utilisateur. Il adopte une conception de développement incrémental ascendant. Cet article présente principalement la première introduction au journal de remplissage des fosses Vue.Js*.Vue, qui est requis. Les amis peuvent se référer. à

Qu'est-ce que Vue.js ?

vue.js est un framework progressif pour la création d'interfaces utilisateur. Il adopte une conception de développement incrémental ascendant. (La méthode de conception ascendante est basée sur les exigences fonctionnelles du système, en partant de dispositifs spécifiques, de composants logiques ou de systèmes similaires, et en s'appuyant sur les compétences et la riche expérience du concepteur pour les interconnecter, les modifier et les étendre afin de former le système requis.) La bibliothèque principale de Vue se concentre uniquement sur la couche de vue. Elle est non seulement facile à démarrer, mais également facile à intégrer à des bibliothèques tierces ou à des projets existants. D'un autre côté, Vue est également entièrement capable d'alimenter des applications complexes d'une seule page lorsqu'elles sont combinées avec des composants et des bibliothèques à fichier unique pris en charge par l'écosystème Vue.

Qu'est-ce qu'un fichier *.vue

Tout d'abord, nous utilisons l'échafaudage vue-cli pour construire des projets, dans lesquels nous avons rencontré beaucoup, comme Ce fichier est index.vue ou App.vue. Qu'est-ce que c'est que ça ? Si vous êtes nouveau dans le développement de Vue, vous n'avez peut-être jamais vu cette chose auparavant. Le fichier *.vue est un type de fichier personnalisé qui utilise une syntaxe de type HTML pour décrire un composant Vue. Chaque fichier .vue contient trois types de blocs de langage de niveau supérieur d477f9ce7bf77f53fbcf36bec1b69b7a, 3f1c4e4b6b16bbbd69b2ee476dc4f83a et c9ccee2e6ea535a969eb3f532ad9fe89. Ces trois parties représentent respectivement HTML, JS et CSS.

Parmi eux, d477f9ce7bf77f53fbcf36bec1b69b7a et c9ccee2e6ea535a969eb3f532ad9fe89 prennent en charge l'écriture dans un langage précompilé. Par exemple, dans notre projet, nous utilisons la pré-compilation scss, nous l'écrivons donc comme ceci :

<style lang="scss">

html également a son propre langage précompilé, qui est également pris en charge par vue. Cependant, d'une manière générale, notre personnel front-end préfère toujours le langage natif HTML, je ne vais donc pas trop m'étendre.

De plus, j'ai utilisé la phrase @import "./style/style" dans le fichier App.vue pour écrire notre style à l'endroit spécifié. Par conséquent, cette partie du contenu n’apparaîtra pas dans tous mes articles ultérieurs. Tous les styles seront écrits aux emplacements correspondants dans le dossier src/style/. L'avantage est que je n'ai pas besoin d'introduire à plusieurs reprises divers fichiers de base scss et que le code de style du projet peut être contrôlé.

Analyse du code du fichier *.vue

Tout d'abord, jetons un bref coup d'œil :

<template>
  <p>
    <Header></Header>
    <p class="article_list">
      <ul>
        <li></li>
      </ul>
    </p>
    <Footer></Footer>
  </p>
</template>
<script>
import Header from &#39;../components/header.vue&#39;
import Footer from &#39;../components/footer.vue&#39;
export default {
  components: { Header, Footer },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get(&#39;topics&#39;, null, r => {
        console.log(r)
      })
    }
  }
}
</script>
<style>
  .article_list {margin: auto;}
</style>

Ce qui précède est la structure de base d'un simple fichier *.vue. Expliquons-le partie par partie.

partie modèle

Ci-dessous, je ne l'appelle plus un fichier *.vue. Changé en composant vue. Tout d'abord, un composant vue, son template représente sa structure html, je crois que tout le monde peut le comprendre. Mais il convient de noter que nous ne disons pas qu'il suffit d'envelopper le code dans d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2, mais qu'une balise html doit être placée à l'intérieur pour envelopper tout le code. Dans cet exemple, nous utilisons la balise e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

Tout le monde doit être très surpris lorsqu'il voit le code 2432be42592c7cf43d7b271eae4dbb5a31a13137de512d4e98c7af37c2f9fe88. Qu'est-ce que c'est ? En fait, il s'agit d'un composant personnalisé. Nous avons écrit un composant ailleurs, et nous pouvons ensuite l'introduire de cette manière. De même, 479c53d55bf259afb26198039255ccd72fd8772b288aec020c7313ab369d9e3e est également un composant.

partie script

Tout d'abord, nous avons besoin de deux composants personnalisés, que nous référençons en premier. Le format suivant est plus facile à comprendre.

import Header from '../components/header.vue'
import Footer from '../components/footer.vue'

Deuxièmement, à l'exception des fichiers référencés, nous encapsulons tout le code dans le code suivant :

export default {
  // 这里写你的代码，外面要包起来。
}

Nous avons d'abord présenté les fichiers sources des deux composants Header et Footer. Ensuite, nous devons déclarer les composants référencés à l'intérieur. De cette façon, nous pouvons l'utiliser dans un modèle.

components: { Header, Footer },

les données sont nos données. Notre code de démonstration donne un tableau vide de données d'une liste. Dans le modèle, nous pouvons utiliser this.list pour utiliser nos données. Nous en reparlerons dans un prochain article, nous n’entrerons donc pas dans les détails ici, apprenons simplement à le connaître.

data () {
  return {
    list: []
  }
},

created représente ce qui doit être exécuté lorsque notre composant est chargé. Par exemple, ici, nous laissons le composant exécuter une fonction appelée this.getData() une fois le chargement terminé. De plus, créé est l'une des fonctions de hook dans vuejs. (Veuillez vous référer à l'annexe pour les fonctions de hook spécifiques)

created () {
  this.getData()
},

methods est la méthode de notre composant, qui peut également être dit être une fonction. Par exemple, le code ci-dessus indique que notre composant a personnalisé une fonction de méthode appelée getData().

methods: {
  getData () {
    this.$api.get('topics', null, r => {
      console.log(r)
    })
  }
}

style 部分

这里比较简单，就是针对我们的 template 里内容出现的 html 元素写一些样式。如下，我的代码：

<style>
.article_list {margin: auto;}
</style>

到这里，我们应该对 vue 组件文件有了一定的认知。后面的博文中，将会涉及到比较多的各种写法，因此，建议在阅读完本文后，花比较多的时间，去查看 vue 的官方文档。虽然文档你不一定能全部看懂，但要有一个大概的认识，否则下面的学习将会比较困难。

附录

勾子，可以理解为vuejs的生命周期，而函数则是生命周期内各个阶段的事件方法。如下图

 

总结

以上所述是小编给大家介绍的初识 Vue.js 中的 *.Vue文件，希望对大家有所帮助！

相关推荐：

vue.js devtools遇到一系列问题详解

关于Vue.js 2.5新特性介绍

vue.js做出图书管理平台的详细步骤

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!