初识Vue.js

2024-01-26 10:17:58

初识Vue.js

Vue.js是什么

Vue.js的官方文档中是这样介绍它的。

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

简单小巧是指Vue.js压缩后大小仅有17KB。所谓渐进式（Progressive），就是你可以一步一 步、有阶段性地来使用Vue.js，不必一开始就使用所有的东西。

使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能，比如：

  • 解耦视图与数据。
  • 可复用的组件。
  • 前端路由。
  • 状态管理。
  • 虚拟 DOM （Virtual DOM）

MWM 模式

与知名前端框架Angular、Ember等一样，Vue.js在设计上也使用MVVM（Model-View-View Model）模式。
MVVM模式是由经典的软件架构MVC衍生来的。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定（data-binding）建立联系，如下图所示。

初识Vue.js

Vue.js有什么不同

如果你使用过jQuery，那你一定对操作DOM、绑定事件等这些原生JavaScript能力非常熟悉，比如我们在指定DOM中插入一个元素，并给它绑定一个点击事件：

if (showBtn) {
    var btn = $('<button>Click me</button>');
    btn.on('click', function () {
      console.log('Clicked!');
    }); 
    $ ('#app').append(btn);
}

这段代码不难理解，操作的内容也不复杂，不过这样我们的视图代码和业务逻辑紧耦合在 一起，随着功能不断增加，直接操作DOM会使得代码越来越难以维护。

而Vue.js通过MWM的模式拆分为视图与数据两部分，并将其分离。因此，你只需要关心你的数据即可，DOM的事情Vue会帮你自动搞定，比如上面的示例用Vue.js可以改写为：

<body>
    <div id=napp">
      <button v-if="showBtn" v-on:click="handleClick">Click me</button> 
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            showBtn: true
        },
    methods: {
        handleclick: function () { 
            console.log('Clicked!');
		}
	}
})
</script>

如何使用Vue.js

每一个框架的产生都是为了解决某个具体的问题。在正式开始学习Vue.js前，我们先对传统前端开发模式和Vue.js的开发模式做一个对比，以此了解Vue.js产生的背景和核心思想。

传统的前端开发模式

前端技术在近几年发展迅速，如今的前端开发已不再是10年前写个HTML和CSS那样简单了，新的概念层出不穷，比如ECMAScript6、Node.js、NPM、前端工程化等。这些新东西在不断优化我们的开发模式，改变我们的编程思想。

随着这些技术的普及，一套可称为'‘万金油”的技术栈被许多商业项目用于生产环境：
jQuery + RequireJS（SeaJS） + artTemplate（doT） + Gulp（Grunt）

这套技术栈以jQuery为核心，能兼容绝大部分浏览器，这是很多企业比较关心的，因为他们的客户很可能还在用IE7及以下浏览器。使用RequireJS或SeaJS进行模块化开发可以解决代码依赖混乱的问题，同时便于维护及团队协作。使用轻量级的前端模板（如doT）可以将数据与HTML模板分离。最后，使用自动化构建工具（如Gulp）可以合并压缩代码，如果你喜欢写Less、Sass以及现在流行的ES 6，也可以帮你进行预编译。

这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式，由于它的简单、高效、实用，至今仍有不少开发者在使用。不过随着项目的扩大和时间的推移，出现了更复杂的业务场景，比如SPA（单页面富应用）、组件解耦等。为了提升开发效率，降低维护成本，传统的前端开发模式已不能完全满足我们的需求，这时就出现了如Angular、React以及我们要介绍的主角Vue.js。

Vue.js的开发模式

Vue.js是一个渐进式的JavaScript框架，根据项目需求，你可以选择从不同的维度来使用它。如果你只是想体验Vue.js带来的快感，或者开发几个简单的HTML 5页面或小应用，你可以直接通过script加载CDN文件，例如：

<!-- 自动识别最新稳定版本的Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!-- 指定某个具体版本的Vue.js -->
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>

