VUE簡(jiǎn)單入門基礎(chǔ)教程（十）事件

-on是添加到DOM元素以偵聽VueJS中事件的屬性。

點(diǎn)擊事件

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type="text/javascript" src="js/vue.js"></script>
   </head>
   <body>
      <div id="databinding">
         <button v-on:click="displaynumbers">Click ME</button>
         <h2> Add Number 100 + 200={{total}}</h2>
      </div>
      <script type="text/javascript">
         var vm=new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : ''
            },
            methods : {
               displaynumbers : function(event) {
                  console.log(event);
                  return this.total=this.num1+ this.num2;
               }
            },
         });
      </script>
   </body>
</html>

輸出

以下代碼用于為DOM元素分配click事件。

<button v-on:click="displaynumbers">Click ME</button>

v-on有一個(gè)簡(jiǎn)寫形式，這意味著我們也可以按以下方式調(diào)用該事件：

<button @click="displaynumbers">Click ME</button>

單擊按鈕后，它將調(diào)用方法“ displaynumbers”，該方法將接收事件，并且我們已經(jīng)在瀏覽器中對(duì)控制臺(tái)進(jìn)行了操作，如上所示。

現(xiàn)在，我們將再檢查一次事件mouseover mouseout。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type="text/javascript" src="js/vue.js"></script>
   </head>
   <body>
      <div id="databinding">
         <div v-bind:style="styleobj" v-on:mouseover="changebgcolor" v-on:mouseout="originalcolor"></div>
      </div>
      <script type="text/javascript">
         var vm=new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : '',
               styleobj : {
                  width:"100px",
                  height:"100px",
                  backgroundColor:"red"
               }
            },
            methods : {
               changebgcolor : function() {
                  this.styleobj.backgroundColor="green";
               },
               originalcolor : function() {
                  this.styleobj.backgroundColor="red";
               }
            },
         });
      </script>
   </body>
</html>

在上面的示例中，我們創(chuàng)建了一個(gè)寬度和高度為100px的div。它的背景色為紅色。鼠標(biāo)懸停時(shí)，我們將顏色更改為綠色，鼠標(biāo)懸停時(shí)，我們將顏色更改為紅色。

因此，在鼠標(biāo)懸停期間，一種方法稱為changebgcolor，一旦將鼠標(biāo)移出div，則該方法稱為originalcolor。

這樣做如下-

<div v-bind:style="styleobj" v-on:mouseover="changebgcolor" v-on:mouseout="originalcolor"></div>

如上所示，將兩個(gè)事件-mouseover和mouseout-分配給div。我們創(chuàng)建了一個(gè)styleobj變量，并指定了要分配給div的所需樣式。使用v-bind：style=“ styleobj”將相同的變量綁定到div

在changebgcolor中，我們使用以下代碼將顏色更改為綠色。

changebgcolor : function() {
   this.styleobj.backgroundColor="green";
}

使用stylobj變量，我們將顏色更改為綠色。

同樣，以下代碼用于將其更改回原始顏色。

originalcolor : function() {
   this.styleobj.backgroundColor="red";
}

這就是我們?cè)跒g覽器中看到的。

當(dāng)我們將鼠標(biāo)懸停在上面時(shí)，顏色將變?yōu)榫G色，如以下屏幕截圖所示。

事件修飾符

Vue的v-on屬性具有事件修飾符。以下是可用的修飾符-

。一旦

允許事件僅執(zhí)行一次。

句法

<button v-on:click.once="buttonclicked">Click Once</button>

如上面的語(yǔ)法所示，我們?cè)谡{(diào)用修飾符時(shí)需要添加點(diǎn)運(yùn)算符。讓我們?cè)谑纠惺褂盟⒘私庖淮涡揎椃墓ぷ髟怼?/p>

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type="text/javascript" src="js/vue.js"></script>
   </head>
   <body>
      <div id="databinding">
         <button v-on:click.once="buttonclickedonce" v-bind:style="styleobj">Click Once</button>
         Output:{{clicknum}}
         <br/><br/>
         <button v-on:click="buttonclicked"  v-bind:style="styleobj">Click Me</button>
         Output:{{clicknum1}}
      </div>
      <script type="text/javascript">
         var vm=new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               buttonclickedonce : function() {
                  this.clicknum++;
               },
               buttonclicked : function() {
                  this.clicknum1++;
               }
            }
         });
      </script>
   </body>
