Comment utiliser les fichiers se terminant par vue

Avec le développement croissant de la technologie front-end, Vue.js, en tant que framework front-end progressif léger, hautes performances, facile à apprendre et à utiliser, est de plus en plus favorisé par les développeurs d'aujourd'hui. développement front-end. Dans Vue.js, les fichiers se terminant par .vue sont appelés fichiers Vue. Cet article se concentrera sur la façon d'utiliser les fichiers Vue.

1. Introduction aux fichiers Vue

Les fichiers Vue sont un composant composé de trois parties : un modèle, un script et un style. Parmi eux, la partie modèle est la partie modèle du composant, utilisée pour définir la structure et le style du composant ; la partie script est la partie logique du composant, utilisée pour définir le comportement et les méthodes du composant ; est utilisé pour définir le style du composant.

2. Comment utiliser les fichiers Vue

1. Installer Vue.js

Vous devez d'abord installer Vue via npm.js, vous pouvez l'installer via la commande suivante :

npm install vue

2. Create Vue file

Lors de la création d'un composant, vous devez créer un nouveau avec le suffixe .vue et écrivez du code à l'intérieur du fichier selon le format standard des fichiers Vue.

<template>
  <!-- 组件的html部分 -->
</template>

<script>
  // 组件逻辑部分
  export default{
    // 组件的属性、方法等
  }
</script>

<style scoped>
  /* 组件样式部分 */ 
</style>

3. Présentation des fichiers Vue

Dans Vue.js, vous devez d'abord créer une instance Vue et introduire le composant en introduisant le fichier Vue dans l'instance Vue.

<template>
  <div>
    <!-- 引入Vue组件 -->
    <my-component />
  </div>
</template>

<script>
  // 引入Vue组件
  import MyComponent from '@/components/MyComponent.vue';

  export default{
    name: 'app',
    components: {
      // 注册组件，与组件名一致
      MyComponent
    }
  }
</script>

4. Utilisez les propriétés et les méthodes du fichier Vue

Vous pouvez définir vos propres propriétés et méthodes dans le composant Après avoir introduit Vue. fichier, vous pouvez l'utiliser dans le modèle via le nom du composant.

<template>
  <div>
    <!-- 引入Vue组件 -->
    <my-component :prop1="prop1Data" @event1="handleEvent1"/>
  </div>
</template>

<script>
  // 引入Vue组件
  import MyComponent from '@/components/MyComponent.vue';

  export default{
    name: 'app',
    data(){
      return {
        prop1Data: 'This is prop1 value'
      }
    },
    components: {
      // 注册组件，与组件名一致
      MyComponent
    },
    methods: {
      handleEvent1(){
        // 响应事件执行的方法
      }
    }
  }
</script>

5. Introduction modulaire des fichiers Vue

Dans Vue.js, les fichiers Vue peuvent être introduits de manière modulaire. Prenons Webpack comme exemple, configurez-le dans webpack.config.js :

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  },
  // ...
  module: {
    rules: [
      // ...
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      }
    ]
  }
  // ...
}

Dans le fichier Vue, vous pouvez utiliser la syntaxe d'exportation par défaut d'ES6 pour terminer l'exportation du module. Lors de l'introduction de fichiers Vue, vous pouvez utiliser des chemins relatifs ou des alias, c'est-à-dire que vous pouvez utiliser "@/" au lieu de "src/".

3. Résumé

Ce qui précède explique comment utiliser les fichiers Vue Lorsque nous utilisons Vue.js pendant le processus de développement, il est possible d'utiliser pleinement la méthode de développement des fichiers Vue. améliore l'efficacité du développement et rend le code plus maintenable et plus lisible. Dans le même temps, Vue.js est un framework frontal progressif léger, facile à apprendre et à utiliser, son apprentissage et son utilisation sont également une partie que les développeurs front-end ne peuvent ignorer.

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!