Vue项目 快速上手（如何新建Vue项目，启动Vue项目，Vue的生命周期，Vue的常用指令）

# 安装Vue CLI，如果已安装请跳过此步
npm install -g @vue/cli
 
# 创建一个新的Vue项目
vue create my-project
 
# 进入项目目录
cd my-project
 
# 启动Vue项目
npm run serve

在新建的Vue项目中，理解Vue的生命周期很重要，Vue的生命周期钩子包括：created, mounted, updated, destroyed等。

export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  created() {
    console.log('组件已创建，但DOM还未生成');
  },
  mounted() {
    console.log('DOM已挂载，组件现在可见');
  },
  updated() {
    console.log('组件DOM已更新');
  },
  destroyed() {
    console.log('组件已销毁');
  }
};

Vue的常用指令包括：v-if, v-else, v-show, v-for, v-bind, v-model等。

<template>
  <div>
    <!-- 条件渲染 -->
    <div v-if="condition">条件为true时显示</div>
    <div v-else>条件为false时显示</div>
 
    <!-- 循环渲染 -->
    <div v-for="item in items" :key="item.id">{{ item.text }}</div>
 
    <!-- 绑定属性 -->
    <img v-bind:src="imageSrc">
 
    <!-- 双向绑定 -->
    <input v-model="message">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      condition: true,
      items: [{ id: 1, text: 'Item 1' }],
      message: 'Hello Vue!',
      imageSrc: 'path_to_image.jpg'
    };
  }
};
</script>