VUE简单入门基础教程（十）事件

-on是添加到DOM元素以侦听VueJS中事件的属性。

点击事件

例

<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有一个简写形式，这意味着我们也可以按以下方式调用该事件：

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

单击按钮后，它将调用方法“ displaynumbers”，该方法将接收事件，并且我们已经在浏览器中对控制台进行了操作，如上所示。

现在，我们将再检查一次事件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>

在上面的示例中，我们创建了一个宽度和高度为100px的div。它的背景色为红色。鼠标悬停时，我们将颜色更改为绿色，鼠标悬停时，我们将颜色更改为红色。

因此，在鼠标悬停期间，一种方法称为changebgcolor，一旦将鼠标移出div，则该方法称为originalcolor。

这样做如下-

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

如上所示，将两个事件-mouseover和mouseout-分配给div。我们创建了一个styleobj变量，并指定了要分配给div的所需样式。使用v-bind：style=“ styleobj”将相同的变量绑定到div

在changebgcolor中，我们使用以下代码将颜色更改为绿色。

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

使用stylobj变量，我们将颜色更改为绿色。

同样，以下代码用于将其更改回原始颜色。

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

这就是我们在浏览器中看到的。

当我们将鼠标悬停在上面时，颜色将变为绿色，如以下屏幕截图所示。

事件修饰符

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

。一旦

允许事件仅执行一次。

句法

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

如上面的语法所示，我们在调用修饰符时需要添加点运算符。让我们在示例中使用它，并了解一次修饰符的工作原理。

例

<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>

输出量

在上面的示例中，我们创建了两个对接。具有“单击一次”标签的按钮添加了一次修改器，另一个按钮没有任何修改器。这是定义按钮的方式。

<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>

第一个按钮将方法称为“ buttonclickedonce”，第二个按钮将方法称为“ buttonclicked”。

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

clicknum和clicknum1中定义了两个变量。单击按钮时，两者都会增加。两个变量都初始化为0，并且在上面的输出中可以看到显示。

在单击第一个按钮时，变量clicknum会增加1。在第二个单击时，数字不会增加，因为修饰符会阻止其执行或执行单击按钮时分配的任何操作项。

单击第二个按钮时，将执行相同的操作，即变量增加。每次单击时，该值都会增加并显示。

以下是我们在浏览器中获得的输出。

档对象模型（Document Object Model，DOM）是一种抽象化表示网页的方法，文档是以树形结构表示的。

Document节点分为父节点（parentNode）、子节点（childNode）、兄弟节点（siblingNode）等。

BOM（浏览器对象模型）因为没有一个标准来定义浏览器的功能，所以不同的浏览器有不同的属性和方法。DOM则不然，有专门定义HTML（或XML）页面中的对象应该如何表示的标准。开发人员可以使用DOM操作或查找网页中的某项内容，尤其是表单、图片、定位元素。

1 查询或访问的方法

当HTML文档加载完成后，浏览器将会将其表示成树形结构，页面上的所有元素都是对象树中的对象。如JS在处理表单时，会根据其在文档中出现的次序为所有表单创建一个数组。document.forms[0]用来表示第一个表单。同样，页面上所有的图片、链接和锚点都会以其名字存储在数组中，例如document.images、document.links、document.anchors[]等。

1.1 数组通过名字或索引

如文档中有一个表单，名字是form1，那么就可以通过它的名字来访问它，即document.forms["form1"]，也可以使用索引值来访问它，即document.forms[n].

1.2 通过document方法的name属性

document.getElementByTagName();

1.3 通过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节点的插入

document.body.insertbefore(newPara, firstPara);

5 为DOM节点创建属性

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

6 DOM的复制

newPara=oldPara.cloneNode(true);

7 DOM的删除

parentDiv1.removeChild(div2);

补充：
document.write()方法
可以写入全部的文档代码，包括HTML、CSS乃至JS。

－End－

