How to use files ending in vue

With the increasing development of front-end technology, Vue.js, as a high-performance, easy-to-learn and easy-to-use, lightweight front-end progressive framework, is increasingly favored by developers in today's front-end development. In Vue.js, files ending in .vue are called Vue files. This article will focus on how to use Vue files.

1. Introduction to Vue files

The Vue file is a component and consists of three parts: template, script, and style. Among them, the template part is the template part of the component, used to define the structure and style of the component; the script part is the logical part of the component, used to define the behavior and methods of the component; the style part is used to define the style of the component.

2. How to use Vue files

1. Install Vue.js

First you need to install Vue.js through npm, you can install it through the following command ：

npm install vue

2. Create Vue file

When creating a component, you need to create a new file with the suffix .vue and write it inside the file according to the standard format of Vue files. code.

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

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

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

3. Introducing Vue files

In Vue.js, you need to create a Vue instance first, and introduce the component into the Vue instance by introducing the Vue file.

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

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

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

4. Use the properties and methods in the Vue file

You can define your own properties and methods in the component. After introducing the Vue file, you can use the component name in the form of used in templates.

<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. Modular introduction of Vue files

In Vue.js, Vue files can be introduced in a modular way. Take Webpack as an example, configure it in webpack.config.js:

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

In the Vue file, you can use the export default syntax of ES6 to complete the export of the module. When introducing Vue files, you can use relative paths or aliases, that is, you can use "@/" instead of "src/".

3. Summary

The above is how to use Vue files. When we use Vue.js during the development process, making full use of the development method of Vue files can improve development efficiency and make the code more efficient. More maintainable and readable. At the same time, Vue.js is a high-performance, easy-to-learn and easy-to-use, lightweight front-end progressive framework. Its learning and use are also a part that front-end developers cannot ignore.

The above is the detailed content of How to use files ending in vue. For more information, please follow other related articles on the PHP Chinese website!