vue 属性绑定，样式绑定，事件修饰符 按键修饰符 自定义按键修饰符

1.事件绑定

v-on：后面加标准事件，也可以简写为@

事件后面可以跟修饰符，event代指本身

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

.left - (2.2.0) 只当点击鼠标左键时触发。

.right - (2.2.0) 只当点击鼠标右键时触发。

.middle - (2.2.0) 只当点击鼠标中键时触发。

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

2. 键盘修饰符

v-on:keyup.+按键名称

自定义按键

Vue.config.keyCodes.name=按键对应的代码

通过绑定事件函数event.keyCode来获取代码

3.属性绑定

v-bind：href=“url” 也可以直接简写为：

 百度

         百度2

         切换

         

{{msg}}

         

4.样式绑定

也是用过 v-bind来实现

通过控制class的显示来控制样式

v-bind：class="class名：isclass名（只有true和flase两个值来控制class显示与否）通过函数来修改值

v-bind：class=“【类名class，类名class】 添加类

var vm=new Vue({

        el:"#app",

        data:{

            类名class：“类名”

            类名class：“类名”

        },

实例：简单计算器

 

简单计算器

         

数值a:

         

数值b:

         计算

         

计算结果: