Cara menggunakan fail yang berakhir dengan vue

Dengan peningkatan pembangunan teknologi bahagian hadapan, Vue.js, sebagai rangka kerja progresif bahagian hadapan yang berprestasi tinggi, mudah dipelajari dan mudah digunakan, ringan, semakin digemari oleh pembangun di hadapan hari ini -penghujung pembangunan. Dalam Vue.js, fail yang berakhir dengan .vue dipanggil fail Vue. Artikel ini akan memberi tumpuan kepada cara menggunakan fail Vue.

1. Pengenalan kepada fail Vue

Fail Vue ialah komponen, yang terdiri daripada tiga bahagian: templat, skrip dan gaya. Antaranya, bahagian templat adalah bahagian templat komponen, digunakan untuk menentukan struktur dan gaya komponen bahagian skrip adalah bahagian logik komponen, digunakan untuk menentukan kelakuan dan kaedah komponen; digunakan untuk menentukan gaya komponen.

2. Cara menggunakan fail Vue

1. Memasang Vue.js

Mula-mula anda perlu memasang Vue.js melalui npm, anda boleh memasangnya melalui arahan berikut :

npm install vue

2. Buat fail Vue

Apabila mencipta komponen, anda perlu mencipta fail baharu dengan akhiran .vue dan tuliskannya di dalam fail mengikut format standard kod fail Vue.

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

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

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

3. Memperkenalkan fail Vue

Dalam Vue.js, anda perlu mencipta tika Vue terlebih dahulu dan memperkenalkan komponen ke dalam tika Vue dengan memperkenalkan fail Vue.

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

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

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

4. Gunakan sifat dan kaedah dalam fail Vue

Anda boleh menentukan sifat dan kaedah anda sendiri dalam komponen Selepas memperkenalkan fail Vue, anda boleh menggunakan nama komponen dalam bentuk yang digunakan dalam templat.

<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. Pengenalan modular fail Vue

Dalam Vue.js, fail Vue boleh diperkenalkan dengan cara modular. Mengambil Webpack sebagai contoh, konfigurasikannya dalam webpack.config.js:

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

Dalam fail Vue, anda boleh menggunakan sintaks lalai eksport ES6 untuk melengkapkan eksport modul. Apabila memperkenalkan fail Vue, anda boleh menggunakan laluan relatif atau alias, iaitu, anda boleh menggunakan "@/" dan bukannya "src/".

3. Ringkasan

Di atas ialah cara menggunakan fail Vue Apabila kami menggunakan Vue.js semasa proses pembangunan, menggunakan sepenuhnya kaedah pembangunan fail Vue boleh meningkatkan kecekapan pembangunan dan. menjadikan kod lebih cekap dan boleh dibaca. Pada masa yang sama, Vue.js ialah rangka kerja progresif bahagian hadapan yang berprestasi tinggi, mudah dipelajari dan mudah digunakan, pembelajaran dan penggunaannya juga merupakan bahagian yang tidak boleh diabaikan oleh pembangun bahagian hadapan.

Atas ialah kandungan terperinci Cara menggunakan fail yang berakhir dengan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!