</html>

輸出量

在上面的示例中，我們創(chuàng)建了兩個(gè)對(duì)接。具有“單擊一次”標(biāo)簽的按鈕添加了一次修改器，另一個(gè)按鈕沒有任何修改器。這是定義按鈕的方式。

<button v-on:click.once="buttonclickedonce" v-bind:style="styleobj">Click Once</button>
<button v-on:click="buttonclicked"  v-bind:style="styleobj">Click Me</button>

第一個(gè)按鈕將方法稱為“ buttonclickedonce”，第二個(gè)按鈕將方法稱為“ buttonclicked”。

buttonclickedonce : function() {
   this.clicknum++;
},
buttonclicked : function() {
   this.clicknum1++;
}

clicknum和clicknum1中定義了兩個(gè)變量。單擊按鈕時(shí)，兩者都會(huì)增加。兩個(gè)變量都初始化為0，并且在上面的輸出中可以看到顯示。

在單擊第一個(gè)按鈕時(shí)，變量clicknum會(huì)增加1。在第二個(gè)單擊時(shí)，數(shù)字不會(huì)增加，因?yàn)樾揎椃麜?huì)阻止其執(zhí)行或執(zhí)行單擊按鈕時(shí)分配的任何操作項(xiàng)。

單擊第二個(gè)按鈕時(shí)，將執(zhí)行相同的操作，即變量增加。每次單擊時(shí)，該值都會(huì)增加并顯示。

以下是我們?cè)跒g覽器中獲得的輸出。

檔對(duì)象模型（Document Object Model，DOM）是一種抽象化表示網(wǎng)頁(yè)的方法，文檔是以樹形結(jié)構(gòu)表示的。

Document節(jié)點(diǎn)分為父節(jié)點(diǎn)（parentNode）、子節(jié)點(diǎn)（childNode）、兄弟節(jié)點(diǎn)（siblingNode）等。

BOM（瀏覽器對(duì)象模型）因?yàn)闆]有一個(gè)標(biāo)準(zhǔn)來(lái)定義瀏覽器的功能，所以不同的瀏覽器有不同的屬性和方法。DOM則不然，有專門定義HTML（或XML）頁(yè)面中的對(duì)象應(yīng)該如何表示的標(biāo)準(zhǔn)。開發(fā)人員可以使用DOM操作或查找網(wǎng)頁(yè)中的某項(xiàng)內(nèi)容，尤其是表單、圖片、定位元素。

1 查詢或訪問的方法

當(dāng)HTML文檔加載完成后，瀏覽器將會(huì)將其表示成樹形結(jié)構(gòu)，頁(yè)面上的所有元素都是對(duì)象樹中的對(duì)象。如JS在處理表單時(shí)，會(huì)根據(jù)其在文檔中出現(xiàn)的次序?yàn)樗斜韱蝿?chuàng)建一個(gè)數(shù)組。document.forms[0]用來(lái)表示第一個(gè)表單。同樣，頁(yè)面上所有的圖片、鏈接和錨點(diǎn)都會(huì)以其名字存儲(chǔ)在數(shù)組中，例如document.images、document.links、document.anchors[]等。

1.1 數(shù)組通過(guò)名字或索引

如文檔中有一個(gè)表單，名字是form1，那么就可以通過(guò)它的名字來(lái)訪問它，即document.forms["form1"]，也可以使用索引值來(lái)訪問它，即document.forms[n].

1.2 通過(guò)document方法的name屬性

document.getElementByTagName();

1.3 通過(guò)document方法的ID屬性

document.getElementById();

2 DOM的修改

window.onload=function(){
var divObj=document.getElementById("divtest");
divObj.innerHTML="Inserting new text in the div container!";
}

