实用又惊艳的Vue

这里的惊艳，不是像武侠小说里面的主人公一样，掉进一个洞里，捡到一本秘籍，打通任督二脉，然后就笑傲江湖

而是像普通人一样的，比如像庖丁解牛，或者是像卖油翁，是在司空见惯的平凡中做出不平凡

Vue就是这样，它面向前端开发天天要做的事情，但它却可以做到让人惊艳的简洁而实用

这里来展示一下

首先是引用vue.js

然后新建一个Vue实例，名称叫作app

它的内容相当简单，现在只有二点：1需要作用到网页的哪个部分，2要展示的数据。

app中的el属性（代表element），关联到vue要作用的文档元素上，可以看到，这里使用的是id定位方式。

而data，不用说，就是我们的数据了

使用双大括号表达式来展现，这里的表达式是最简单的：仅仅引用变量

然后我们看到了。这虽然很简单，但说明机制运行是正常的。

Vue是响应式的，就是说，你变我也变，数据变了，网页里所有用到数据的地方都会同步改变。在console里修改一下试试

看，网页上马上就自动改变了

现在我们在data对象里使用复杂一点的数据类型

放置一个对象的列表，每个对象里存储了id，数量，名称等数据，

我们在页面中展示对象的数量和名称，然后当数量为0时，在旁边加上“卖完了”的提示

这个在python中，我们用过这样的表达式生成器，带判断条件的，比如获取1-10之间的偶数

[x for x in range(1,10) if x % 2 == 0]

可以得到[2, 4, 6, 8]

这里也可以用类似的写法来做条件判断，使用v-if指令，非常方便

然后来做一下总库存的计算，也就是将每个对象里的数量相加。

用devtool可以随时检查vue对象（这里是App变量）的内部细节，devtool在华为classroom的WEB全栈课程资料里面可以下载

效果如下：

下面添加一些互动的效果，添加按钮，当点击时将该商品的数量加1

再将原来显示数量的地方，变为数量的输入框

这时我们可以看到，所有的相关显示点，都可以正确及时响应

当数量大于1时，“卖完了”的提示会消失；当为0时，又会出现

总库存随着每个对象的数量的变化而同步变化

在输入框输入会让总库存产生变化，“添加”按钮的点击同时更新了输入框的值

这些行为，很好的表现了Vue的响应式

最终效果如下

到此结束。

本文素材来自 cn.vuejs.org，代码请参考附件。