vuejs3.0 从入门到精通——初始化项目——文件结构

初始化项目——文件结构

  在 Vue.js 项目中，所有与项目相关的业务逻辑文件都放在 src 目录下。后缀为 .vue 的文件分为 3 个部分，分别是页面模版（template）、页面脚本（script）和页面样式（style）：

一、模板（template）

  模板是 Vue.js 组件的 HTML 部分。它使用合法的 HTML 语法来定义组件的视图。在模板中，你可以使用 Vue.js 提供的特殊属性，例如 v-bind、v-if、v-on 等。此外，你还可以在模板中使用 Vue.js 的组件和自定义指令。

  例如：

<template>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="increment">Increment</button>  
  </div>  
</template>

在这个例子中，我们使用双大括号 {{ }} 来插入变量，使用 @click 指令来监听按钮的点击事件。

二、脚本（script）

  脚本部分是 .vue 文件的核心部分，它定义了组件的逻辑和行为。在 Vue.js 中，每个 .vue 文件都可以包含一个或多个 JavaScript 对象，这些对象称为 Vue 组件。

  例如：

<script>  
export default {  
  data() {  
    return {  
      count: 0,  
      message: 'Hello, Vue!'  
    }  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
}  
</script>

  在这个例子中，我们定义了一个 Vue 组件，它有一个 data 函数，返回一个对象，该对象包含组件的数据。此外，我们还定义了一个 methods 对象，其中包含一个 increment 函数，该函数用于增加 count 的值。

三、样式（style）

  样式部分允许你在 .vue 文件中直接定义 CSS 样式。你可以使用普通的 CSS 规则，也可以使用一些预处理器（如 SCSS、LESS）。此外，你还可以使用 scoped 属性来限制样式只作用于当前组件。

  例如：

<style scoped>  
#app {  
  background-color: #f5f5f5;  
  text-align: center;  
}  
h1 {  
  color: #333;  
}  
button {  
  padding: 10px 20px;  
  font-size: 16px;  
  cursor: pointer;  
}  
</style>

  在这个例子中，我们定义了一些 CSS 规则，限制了这些样式只作用于 ID 为 app 的元素、h1 元素和 button 元素。