3 DOM的追加

window.onload=function(){
var para=document.createElement("p");
var divObj=document.getElementById("divtest");
divObj.appendChild(para);
var txt=document.createTextNode("Hope this work!");
para.appendChild(txt);
}

4 DOM節(jié)點(diǎn)的插入

document.body.insertbefore(newPara, firstPara);

5 為DOM節(jié)點(diǎn)創(chuàng)建屬性

var headings=document.getElementsByTagName("h4");
headings[0].setAttribute("id", "firsth4");

6 DOM的復(fù)制

newPara=oldPara.cloneNode(true);

7 DOM的刪除

parentDiv1.removeChild(div2);

補(bǔ)充：
document.write()方法
可以寫入全部的文檔代碼，包括HTML、CSS乃至JS。

－End－

者按：以前有個(gè)關(guān)于編程語(yǔ)言的段子是這么說(shuō)的：寫C的看不起寫C++，寫C++的看不寫java的，寫java的看不起寫JS的，寫JS看不起美工，周末大家都在加班，美工帶著女朋友旅游去了。這么看來(lái)JavaScript已經(jīng)落到編程語(yǔ)言鄙視鏈的最底端去了。但是這門長(zhǎng)期位于十大編程語(yǔ)言行列的語(yǔ)言早已經(jīng)發(fā)展到幾乎無(wú)所不能的地步了，不信可以看看Rapha?l Benitte、Sacha Greif與Michael Rambeau所做的2017年JavaScript現(xiàn)狀報(bào)告。

我最近公布了我們2017年版的JavaScript年度現(xiàn)狀調(diào)查報(bào)告的結(jié)果，這是23000位開發(fā)者的共同反饋。

從流行趨勢(shì)到工資明細(xì)，結(jié)果揭示了很多事情。如果你還沒有這么做的話最好自己進(jìn)來(lái)看看。但是在所有這些數(shù)據(jù)當(dāng)中，有10件事情是最重要的。

即便你還沒有看過(guò)這些結(jié)果，你可能也想看看我們剛剛增加的新的功能和觀點(diǎn)部分。

洞察#1：React站穩(wěn)腳跟

今年的版本確認(rèn)了去年的趨勢(shì)：React目前是占據(jù)主導(dǎo)地位的前端庫(kù)。

React擁有目前為止最快樂的用戶（深紫色條塊）

對(duì)React的早期指責(zé)（通常集中在React混合HTML與JS的方式上）現(xiàn)在似乎已成遙遠(yuǎn)的記憶，F(xiàn)acebook還擱置了開發(fā)者今年最后一個(gè)主要的煩惱——取消了他們版權(quán)協(xié)議里面的專利條款。

隨著使用數(shù)量和開發(fā)者滿意度達(dá)到了有史以來(lái)的新高，完全可以說(shuō)React已經(jīng)站在了山頂上，至少目前是這樣。

洞察#2：Angular正朝著新的角色轉(zhuǎn)變

這并不意味著你就可以將Angular判負(fù)了。是，Angular的勢(shì)頭沒有像React那么強(qiáng)勁，但是它還有一些非常強(qiáng)的因素支撐。

首先，Angular背后有Google力量的支持。不管你怎么說(shuō)，那都是業(yè)界最好的工程師之一，他們正在投入全職的時(shí)間來(lái)改進(jìn)這個(gè)框架。

需要指出的重要一點(diǎn)還包括Angular仍然擁有龐大的用戶群。對(duì)于這股最新的熱潮，銀行、政府已經(jīng)其他大型公司沒法像你們這些普通的自由職業(yè)者接受得那么快，出于這個(gè)原因他們往往有龐大的遺留Angular代碼庫(kù)需要維護(hù)。

“新”Angular（2+）于“老”Angular（AngularJS）對(duì)比：接受度更低，但開發(fā)者滿意度更高

