Vue教程

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。它易于上手，同时也非常灵活，可以与现有的库或现有的项目整合。

快速开始

安装

首先，你需要安装Vue.js。你可以通过CDN链接来快速引入Vue：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

创建一个简单的应用

以下是一个简单的Vue应用示例：

<div id="app">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

在这个例子中，{{ message }} 是一个插值表达式，它会将Vue实例的data对象中的message属性值显示在页面上。

组件

Vue.js 使用组件来构建应用。组件可以复用，并且易于维护。

创建组件

以下是如何创建一个简单的组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue组件',
      description: '组件是Vue应用的基本构建块。'
    }
  }
}
</script>

使用组件

在Vue实例中注册组件，然后在模板中使用它：

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

<script>
import MyComponent from './components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

更多关于Vue组件的信息，请访问Vue组件文档。

路由

Vue.js 使用Vue Router来处理页面路由。

安装Vue Router

首先，你需要安装Vue Router：

npm install vue-router

创建路由

以下是如何创建一个简单的路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

更多关于Vue Router的信息，请访问[Vue Router文档](/教程/Vue Router)。

总结

Vue.js 是一个功能强大的JavaScript框架，可以帮助你构建高效的用户界面。通过以上教程，你应该对Vue.js有了基本的了解。