随着互联网技术的飞速发展，前端开发已经成为了一项非常重要的技能，而Vue.js作为最受欢迎的前端框架之一，其轻量级和高效性更是成为了前端开发者们的首选。
Vue.js是一个渐进式框架，它采用了组件化的思想，使得前端开发可以更加灵活、易于维护的同时也提高了开发效率，逐渐成为了前端开发领域的一大趋势。
本文将会向大家介绍如何轻松入门Vue.js，并通过示例代码来演示如何快速构建一个单页应用。
1. 创建Vue实例
Vue的核心就是Vue实例，创建Vue实例非常简单，只需要在HTML中引入Vue.js，然后在JavaScript中创建一个Vue实例即可。具体代码如下：
// www.javascriptcn.com code example
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 在body内创建Vue实例 -->
<body>
<div id="app"></div>
<script>
// 创建Vue实例
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>其中，el属性指定这个Vue实例的挂载元素，这里我们将它挂载在id为“app”的div上。data属性则是Vue实例的数据模型，这里我们定义了一个message属性，它的值是“Hello Vue!”。
2. 渲染数据
有了Vue实例，接着我们需要将数据渲染到页面上。在Vue中，可以通过双花括号“{{ }}”将数据绑定到HTML中。具体代码如下：
// www.javascriptcn.com code example
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 在body内创建Vue实例 -->
<body>
<div id="app">
<!-- 将message绑定到p标签中 -->
<p>{{ message }}</p>
</div>
<script>
// 创建Vue实例
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>这样，我们就可以将Vue实例中的数据渲染到页面上了。
3. 绑定事件
除了将数据渲染到页面上，Vue还可以让我们很方便地绑定各种事件。通过在标签上使用v-on指令可以绑定事件。如下：
// www.javascriptcn.com code example
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 在body内创建Vue实例 -->
<body>
<div id="app">
<p>{{ message }}</p>
<!-- 绑定click事件 -->
<button v-on:click="changeMessage()">Click me!</button>
</div>
<script>
// 创建Vue实例
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
// 在methods属性中定义changeMessage函数
changeMessage: function () {
this.message = 'Hello Vue.js!'
}
}
})
</script>
</body>这里我们给按钮绑定了一个click事件，当按钮被点击时，就会调用changeMessage函数。在Vue实例的methods属性中，我们定义了changeMessage函数，并在函数中修改了message属性的值。
4. 制作单页应用
接下来，我们将用Vue.js制作一个简单的单页应用。这个应用将包含两个页面：首页以及关于页面。点击导航栏上的链接，即可在页面的主体区域中显示相应的内容。
4.1 编写HTML
我们需要编写一个HTML文件用来放置Vue实例，同时通过一个div来占据主体区域，另外还需要编写两个Vue组件，一个用来渲染首页，另一个用于渲染关于页面。具体代码如下：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Page Application</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 导航栏 -->
<nav>
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>
</ul>
</nav>
<!-- 主体区域 -->
<div id="app">
<!-- 通过v-if指令来控制组件的显示 -->
<home v-if="currentRoute === '/'"></home>
<about v-if="currentRoute === '/about'"></about>
</div>
<!-- 定义组件 -->
<script type="text/x-template" id="home-template">
<div>
<h1>Home</h1>
<p>Welcome to my website!</p>
</div>
</script>
<script type="text/x-template" id="about-template">
<div>
<h1>About</h1>
<p>Here is some information about me...</p>
</div>
</script>
<script>
// 定义组件并注册到Vue
Vue.component('home', {
template: '#home-template'
})
Vue.component('about', {
template: '#about-template'
})
// 创建Vue实例
var app = new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
watch: {
// 利用watch选项来监听路由变化
currentRoute: function () {
this.currentRoute = window.location.pathname
}
}
})
// 监听popstate事件，当用户点击浏览器的前进后退按钮时，修改currentRoute的值
window.addEventListener('popstate', function () {
app.currentRoute = window.location.pathname
})
</script>
</body>
</html>4.2 实现路由
为了实现路由功能，我们需要引入Vue Router，Vue Router是Vue.js官方的路由管理器，它能够帮助我们更加方便地实现单页应用的路由功能。具体代码如下：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Page Application</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<!-- 导航栏 -->
<nav>
<ul>
<!-- 将链接改为router-link标签 -->
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
</nav>
<!-- 主体区域 -->
<div id="app">
<!-- 将Vue组件改为router-view标签 -->
<router-view></router-view>
</div>
<!-- 定义组件 -->
<script type="text/x-template" id="home-template">
<div>
<h1>Home</h1>
<p>Welcome to my website!</p>
</div>
</script>
<script type="text/x-template" id="about-template">
<div>
<h1>About</h1>
<p>Here is some information about me...</p>
</div>
</script>
<script>
// 定义路由数组
var routes = [
{ path: '/', component: { template: '#home-template' } },
{ path: '/about', component: { template: '#about-template' } }
]
// 创建Vue Router实例
var router = new VueRouter({
routes: routes
})
// 创建Vue实例并将Vue Router添加到其中
var app = new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>这样，我们就完成了一个基于Vue.js的单页应用。在这个例子中，我们学习了如何创建Vue实例、如何渲染数据、如何绑定事件以及如何利用Vue Router来实现路由功能，这对于前端开发者入门Vue.js提供了很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d020d9e46428fe9ecc2b98