Vue.js 是一款目前非常流行的前端框架，它被设计用于构建单页面应用程序（SPA），可以快速响应用户交互、提升用户体验。如果你是一个前端初学者，那么本文将为你介绍如何入门 Vue.js 构建 SPA 。
安装 Vue.js
首先，我们需要在自己的项目中引入 Vue.js ，这里我们可以利用 npm 包管理器，打开终端，输入以下命令：
$ npm install vue
至此, Vue.js 就已经被成功安装到你的项目中了。
构建你的第一个 Vue 应用
现在，你可以构建你的第一个 Vue 应用了。我们假设你的项目名称为 MyVueApp ，第一步，我们需要在 HTML 中引入 vue.js ：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
-------
------
---- ---------
---- ----- ---
------
------- ------------------------------------------------------------
------- ----------------------
-------
-------这里的 Vuejs 直接使用了 CDN 引入，要注意的是，Vue.js 是开源且非常流行的，所以很多的网站都有 CDN 的引入。当然如果你喜欢，你也可以将 Vue.js 直接下载到你的项目文件夹中，然后引入本地的 Vue.js 。
第二步，我们需要在项目中创建一个 app.js 文件，并在该文件中创建一个 Vue 实例。
// app.js 文件内容
new Vue({
el: '#app',
data: {
message: '欢迎来到 MyVueApp'
}
})这里的 el 选项定义了 Vue 实例所控制的 HTML 元素，然后我们使用 data 选项定义我们在页面中要展示的数据。
现在，你可以打开浏览器，在控制台中输入以下命令：
app.message = "Hi，知晓者"
这将会动态更新页面中的内容。
Vue.js 的指令
Vue.js 的指令是 Vue.js 的灵魂，它帮助我们控制页面的展示、交互行为。在这里我将介绍几个最基本的指令。
v-if
我们可以使用 v-if 指令来控制元素是否展示在页面中：
<div id="app"> <p v-if="seen">我展示</p> </div>
new Vue({
el: '#app',
data: {
seen: true
}
})其中，只有当 seen 变量为 true 时，才会在页面中展示该段话。
v-for
v-for 指令可以用于循环读取数组的数据，并将它们渲染到页面中。
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>-- -------------------- ---- -------
--- -----
--- -------
----- -
------ -
- ----- --- ----------- --
- ----- --- ---- --
- ----- ------ -
-
-
--上面的代码会将 todos 数组中的每一个元素都循环遍历并展示到页面中。
v-model
v-model 指令可以用于在表单元素和 Vue 实例之间双向绑定数据。
<div id="app">
<input v-model="message" placeholder="输入想说的话">
<p>{{ message }}</p>
</div>new Vue({
el: '#app',
data: {
message: ''
}
})在这个例子中，我们创建了一个文本框和一个段落，使用 v-model 使得文本框中的值同步更新到 Vue 实例的 message 变量中，并使段落中的内容动态更新。
SPA
当我们使用 Vue.js 构建一个 SPA 时，会用到一个 Vue-Router 的插件。这个插件可以帮助我们控制不同路由下页面的展示行为。
使用 Vue-Router 需要先安装 :
$ npm install vue-router
在 app.js 文件中引入 Vue-Router，并且定义一些路由信息：
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
---------------
----- ---- - - --------- ----------------- -
----- ----- - - --------- ------------------ -
----- ------ - --- --------
----- ----------
------- -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- -
-
--
--- -----
--- -------
-------
--在这个例子中，我们定义了两个路由信息，一个是主页（’/‘），一个是关于页（‘/about’）。
在页面 HTML 中可以这样写：
<div id="app"> <router-link to="/">主页</router-link> <router-link to="/about">关于页</router-link> <router-view></router-view> </div>
在页面中使用 <router-link> 指令用于切换页面路由，使用 <router-view> 指令来展示当前路由的视图。
总结
Vue.js 是一个非常好的前端框架，它使得前端的开发变得更加简单、快捷。通过本文，我们了解了如何入门 Vue.js 构建 SPA ，以及 Vue.js 常用的指令和插件。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518e04e95b1f8cacd123a81