app

Vue.js 菜鸟教程入门指南

Vue.js 是一个渐进式 JavaScript 框架，它使用虚拟 DOM（Virtual DOM）来优化性能，本篇文章将带你从零开始学习 Vue.js 的基础知识和核心特性。

安装 Vue CLI

你需要安装 Vue CLI，这是构建 Vue 应用程序的工具,你可以通过以下命令在你的项目中安装它：

npm install -g @vue/cli

安装完成后，你可以创建一个新的 Vue 项目：

vue create my-vue-app
cd my-vue-app

这将会在当前目录下创建一个名为 my-vue-app 的新 Vue 项目,并将其放置到你的文件系统中。

创建基本组件

我们将创建一个简单的应用组件，打开 src/App.vue 文件,添加如下代码：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
}
</script>
<style scoped>  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这个示例中，我们创建了一个包含单个 <h1> 标签的基本组件，并在数据属性 message 中设置了初始值为 "Hello, Vue!"。

使用事件处理

我们可以创建一个按钮组件并绑定事件处理器来改变消息显示的内容，编辑 src/components/Button.vue 文件,添加如下代码：

<template>
  <button @click="changeMessage">点击我</button>
</template>
<script>
import App from './App.vue';
export default {
  name: 'Button',
  methods: {
    changeMessage() {
      this.$emit('update-message', '你好，Vue!');
    }
  },
};
</script>

在 App.vue 中引入并使用这个按钮组件：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <Button />
  </div>
</template>
<script>
import Button from './components/Button.vue';
export default {
  components: {
    Button
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

当你点击按钮时，消息会更新为 "你好，Vue!"。

组件通信与状态管理

为了使组件之间进行更好的交互，我们可以使用 props 和 slots 来传递数据和自定义元素，修改 Button.vue 以接受一个 message prop：

<template>
  <button :class="{ active: isActive }" @click="toggleActive">
    {{ message }}
  </button>
</template>
<script>
export default {
  name: 'Button',
  props: ['message'],
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    },
  },
};
</script>
<style scoped>
.active {
  background-color: blue;
  color: white;
}
</style>

在 App.vue 中导入并使用这个组件：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <Button v-bind:message="message"></Button>
  </div>
</template>
<script>
import Button from './components/Button.vue';
import App from './App.vue';
export default {
  components: {
    Button,
  },
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
};
</script>

这样，每个按钮都会有自己的 message 属性,并且可以独立控制其激活状态。

本文介绍了如何使用 Vue.js 初级教程创建一个简单的 Vue 应用，包括安装 Vue CLI、创建基础组件、使用事件处理以及组件通信等基本概念，通过这些步骤，你已经掌握了 Vue.js 的一些关键技能，继续深入学习，探索更多高级主题和技术，如路由、响应式编程和 Vuex 状态管理等,让你的开发之旅更加丰富多彩！