者按：以前有个关于编程语言的段子是这么说的：写C的看不起写C++，写C++的看不写java的，写java的看不起写JS的，写JS看不起美工，周末大家都在加班，美工带着女朋友旅游去了。这么看来JavaScript已经落到编程语言鄙视链的最底端去了。但是这门长期位于十大编程语言行列的语言早已经发展到几乎无所不能的地步了，不信可以看看Rapha?l Benitte、Sacha Greif与Michael Rambeau所做的2017年JavaScript现状报告。

我最近公布了我们2017年版的JavaScript年度现状调查报告的结果，这是23000位开发者的共同反馈。

从流行趋势到工资明细，结果揭示了很多事情。如果你还没有这么做的话最好自己进来看看。但是在所有这些数据当中，有10件事情是最重要的。

即便你还没有看过这些结果，你可能也想看看我们刚刚增加的新的功能和观点部分。

洞察#1：React站稳脚跟

今年的版本确认了去年的趋势：React目前是占据主导地位的前端库。

React拥有目前为止最快乐的用户（深紫色条块）

对React的早期指责（通常集中在React混合HTML与JS的方式上）现在似乎已成遥远的记忆，Facebook还搁置了开发者今年最后一个主要的烦恼——取消了他们版权协议里面的专利条款。

随着使用数量和开发者满意度达到了有史以来的新高，完全可以说React已经站在了山顶上，至少目前是这样。

洞察#2：Angular正朝着新的角色转变

这并不意味着你就可以将Angular判负了。是，Angular的势头没有像React那么强劲，但是它还有一些非常强的因素支撑。

首先，Angular背后有Google力量的支持。不管你怎么说，那都是业界最好的工程师之一，他们正在投入全职的时间来改进这个框架。

需要指出的重要一点还包括Angular仍然拥有庞大的用户群。对于这股最新的热潮，银行、政府已经其他大型公司没法像你们这些普通的自由职业者接受得那么快，出于这个原因他们往往有庞大的遗留Angular代码库需要维护。

“新”Angular（2+）于“老”Angular（AngularJS）对比：接受度更低，但开发者满意度更高

不过最后一点也许是最关键的：Angular不再尝试跟React硬碰硬了，而是相反把自己的焦点转移到企业市场。只需要看看Angular对TypeScript的采用就知道了：尽管这也许会阻止了一些开发者，但这样决定也带来了企业应用所需的那种可靠性和安全性。

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

Vue去年好像突然之间就冒了出来，并且在非常短的时间内为自己赢得了React最大威胁者的称号。它也许没有Angular的用户规模或者Ember的长寿，但却有着足以击败这两个的东西：势头。

Vue & React：这两个拥有最高的开发者满意度（浅紫色 vs 深紫色）

尽管Vue击败React似乎仍然不大可能，但毋庸置疑的是，在提供全框架式体验方面，Vue的确拥有更好的故事，而这要得益于由同一支核心团队维护的官方路由和状态管理库。

洞察#4：了解一些库的知识会帮你赚更多（但是原因不像你想的那样）

通过收集和交叉引用工资数据，我们得以找出哪一项技术是最赚钱的。

不同的JavaScript技术，按照薪水从低（左）到高（右）排列

如结果表明那样，往往是像Polymer或者Reason这样的小众技术跟最高薪水相关。

JavaScript前端库，按照薪水从低（左）到高（右）排列

尽管Polymer获得的薪水更高是可能的，但更资深的开发者（这些人往往赚得更多）往往尝试更多不同的库也是有可能的，而经验不足的程序员更愿意把经理集中在一或两种主流技术。

因此按照这份排行榜去学东西可能（只是可能）并不是赚得更多的关键。

洞察#5：2018年将成为GraphQL之年

如果你跟绝大部分的调查受访者一样的话，你应该已经听说过GraphQL并且对它饶有兴趣了，但其实你还没有尝试过。

REST希望自己也有个这么酷的logo

如结果表明那样，这是一个非常常见的情况。在这次调查提到的所有技术里面，GraphQL是引起兴趣最大的一个——尽管目前它的用户数量还很少。

