看完这篇文章，你就可以掌握Vue.js
时间：2023-03-18 22:23:18
科技观察
Vue是一个专注于前端UI的框架。它的主要功能是：声明式绑定。包括数据绑定、事件绑定Component-basedprogramming。让开发者把整个应用程序分成几个组件，分而治之。本篇将讲解声明式绑定，讲讲Vue的介绍、数据绑定、事件绑定、Vue实例、使用说明。特别地，我也用同样的案例来讲解Vue最引以为豪的组件技术。该示例是一个名为计数器的微型应用程序，它看起来是这样的：有一个标签显示数字0，当单击“+”按钮时，每单击一次，数字将增加1。代码如下所示。可以直接把代码保存成html文件，然后用浏览器打开。如果是IE，则必须是IE8以上：{{count}}+
可以实际操作，看到按钮和数字的交互变化。那我们看看Vue是怎么做的。首先，必须导入Vue.js库。我们使用里面的js代码。然后我们看看HTML。它只是在div标签中嵌套了button和span标签，看起来就像普通的HTML。{{count}}和@click属性除外。{{key}}形式的符号是一种特殊的标记，意思是：在标签所在的Vue实例中，从data函数返回的对象中找到名为'key'的item的值，把这个value填充{{key}}所占位置的内容。具体在这种情况下，Vue实例包含数据和方法。这样{{count}}最终定位得到返回的对象，{count:0}，这样就得到了0值，0用来填充
标签的内容。这就是{{count}}的填充方式。@click的含义是：将按钮的onclick事件hook到对应Vue实例的methods对象中的指定方法。这是inc()方法。Vue实例通过调用$mount方法将JavaScript中的数据和方法与HTML中对应的标签块关联起来。当然，不使用$mount方法，而是使用：newVue({el:'#app',...通过el成员的值#app关联到div#app。两者是等价的。但是我更喜欢$mount，因为它认为：Vue实例本身的内容和它与HTML的关联是两个不同的东西，还是分开来看比较好。真正的魔法来了，就是Vue的响应式编程特性。我们看到inc()方法只修改了数字this.count，UI上的的内容会发生变化吗？我们原本以为流程应该是：“我们先修改this.count，然后取修改后的值通过DOMAPI来更新”。但是像{{count}}这样的数据绑定不仅仅意味着显示this.count的值，还意味着当this.count被修改时，的内容会跟随Update。这就是响应式编程，具体的魔法由Vue内部完成。开发者只需要通过一个语句告诉Vue形式{{}}，“我的一段内容应该显示Vue实例中的某个数据，当Vue实例数据更新时，这里的显示也应该更新”。Vue实例做的另一件事是托管data()返回的数据对象。数据对象的原始方法是：this.$data.count由于Vue实例的托管，可以通过this.count访问数据对象的计数。如此简单的设计，着实让人赏心悦目。再看@click，其实是v-on:click的缩写，也就是说应该写成：+这里需要介绍一下一个非常常用的叫做“指令”的概念。指令是以v-为前缀的特殊HTML标记属性。.指令的工作是在其表达式的值发生变化时相应地向DOM应用一些行为。该命令可以接受一个参数，该参数在命令后以“：”表示。指令可以接受修饰符，用特殊后缀“.”指定。指令可以接受一个属性值，期望是一个单一的JavaScript表达式让我们回顾一下介绍中的例子：v-on是一个指令，它接受一个参数Forclick，接受的属性值为inc。我们上面提到的语义就是将onclick事件绑定到inc方法上。指令的概念很重要，也是扩展和重用代码的一种方式。除了我们看到的v-on，还有很多指令可以使用，比如循环复制当前标签的v-for等等。与{{count}}类似，其实可以使用v-text命令代替：更多的命令我会在后续的文章中继续提及。在新的Vue版本中，组件被认为是重用代码和分离关注点的更好方式。接下来，我们用同样的案例来讲解组件。我们可以看到HTML代码：{{count}}+ 标签
和 这一次，我们看到了一些新东西：Vue的新属性模板。它的值用于加载html模板代码。在这种情况下，它是放置两个本来应该在主HTML中的标签。请注意，它们在外部包含一个div标签。因为Vue2.0版本要求作为模板的html必须是单根的。Vue的新属性组件，用于注册一个本地组件。组件计数器就是在这里注册的，这样就可以在html标签中直接使用
来引用组件计数器。虽然这个案子太小，看不出有多大好处。但是，引入这样的组件可以让高度相关的html元素和相应的数据和代码凝聚在一起。这符合软件工程的原则，因此是一种令人鼓舞的行为。新的组件可以完全分离到另一个脚本文件中，这样既实现了代码和主要html的逻辑分离，又实现了物理分离。另外，使用模板在代码中添加一些html是很烦人的：你必须小心在外层使用单引号，在内部使用双引号。混合js和html是不好的。这时候，你可以使用另一种方法：render函数。实际上，所有的模板字符串都是在内部编译成Vue支持的render函数或者JSX的单文件组件技术。当然，后两种方式需要翻译器和打包工具的配合。比如babel和webpack。这些内容请自行搜索参考vue.js-advance-renderfunctioncheatsheetvue.js的启动暂不讨论。
