Vue.js 基础教程
Vue.js 是一种流行的前端 JavaScript 框架，用于构建用户界面。它使开发者能够更轻松地创建交互式、动态的 web 应用。
一、安装 Vue.js
你可以通过 npm（Node Package Manager）来安装 Vue.js。在命令行中输入以下命令：
npm install vue
二、创建 Vue 实例
在 Vue 中，一个应用通常是从一个 Vue 实例开始的。你可以通过创建并配置一个 Vue 实例来开始一个新的应用。
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在上面的代码中，我们创建了一个新的 Vue 实例，并将其挂载到 id 为 "app" 的 DOM 元素上。data 属性包含应用的数据，在这里我们只有一个名为 message 的数据项。
三、模板语法
Vue 提供了一种模板语法，允许你以声明式的方式将 DOM 绑定到 Vue 实例的数据上。以下是一个简单的例子：
<div id="app">
{{ message }}
</div>
在这个例子中，我们使用双大括号 {{ }} 来绑定 Vue 实例的 message 数据项到 HTML 中的文本上。当 Vue 实例的数据改变时，DOM 将自动更新以反映这些更改。
四、指令
Vue 提供了许多内置指令，可以用来操作 DOM。例如，v-bind 指令可以用来绑定 HTML 属性到表达式的值上：
<div id="app">
<a v-bind:href="url">Link</a>
</div>
在这个例子中，我们使用 v-bind 指令将 a 标签的 href 属性绑定到 Vue 实例的 url 数据项上。当 url 的值改变时，链接的 URL 将自动更新。
五、组件
组件是 Vue 中一个非常强大的特性，它们允许你创建可复用的自定义元素。以下是一个简单的组件示例：
首先，创建一个名为 Hello.vue 的文件，内容如下：
<template>
<div>Hello, {{ name }}!</div>
</template>
<script>
export default {
props: ['name']
}
</script>
然后，在另一个文件中使用这个组件：
<div id="app">
<hello name="World"></hello>
</div>
在这个例子中，我们定义了一个名为 hello 的组件，它接受一个 name 属性。然后我们在另一个文件中使用这个组件，并传递一个 name 属性值。这样我们就创建了一个可复用的自定义元素。
