怎么把Vue.js融会贯通

这篇文章给大家介绍怎么把Vue.js融会贯通，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。Vue是一个专注于前端UI的框架。它的主要能力是：声明式绑定。包括数据绑定、事件绑定基于组件的编程。让开发者可以把整个应用分为若干组件，分而治之本篇文字会讲解声明式绑定，并且会谈及Vue的引入、数据绑定、事件绑定、Vue实例、指令。特别的，同样的案例，我也用来讲解Vue最为引以为傲的组件技术。案例是一个微小的叫做counter的应用，看起来是这样的：有一个标签显示数字0，当点击按钮“+”，数字会每次加1。代码如下。你可以直接保存代码到html文件中，然后用浏览器打开，如果是IE的话必须是IE8或者或以上版本：你可以实际的操作，看到按钮和数字的互动变化。然后我们来看Vue如何做到的。首先，必须引入Vue.js库。我们使用随后我们看HTML。它就是有一个div标签内嵌套button和span标签，看起来和普通HTML别无二致。除了{{count}}、和@click属性之外。形如{{key}}的符号，是一种特殊的记号，表示的含义是：从该标签所在的Vue实例内的data函数返回的对象内查找名为‘key’的项目值，把这个值拿来填充{{key}}所占据的位置的内容。具体到本案例，Vue实例内包含了data和methods。从而{{count}}最终定位得到返回对象，{count: 0}，从而得到值0，并使用0填充到标签的内容上。这就是{{count}}的填充过程。而@click表示的含义是：把button的onclick事件挂接到对应Vue实例的methods对象内的指定方法上。这里就是inc()方法。Vue实例通过调用$mount方法，把JavaScript内的数据和方法和HTML内对应的标签块关联起来。当然，可以不使用$mount方法，而是采用：new Vue({el:'#app',...通过el成员的值#app，关联到div#app上。两者是等同的。但是我更喜欢$mount，因为它认为：Vue实例自身的内容它对HTML的关联是两回事。分开看会更好。真正神奇的地方来了，这就是Vue的响应式编程特性。我们看到inc()方法内只是修改了this.count这个数字，UI上的内容就会变化呢?我们本来以为的流程应该是：“我们首先修改this.count,然后拿这个修改过的值通过DOM API去更新”。然而{{count}}这样的数据绑定，不仅仅意免费云主机、域名味着把this.count的值显示出来，也意味着当this.count被修改的时候，的内容会跟着更新。这就是响应式编程，具体的魔法由Vue内部完成。开发者只要通过{{}}形式的声明，告诉Vue说，“我的这块内容应该显示Vue实例内的某个数据，并且当Vue实例数据更新时，这里的显示也要更新”即可。Vue实例还做的另外一件事，是托管了data()返回的数据对象。数据对象的方法本来的做法是：因为Vue实例的托管，你可以通过访问达到data对象的count。这样的简易设计，真是讨人喜欢。再看下@click，它其实是v-on:click的简写，就是说本来应该写为：这里就需要引出一个非常常用的、叫做“指令”的概念。指令是带有v-前缀的特殊HTML标签属性。。指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM 上。指令能接受一个参数，在指令后以“：”指明。指令能接受一个修饰符，是以“.”指明的特殊后缀指令能接受一个属性值，预期是单一JavaScript表达式让我们回顾一下在介绍里的例子：v-on就是一个指令，它接受一个参数为click，接受的属性值为inc。语义我们已经在上文提及，就是把onclick事件绑定到inc方法上。指令的概念非常重要，也是扩展和复用代码的一种方式，除了我们看到的v-on，还有很多可以使用的指令，比如v-for用于循环复制当前标签等等。类似{{count}},其实可以使用v-text指令替代：更多指令我会在后续文章中继续提及。在新的vue版本中组件被认为更好的复用代码和分离关注点的方式。接下来，我们使用同样的案例，讲解组件。我们可以看到HTML代码：标签和其实一起合作，完成一个完整的功能，它们是内聚的;因此组件的基础概念，如果可以使用一个自定义标签，把它们两个包装到一个组件内会是一种更好的实践。以此观念，做完后应该得到这样的代码：实际上开发起来并不困难，只是需要创建一个组件，把本来在Vue实例内的方法和数据，移动到此组件内，把在HTML内的两个标签也移动到组件的模板内。以下代码是可以直接保存为html文件，并使用浏览器来打开运行的：

相关推荐: 怎么求素数

这篇文章主要讲解了“怎么求素数”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么求素数”吧！前言现在的面试官，是无数开发者的梦魇，能够吊打面试官的属实不多，因为大部分面试官真的有那么那几下子。但在面试中，我们这…