Vue.js 项目基础

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。以下是一些关于 Vue.js 项目基础的信息。

快速开始

1. 安装 Vue CLI：Vue CLI 是一个官方命令行工具，用于快速搭建 Vue.js 项目。

   • Vue CLI 官方文档

2. 创建新项目：使用 Vue CLI 创建新项目。

   vue create my-vue-project
   

3. 项目结构：了解项目的基本结构，包括 src 目录下的 components、views、assets 等。

组件

Vue.js 的核心是一个响应式的数据模型和组合的视图组件。

• 组件定义：通过 <template>、<script> 和 <style> 定义组件。

  <template>
    <div>
      <h1>{{ title }}</h1>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        title: 'Hello Vue!'
      }
    }
  }
  </script>
  
  <style scoped>
  h1 {
    color: red;
  }
  </style>
  

• 组件注册：在父组件中注册子组件。

  <template>
    <my-component></my-component>
  </template>
  
  <script>
  import MyComponent from './MyComponent.vue'
  
  export default {
    components: {
      MyComponent
    }
  }
  </script>
  

生命周期钩子

Vue.js 组件有多个生命周期钩子，用于在组件的不同阶段执行操作。

• 创建阶段：beforeCreate、created
• 挂载阶段：beforeMount、mounted
• 更新阶段：beforeUpdate、updated
• 销毁阶段：beforeDestroy、destroyed

图片示例

Vue.js Logo

更多关于 Vue.js 的内容，请访问 Vue.js 官方网站。