不過(guò)最后一點(diǎn)也許是最關(guān)鍵的：Angular不再嘗試跟React硬碰硬了，而是相反把自己的焦點(diǎn)轉(zhuǎn)移到企業(yè)市場(chǎng)。只需要看看Angular對(duì)TypeScript的采用就知道了：盡管這也許會(huì)阻止了一些開發(fā)者，但這樣決定也帶來(lái)了企業(yè)應(yīng)用所需的那種可靠性和安全性。

洞察#3：你再也不能忽視Vue.js了

Vue去年好像突然之間就冒了出來(lái)，并且在非常短的時(shí)間內(nèi)為自己贏得了React最大威脅者的稱號(hào)。它也許沒有Angular的用戶規(guī)模或者Ember的長(zhǎng)壽，但卻有著足以擊敗這兩個(gè)的東西：勢(shì)頭。

Vue & React：這兩個(gè)擁有最高的開發(fā)者滿意度（淺紫色 vs 深紫色）

盡管Vue擊敗React似乎仍然不大可能，但毋庸置疑的是，在提供全框架式體驗(yàn)方面，Vue的確擁有更好的故事，而這要得益于由同一支核心團(tuán)隊(duì)維護(hù)的官方路由和狀態(tài)管理庫(kù)。

洞察#4：了解一些庫(kù)的知識(shí)會(huì)幫你賺更多（但是原因不像你想的那樣）

通過(guò)收集和交叉引用工資數(shù)據(jù)，我們得以找出哪一項(xiàng)技術(shù)是最賺錢的。

不同的JavaScript技術(shù)，按照薪水從低（左）到高（右）排列

如結(jié)果表明那樣，往往是像Polymer或者Reason這樣的小眾技術(shù)跟最高薪水相關(guān)。

JavaScript前端庫(kù)，按照薪水從低（左）到高（右）排列

盡管Polymer獲得的薪水更高是可能的，但更資深的開發(fā)者（這些人往往賺得更多）往往嘗試更多不同的庫(kù)也是有可能的，而經(jīng)驗(yàn)不足的程序員更愿意把經(jīng)理集中在一或兩種主流技術(shù)。

因此按照這份排行榜去學(xué)東西可能（只是可能）并不是賺得更多的關(guān)鍵。

洞察#5：2018年將成為GraphQL之年

如果你跟絕大部分的調(diào)查受訪者一樣的話，你應(yīng)該已經(jīng)聽說(shuō)過(guò)GraphQL并且對(duì)它饒有興趣了，但其實(shí)你還沒有嘗試過(guò)。

REST希望自己也有個(gè)這么酷的logo

如結(jié)果表明那樣，這是一個(gè)非常常見的情況。在這次調(diào)查提到的所有技術(shù)里面，GraphQL是引起興趣最大的一個(gè)——盡管目前它的用戶數(shù)量還很少。

大大的黃色條代表的是14000位對(duì)GraphQL感到好奇的開發(fā)者

說(shuō)到當(dāng)前用戶，值得指出的是透明總體上都對(duì)GraphQL感到高度滿意。有了這里的高度興趣和高度滿意的結(jié)合，如果2018年成為GraphQL超越鴻溝進(jìn)入成為主流技術(shù)之年的話不要感到吃驚。

洞察#6：JavaScript !=前端

我們知道JavaScript不僅僅能用在瀏覽器里面已經(jīng)不是一天兩天的事情了。畢竟，Node就是一種非常流行的后端選擇，已經(jīng)流行了好幾年了。

但2017年JavaScript又開始了進(jìn)一步的擴(kuò)張：像AWS Lambda這樣的平臺(tái)讓你可以在沒有后端的情況下編寫后端代碼，而物聯(lián)網(wǎng)設(shè)備的日益流行意味著不久之后，你的烤面包機(jī)也很有可能最終跑的是JavaScript。

這臺(tái)烤面包機(jī)利用運(yùn)行Slack的桌面應(yīng)用產(chǎn)生的熱量來(lái)烤面包

如果這聽起來(lái)很荒謬，記住今年最熱門的文本編輯器，VS Code本身就是用JavaScript編寫并且作為Electron應(yīng)用運(yùn)行的。

