初探Vue.js

Vue

Vue学习系列1——今日起,我即投向Vue的怀抱。

Vue是当前应用最广的三大前端框架(Vue、React、Angular)之一,在GitHub趋势中更是排在了第一位,它不仅易用、灵活,而且易于上手,能够构建各类或简单或复杂的应用。目前Vue已经被包括BAT在内的许多企业广泛地应用,俨然已经成为了一个前端工程师的必备技能之一。

Vue

官方介绍

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

所以,Vue到底是什么?

  • 一款非常优秀的前端JavaScript框架,由尤雨溪创建开发
  • 可以轻松构建单页(SPA)应用程序
  • 通过指令扩展了HTML,通过表达式绑定数据到HTML
  • 最大程度上解放了DOM操作
  • 它能让你更加的享受编程的乐趣
  • 数据驱动,开源

    Vue的特点

  • 简单易用
  • 灵活渐进式
  • 轻量高效
  • 虚拟DOM
  • MVVM
  • 组件化

在此之前

在学习Vue之前,你应当确保自己已经具备一定的HTMLCSSJavaScript知识。

构建第一个Vue应用

在初步了解了Vue之后,现在通过模仿Vue.js官方文档中一个简单的实例帮助我们更进一步了解Vue。

起步

作为初学者,我们通过一种简单的方式来直接引入Vue:

1
2
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1
2
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

以上第一种版本适用于开发和学习,而在正式的产品中,我们选择第二种版本。

声明式渲染

Vue.js使用简洁的模板语法将声明的数据渲染进DOM。

1
2
3
<div id="first_vue">
{{ msg }}
</div>

下面的工作就要交给Vue.js来完成了:

1
2
3
4
5
var app = new Vue({
el: '#first_vue',
data: {
msg: 'Hello World!'}
})

整个页面代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>First_Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="first_vue">
{{ msg }}
</div>

<script>
var app = new Vue({
el: '#first_vue',
data: {
msg: 'Hello World!'}
})
</script>
</body>
</html>

完毕

我们已经成功构建了一个Vue应用,这看起来似乎和普通的html页面没有什么区别,但实际上Vue已经在背后做了大量的工作。数据此时已经与DOM相关联,所有东西都是响应式的。

我们可以在创建的页面中打开浏览器的JavaScript控制台,修改app.msg的值,可以看到页面上的内容也会相应变化。

例如,控制台命令:

1
app.msg = 'Hello Vue'

效果:

Hello_Vue

我们的第一个Vue应用就此创建完毕。

最后更新于19-06-02
助力本站发展