《Vue.js小书》发布，尤雨溪作序推荐

Posted 2021-05-01 图灵教育

不少小伙伴期待已久的一本电子书今天发布了——《Vue.js小书》，适合新手入门，这是作者刘传君的第3本电子书了，本书得到了Vue.js作者尤雨溪的推荐！

推荐序（尤雨溪 Vue.js 作者）

作为一个开源项目的作者，最有成就感的时候莫过于有用户告诉你，你的作品让他们的生活变得更美好了。作为一个开源项目的使用者，我也深刻地了解使用一个跟自己合拍的项目的那种愉悦感。因此，在看到本书作者在前言中描述他和 Vue.js 的初遇的时候，我能够真切地感受到他对 Vue.js 的喜爱，也因此感到格外的欣慰。

这是一本小书，但麻雀虽小，五脏俱全。篇幅不长，涵盖的内容却面面俱到；虽然一些部分没有特别深入，但全书脉络清晰，行文通畅，浅显易懂，很适合新手入门。希望这本书能够帮助更多的开发者走进 Vue.js 的世界，让前端开发变成一件值得享受的事情。

---

作者有话说

之前我完成了第一本小书，叫做《http:// 小书》，然后，我从自己的轻度抑郁这个坑里面爬了出来。我于是爱上了写作。时隔一年，这是我的第三本小书了。它不但让我在业余时间有更多的趣味，也帮我每天都可以有一段自己的时间，可以暂时性地断离那些令人畏惧的社交。并且依靠文字的进步，我发现我的阅读能力也大幅提高了，这真是意外之喜。

对其他框架我是佩服，对Vue.js则是爱。我就是一眼看上了Vue.js，于是用它做各种东西，反反复复多次。然后当我觉得有些融会贯通时，我又回头去思考这样的问题：让我感觉到的Vue.js的靓丽，具体是什么？

还是上案例对比说明。这次的案例，UI看起来是：

这是由一个span、两个按钮构成的界面。点击按钮会让span加1或者减1。

vanilla.js

vanilla.js的意思是，不使用任何框架。我们使用vanilla.js实现的代码是这样的：

<div id="app">
<p><span id="count">0</span>
    <button id="inc">+</button>
    <button id="dec">-</button>
  </p>
</div>
<script>
    var counter = document.getElementById('count');
    var btn1 = document.getElementById('inc');
    var btn2 = document.getElementById('dec');
    var count = 0;
    btn1.addEventListener('click',function (){
                counter.innerhtml = ++count;
            }
    )
    btn2.addEventListener('click',function (){
                counter.innerHTML = --count;
            }
    )
</script>

代码行数倒是不算多，但是看起来的感受是:

1. 使用了多个DOM API(getElementById,innerHTML)。

2. DOM API设计的复合词太长。

我偏爱简洁的代码，而使用DOM API就构成了一种代码的臭味，让我喜欢不起来。

jQuery

第二个出场的是jQuery。我个人认为前端历史上来说，有几个标志性事件:

1. 微软加入了XMLHttpRequest，从此Ajax技术一发而不可收。

2. jQuery。简单的Selector，精简的API，令世人只知道有jQuery，不知道有Vanilla.js。

3. Vue.js等相类似的框架。引入了数据绑定、组件技术到前端开发。

jQuery当然是不错的技术。那么，使用它完成一样的代码，效果会如何呢？

  <script
  src="https://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
<div id="app">
<p><span id="count">0</span>
    <button id="inc">+</button>
    <button id="dec">-</button>
  </p>
</div>
<script>
var count = 0
$('#inc').click(function(){
  $("#count").html(++count)
})
$('#dec').click(function(){
  $("#count").html(--count)
})
</script>

分析一下：

1. jQuery的选择器比起原生的更好，即使和querySelector相比也更简洁。

2. 使用精简的API替代Vanilla的。比如.html()比起.getElementById（）来说，是要看着舒服点的。

然而，内核基本不变：依然需要编码添加EventListener，依然是命令式的取值和修改值，依然需要懂得DOM的节点选择、事件监听、回调函数等。

Vue.js

最后出场的是Vue.js，代码是这样的：

<script ></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
new Vue({
  el:'#app',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})
</script>

第一感觉就是：

1. 规整。数据（data）方法(methods)放置得工工整整，一目了然。它充分地利用JS的字面量对象的语法。

2. 整个应用接口设计，基本上采用的都是极为简洁的词汇。一眼看过去，一个复合词也没有（比如getElementById就是4个词复合起来的）。

现在，你看到的好处是：

1. 现在，你不需要挂接EventListener，使用@click语法自动绑定事件，使用{{}}自动绑定数据。

2. 你不需要DOM的一系列的知识就可以构造此程序；对初学者来说，这个门槛真是降低太多。

Vue.js的优美和简约，来源于声明式编程的理念。就是说我不需要通过一系列的函数调用来完成一件事儿，而是直接声明想要做到什么。具体说来：

1. 程序员直接声明{{count}}，告诉Vue此处使用Vue实例中的data对象内的count属性来填充，而不是调用.getElementById,.textContent来设置。

2. 程序员通过@click，直接声明点击事件指向位置为Vue实例内对象methods对应的方法。而不是通过调用.addEventListener，传入回调函数的方式来实现事件监听。

整个Vue.js的应用接口设计得非常优美，但是能量巨大，做到这一点需要很多功力。这就是我佩服的设计哲学。把麻烦留给自己，让开发者感受简洁。

刘传君小书三部曲

小书图灵社区购买网址：

http://www.ituring.com.cn/book/1956

http://www.ituring.com.cn/book/1791

http://www.ituring.com.cn/book/1870

刘传君  创建过产品，创过业。好读书，求甚解。 可以通过[e-mail]联系到我。

     

☟【阅读原文】购买《Vue.js小书》