JavaScript從作為展示橫幅廣告的工具發(fā)展成文本編輯器的編寫工具，這一切都是在幾年之內(nèi)發(fā)生的的事。相信我，JavaScript烤面包機(jī)的出現(xiàn)也許比你想象的要早。

洞察#7：微軟正在反擊

說(shuō)到VS Code，這絕對(duì)是今年的一大驚喜。在Sublime Text和Atom正在為文本編輯器的王座爭(zhēng)得不可開交時(shí)，新進(jìn)入者VS Code破窗而入，偷走了它們額午餐。

過(guò)去Sublime Text往往有速度上的優(yōu)勢(shì)，但卻被不直觀的UI抵消掉了，而Atom有著很好的UI但是往往給人很慢的感覺。

VS Code編輯器

結(jié)果表明VS Code也許已經(jīng)找到了這兩者的適當(dāng)平衡。盡管還是在類似Atom這樣的Electron基礎(chǔ)上開發(fā)出來(lái)的，但微軟的工程師在改進(jìn)性能方面做了很好的工作。就像Sublime一樣，它支持范圍很廣的各種插件和定制化，盡管一個(gè)更為用戶友好的軟件包“剛好能用”。

再加上TypeScript的崛起，看起來(lái)微軟終于把自己玩的web工具湊到一起了，并且證明了自己可以做出開發(fā)者用的東西了，而且開發(fā)者用是因?yàn)樽约合胗枚粌H僅是因?yàn)樗麄冎荒苡眠@個(gè)。

洞察#8：世界各地的JavaScript都不一樣

當(dāng)我們討論JavaScript時(shí)，我們往往把它當(dāng)作一個(gè)統(tǒng)一的生態(tài)體系來(lái)討論。盡管重要趨勢(shì)不同地區(qū)都是一致的，但有趣的是不同的國(guó)家往往會(huì)給JavaScript添加一些自己的定西進(jìn)去。

比方說(shuō)，你知道Vue在中國(guó)極其流行嗎？這是說(shuō)得過(guò)去的，因?yàn)閂ue的開發(fā)者Evan You就講中文，而且Vue已經(jīng)為多家中國(guó)的主流技術(shù)公司如阿里和百度所采用。

印度另一方面似乎特別鐘愛Angular。這也許至少部分是由于印度活躍的外包業(yè)所推動(dòng)，而外包往往盯住那種Angular所應(yīng)用的大型企業(yè)項(xiàng)目。

洞察#9：類型化JavaScript正在崛起

TypeScript、GraphQL、Elm、Reason，這些之間有何共同點(diǎn)？首先，它們都是先進(jìn)技術(shù)，正在迅速發(fā)展。其次，它們都依賴于類型。

名字前正好有個(gè)“Type”。

盡管JavaScript開發(fā)者很久以來(lái)一直在享受著不用理會(huì)編譯器對(duì)你的吼叫隨心所欲寫代碼的自由，但是這種自由是一把雙刃劍：這也意味著不那么可靠問題更多的開發(fā)者體驗(yàn)。

但到了2017年，情況終于開始改變。TypeScript獲得更廣泛的認(rèn)同并不僅僅是個(gè)巧合，開發(fā)者也開始朝著VSCode之類的IDE式文本編輯器遷移，從而更好地利用類型提供的額外功能。

洞察#10：百變JavaScript

再次地，這次的調(diào)查表明了JavaScript的生態(tài)體系已經(jīng)變得如何的豐富。

似乎經(jīng)過(guò)多年時(shí)而批斗時(shí)而無(wú)視JavaScript之后，開發(fā)者社區(qū)終于突然想到了第三個(gè)選項(xiàng)：改進(jìn)它。

這也許是為什么大多數(shù)開發(fā)者同意盡管有缺陷，但這門語(yǔ)言總體而言正在朝著正確的方向前進(jìn)的原因：

編譯組出品。編輯：郝鵬程。

在線咨詢

上一篇：Web布局和導(dǎo)航分析：如何創(chuàng)造卓越的HTMLLayo
下一篇：canvas 兩種拖尾效果實(shí)現(xiàn)煙花

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商