两种版本都可以，如果你不太了解各版本的差别，建议直接使用最新的稳定版本。当然，你也可以将代码下载下来，通过自己的相对路径来引用。引入Vue.js框架后，在body底部使用new Vue()的方式创建一个实例，这就是Vue.js最基本的开发模式。现在可以写入以下完整的代码来快速体验Vue：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>黄子涵创建的第一个Vue示例</title>
  </head>
  <body>
      <div id="app">
          <ul>
              <li v-for="book in books">{{ book.name }}</li>
          </ul>
      </div>
      <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
      <script>
          new Vue({
              el: '#app',
              data: {
                  books: [
                      { name: ' 《HTML权威指南》 ' },
                      { name: ' 《JavaScript权威指南》' },
                      { name: ' 《Vue.js实战》' }
                  ]
              }
          })
      </script>
  </body>
</html>

在浏览器中访问它，会将图书列表循环显示出来，如下图所示。
黄子涵第一个Vue实例

Bug

中文乱码
现象

中文乱码

解决方案与思路

初识Vue.js

初识Vue.js

初识Vue.js

  • 对于中文乱码的Bug，有点类似变量“全局性”和“局部性”的思想，Bug不只是出现一处地方，而是同时出现在<body>元素和<head>内。如果这两处地方都是外部引入的，那么我们应该从外部引入的地方入手，又或者它们都是某个全局性的变量或者代码控制的，我们也可以考虑从那里入手。在这份代码，我们是通过这个脚本<script src="https://unpkg.com/vue/dist/vue.min.js"></script>代码引入一个封装好的Vue，所以我们也要考虑这里出现的问题，这有点类似追根溯源的道理。

  • 我将下载好的Js文件分别做了两个对照实验一份是改为ANSI格式，另外一份改为UTF-8格式，再引入到一个没有Bug的HTML文件当中，打开的时候发现两个对应的HTML文件是没有出现乱码的Bug。所以我们应该考虑问题是不是出现在别的地方。现象如下：

  • 再仔细思考，因为封装好的Vue是通过<script src="https://unpkg.com/vue/dist/vue.min.js"></script>外部引入的，我们在<script>元素内在新建一个Vue实例，再进行使用。换句话说，如果代码出现在这段代码中，那么我使用ANSI格式JS文件应该只是影响到<body>元素内的值。出现的现象应该是标题中中文不出现乱码，而<body>出现乱码。这里不得不引起我的一个新问题：

    1. 到底引入Vue到浏览器渲染整个HTML文件，这之间是怎么样的一个过程？

    2. 代码是顺序执行的话，引入Vue如果位置发生变化，对Bug会不会出现影响？

  • 带着上面第二问题，我又重新将引入JS文件那段代码放在<head>，发现并不会出现Bug。所以第二个问题似乎已经解决了，也就是引入Vue位置并不会影响到HTML文件，这描述可能不是很准确。

  • 既然<script src="https://unpkg.com/vue/dist/vue.min.js"></script>不是导致Bug的原因，那么到底是什么导致这个Bug呢？从解决方案来看，应该是HTML文件没有转换编码格式。

  • 无论是ANSI格式还是UTF-8格式，都是一种对将符号转换为数制的一种编码格式。

语法错误
现象

语法错误

解决方案与思路

  • 这里出现的现象是只出现了三个黑点，没有显示文字。也就是循环起作用了，但是没有把文字打印出来。也就是<li v-for="book in books">{{ book.name }}</li>这段代码中的v-for起了作用，但是

    { name: ' 《HTML权威指南》 ' },
{ name: ' 《JavaScript权威指南》' },
{ name: ' 《Vue.js实战》' }

    这段代码的name后面的字符串没有打印出来。那么导致Bug的地方就有可能介于name和v-for这个范围，按照解决方案也验证了我这个想法。

  • 这里为日后看源码留下悬念：v-for的实现原理是怎么样的？

对于一些业务逻辑复杂，对前端工程有要求的项目，可以使用Vue单文件的形式配合webpack使用，必要时还会用到vuex来管理状态，vue-router来管理路由。这里提到了很多概念，目前还不必去过多了解，只是说明Vue.js框架的开发模式多样化。

了解了Vue.js的开发模式后，相信你已经迫不及待地想开启Vue的大门了。

上一篇：如何正确的找BUG


下一篇：Python 学习笔记（一）Python 简介