大大的黄色条代表的是14000位对GraphQL感到好奇的开发者

说到当前用户，值得指出的是透明总体上都对GraphQL感到高度满意。有了这里的高度兴趣和高度满意的结合，如果2018年成为GraphQL超越鸿沟进入成为主流技术之年的话不要感到吃惊。

洞察#6：JavaScript !=前端

我们知道JavaScript不仅仅能用在浏览器里面已经不是一天两天的事情了。毕竟，Node就是一种非常流行的后端选择，已经流行了好几年了。

但2017年JavaScript又开始了进一步的扩张：像AWS Lambda这样的平台让你可以在没有后端的情况下编写后端代码，而物联网设备的日益流行意味着不久之后，你的烤面包机也很有可能最终跑的是JavaScript。

这台烤面包机利用运行Slack的桌面应用产生的热量来烤面包

如果这听起来很荒谬，记住今年最热门的文本编辑器，VS Code本身就是用JavaScript编写并且作为Electron应用运行的。

JavaScript从作为展示横幅广告的工具发展成文本编辑器的编写工具，这一切都是在几年之内发生的的事。相信我，JavaScript烤面包机的出现也许比你想象的要早。

洞察#7：微软正在反击

说到VS Code，这绝对是今年的一大惊喜。在Sublime Text和Atom正在为文本编辑器的王座争得不可开交时，新进入者VS Code破窗而入，偷走了它们额午餐。

过去Sublime Text往往有速度上的优势，但却被不直观的UI抵消掉了，而Atom有着很好的UI但是往往给人很慢的感觉。

VS Code编辑器

结果表明VS Code也许已经找到了这两者的适当平衡。尽管还是在类似Atom这样的Electron基础上开发出来的，但微软的工程师在改进性能方面做了很好的工作。就像Sublime一样，它支持范围很广的各种插件和定制化，尽管一个更为用户友好的软件包“刚好能用”。

再加上TypeScript的崛起，看起来微软终于把自己玩的web工具凑到一起了，并且证明了自己可以做出开发者用的东西了，而且开发者用是因为自己想用而不仅仅是因为他们只能用这个。

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

当我们讨论JavaScript时，我们往往把它当作一个统一的生态体系来讨论。尽管重要趋势不同地区都是一致的，但有趣的是不同的国家往往会给JavaScript添加一些自己的定西进去。

比方说，你知道Vue在中国极其流行吗？这是说得过去的，因为Vue的开发者Evan You就讲中文，而且Vue已经为多家中国的主流技术公司如阿里和百度所采用。

印度另一方面似乎特别钟爱Angular。这也许至少部分是由于印度活跃的外包业所推动，而外包往往盯住那种Angular所应用的大型企业项目。

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

TypeScript、GraphQL、Elm、Reason，这些之间有何共同点？首先，它们都是先进技术，正在迅速发展。其次，它们都依赖于类型。

名字前正好有个“Type”。

尽管JavaScript开发者很久以来一直在享受着不用理会编译器对你的吼叫随心所欲写代码的自由，但是这种自由是一把双刃剑：这也意味着不那么可靠问题更多的开发者体验。

但到了2017年，情况终于开始改变。TypeScript获得更广泛的认同并不仅仅是个巧合，开发者也开始朝着VSCode之类的IDE式文本编辑器迁移，从而更好地利用类型提供的额外功能。

洞察#10：百变JavaScript

再次地，这次的调查表明了JavaScript的生态体系已经变得如何的丰富。

似乎经过多年时而批斗时而无视JavaScript之后，开发者社区终于突然想到了第三个选项：改进它。

这也许是为什么大多数开发者同意尽管有缺陷，但这门语言总体而言正在朝着正确的方向前进的原因：

编译组出品。编辑：郝鹏程。

在线咨询

上一篇：Web布局和导航分析：如何创造卓越的HTMLLayo
下一篇：canvas 两种拖尾效果实现烟花

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商