您现在的位置:新闻首页>赛车直播

一篇看完就把Vue.js融会贯通

2018-06-01 00:24编辑:内江新闻网人气:


vue

Vue是一个专注于前端UI的框架。它的主要能力是:

声明式绑定。包括数据绑定、事件绑定 基于组件的编程。让开发者可以把整个应用分为若干组件,分而治之

本篇文字会讲解声明式绑定,并且会谈及Vue的引入、数据绑定、事件绑定、Vue实例、指令。特别的,同样的案例,我也用来讲解Vue最为引以为傲的组件技术。案例是一个微小的叫做counter的应用,看起来是这样的:

有一个标签显示数字0,当点击按钮“+”,数字会每次加1。代码如下。你可以直接保存代码到html文件中,然后用浏览器打开,如果是IE的话必须是IE8或者或以上版本:

<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app">     <span>{{count}}</span>     <button @click="inc">+</button> </div> <script> var app = new Vue({   data () {     return {count: 0}   },   methods: {     inc () {this.count++}   } }) app.$mount('#app') </script>  

你可以实际的操作,看到按钮和数字的互动变化。然后我们来看Vue如何做到的。

首先,必须引入Vue.js库。我们使用<script>,像是任何古老的js库或者框架的引入一样,引入Vue.js。为了方便,我们没有下载vue.js ,而是使用了vue.js的一个网上提供的拷贝。此拷贝由提供。接下来的代码分为HTML标签和放置于<script>内的js代码。

随后我们看HTML。它就是有一个div标签内嵌套button和span标签,看起来和普通HTML别无二致。除了{{count}}、和@click属性之外。形如{{key}}的符号,是一种特殊的记号,表示的含义是:

从该标签所在的Vue实例内的data函数返回的对象内查找名为‘key’的项目值,把这个值拿来填充{{key}}所占据的位置的内容。

具体到本案例,Vue实例内包含了data和methods。从而{{count}}最终定位得到返回对象,{count: 0},从而得到值0,并使用0填充到<span>标签的内容上。这就是<span>{{count}}</span>的填充过程。

而@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上的<span>内容就会变化呢?我们本来以为的流程应该是:“我们首先修改this.count,然后拿这个修改过的值通过DOM API去更新<span>”。然而{{count}}这样的数据绑定,不仅仅意味着把this.count的值显示出来,也意味着当this.count被修改的时候,<span>的内容会跟着更新。这就是响应式编程,具体的魔法由Vue内部完成。开发者只要通过{{}}形式的声明,告诉Vue说,“我的这块内容应该显示Vue实例内的某个数据,并且当Vue实例数据更新时,这里的显示也要更新”即可。

Vue实例还做的另外一件事,是托管了data()返回的数据对象。数据对象的方法本来的做法是:

this.$data.count 

因为Vue实例的托管,你可以通过

this.count 

访问达到data对象的count。这样的简易设计,真是讨人喜欢。

再看下@click,它其实是v-on:click的简写,就是说本来应该写为:

<button v-on:click="inc">+</button> 

这里就需要引出一个非常常用的、叫做“指令”的概念。指令是带有v-前缀的特殊HTML标签属性。。指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM 上。

指令能接受一个参数,在指令后以“:”指明。 指令能接受一个修饰符,是以“.”指明的特殊后缀 指令能接受一个属性值,预期是单一JavaScript表达式

让我们回顾一下在介绍里的例子:v-on就是一个指令,它接受一个参数为click,接受的属性值为inc。语义我们已经在上文提及,就是把onclick事件绑定到inc方法上。

(来源:网络整理)

织梦二维码生成器
已推荐
0
  • 凡本网注明"来源:的所有作品,版权均属于中,转载请必须注明中,http://www.jlmotherofpearl.com。违反者本网将追究相关法律责任。
  • 本网转载并注明自其它来源的作品,目的在于传递更多信息,并不代表本网赞同其观点或证实其内容的真实性,不承担此类作品侵权行为的直接责任及连带责任。其他媒体、网站或个人从本网转载时,必须保留本网注明的作品来源,并自负版权等法律责任。
  • 如涉及作品内容、版权等问题,请在作品发表之日起一周内与本网联系,否则视为放弃相关权利。






图说新闻

更多>>
腾讯游戏平台下载 v2.18.0.4865官方版

腾讯游戏平台下载 v2.18.0.4865官方版



返回首页