vue入门：属性绑定与事件绑定

简介

vue中的html元素的属性和事件是支持经过变量方式动态修改，和原始js的dom操做有一些区别。这里总结一下vue的属性绑定与事件绑定的方法，以及与原生js的对比。

属性绑定

属性绑定指的是将html元素的一个属性值设置成变量。

原生的html中，好比<input type="text" />，这里的type的值就是text。

在vue中，咱们能够把text设置成一个变量:input_type。

能够写成<input :type="input_type" />，这里就实现了一个vue的属性绑定，type的值会随着input_type变化而变化。

属性绑定语法

属性绑定有两种写法

1. :attr="var"
2. v-bind:attr="var"

上面的例子里面写的是<input :type="input_type" />，对应了第一种写法；也能够写成<input v-bind:type="input_type" />。项目通常采用第一种缩写方式。

对比原生js

若是使用原生js去操做dom元素的属性的话，通常是先获取到input元素，而后经过js的属性设置方法去修改这个input元素。

事件绑定

和属性绑定相似，html元素中的事件也能够绑定到一个特定的变量，好比<button @click="changeType()"></button>。

这里click方法就绑定到了changeType函数，点击这个button，就会调用changeType函数。

事件绑定也有两种写法

1. @event="eventhandler(param..)"
2. v-on:event="eventhandler(param..)"

event表明某个事件，如click。eventhandler指的是处理函数，其中能够传入变量（一个或多个），记住属性绑定的函数里面必须有()，不能只是一个函数名。

<button id='testBtn' @click="changeType()"></button>对应的是第一种写法。

也能够写成<button  id='testBtn'  v-on:click="changeType()"></button>，通常采用第一种写法。

对比原生js

若是使用原生js去绑定事件的话，能够对元素设置事件监听和事件绑定。

#js事件绑定方式，只能给button绑定一个事件
document.getElementById("testBtn").onclick = changeType;

#js事件监听方式，能够给button绑定多个事件
document.getElementById("testBtn").addEventListener("click",changeType);

vue中的元素使用原生js事件监听，好比某个自定义的vue组件ms-nav，我要给这个组件绑定一个click事件，正常状况下是不生效的。

#这里应该加上.native注明监听的是原生js的事件
<ms-nav @click.native='handleJsClick'></ms-nav>

实际例子

vue属性绑定和事件绑定的代码片断

<input v-bind:type="input_type" />
<button @click="changeType()"></button>
export default {
    data() {
        return {
　　　　　　　　input_type : 'text'
　　　　　　 }
　　},methods:
　　{
　　　　changeType() {
　　　　　　this.input_type = "radio"
　　　　}
　　}
}

博主：测试生财

座右铭：专一测试与自动化，致力提升研发效能；经过测试精进完成原始积累，经过读书理财奔向财务自由。

csdn：https://blog.csdn.net/ccgshigao

博客园：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374