vue2.0开发入门笔记之.vue文件的生成和使用

当我们使用 Vue.js 进行开发的时候，最普遍的方式就是通过 .vue 文件进行组件化开发。本次攻略将详细讲解 .vue 文件的生成和使用。

什么是 .vue 文件？

.vue 文件是一种组件化的文件格式，Vue.js 是通过 .vue 文件进行组件开发。.vue 文件将一个组件的 HTML、CSS 和 JavaScript 内容放在同一个文件中，便于管理和维护。其基础结构如下：

<template>
  <!-- 具体 HTML 结构 -->
</template>

<script>
  export default {
    // 组件逻辑
  }
</script>

<style>
  /* 组件样式 */
</style>

如何生成 .vue 文件？

我们可以通过以下两种方式生成 .vue 文件。

方式一：手动创建

手动创建 .vue 文件，需要按照上述基础结构进行编写。具体步骤如下：

1. 在项目中创建一个以组件名命名的文件夹，然后在文件夹中创建 .vue 文件。
2. 在 .vue 文件中编写 HTML、CSS 和 JavaScript 内容。可以通过 Vue CLI 命令行工具提供的模板来快速生成具有基础结构的 .vue 文件。

例如，在组件名为 "my-component" 的项目中，可手动创建如下基础结构的 .vue 文件：

<template>
  <div>
    <!-- 具体 HTML 结构 -->
  </div>
</template>

<script>
export default {
  // Vue 组件逻辑
}
</script>

<style>
/* 组件样式 */
</style>

方式二：使用 Vue CLI 创建

Vue CLI 是一个官方的脚手架工具，可以帮助我们快速构建一个 Vue.js 项目，它内置了对 .vue 文件的支持，可以自动创建 .vue 文件。

具体步骤如下：

1. 在控制台中进入项目目录。
2. 执行以下命令，使用 Vue CLI 创建一个新的 Vue.js 项目：

vue create project-name

1. 在创建的项目中通过以下命令创建一个名为 "my-component" 的组件：

vue component my-component

这样就可以自动创建一个基础结构的 "my-component.vue" 文件。

如何使用 .vue 文件？

我们可以通过以下两种方式使用 .vue 文件。

方式一：单文件组件方式

在单文件组件方式中，.vue 文件被视为一个独立的组件，可以在 Vue.js 应用程序的其他组件中使用。

可以在目标组件的 template 标签中使用动态组件的方式引入目标组件：

<template>
  <div>
    <!-- 其他组件内容 -->
    <component :is="componentName"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentName: 'MyComponent'
    }
  },
  components: {
    MyComponent: () => import('./MyComponent.vue')
  }
}
</script>

在 components 中引用具体的 .vue 文件，然后在需要使用的地方使用组件名称即可。

方式二：全局组件方式

在全局组件方式中，.vue 文件可以直接注册为一个全局组件。

在项目根目录下的 "main.js" 文件中，可使用以下方式引入 .vue 文件：

import MyComponent from './MyComponent.vue'

Vue.component('my-component', MyComponent)

然后就可以在项目的任何地方使用该全局组件：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

以上就是使用 .vue 文件的基本攻略，依照这个基本结构我们可以完成一个 Vue.js 项目的基本搭建。

示范一：动态组件切换

下面示范一个简单的动态组件切换的示例，在 App.vue 组件内使用了两个 .vue 文件：

<template>
  <div>
    <button @click="currentComponent = 'MyComponent'">显示组件1</button>
    <button @click="currentComponent = 'ChildComponent'">显示组件2</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
  import MyComponent from '@/components/MyComponent.vue';
  import ChildComponent from '@/components/ChildComponent.vue';
  export default {
    data() {
      return {
        currentComponent: 'MyComponent'
      }
    },
    components: {
      MyComponent,
      ChildComponent
    }
  }
</script>

点击不同的按钮，将会渲染出不同的组件。

示范二：全局组件

下面示范一个使用全局组件的示例，在 main.js 文件中注册了一个全局组件，然后在 App.vue 组件内使用了该组件。

import Vue from 'vue'
import App from './App.vue'
import MyGlobalComponent from '@/components/MyGlobalComponent.vue'

Vue.config.productionTip = false

Vue.component('my-global-component', MyGlobalComponent)

new Vue({
  render: h => h(App),
}).$mount('#app')

在 App.vue 组件内使用了 my-global-component 组件：

<template>
  <div>
    <my-global-component></my-global-component>
  </div>
</template>

以上就是 .vue 文件的生成和使用攻略，希望能对你有所帮助。