vue.js框架快速入门简明教程(四)（样式绑定和事件处理器）

一．Vue.js 样式绑定在vue.js模版语法中我们讨论过，vue.js用特殊指令v-bind将数据和HTML模版进行绑定。同样的class也是元素的属性，因此可以用v-bind来绑定样式类。
1、vue.js绑定class属性
绑定样式属性class有两种方式，对象语法绑定和属性绑定。
对象语法：
对象语法可以给 v-bind:class 设置一个对象，操作对象的从而动态的切换 class，对象的值将影响最终的class，vue.js称这种方式为对象语法；
例如：例子中classA是一个对象。

< div id="app"> < div class="class1" :class="classA">vue.js绑定class属性< /div> < /div>< script> new Vue({ el: '#app', data: { classA:'class2' } }) < /script>

如图：

文章图片
如果你也想根据条件切换列表中的 class ，可以用三元表达式：
例如：

< div class="class1" :class="classA ? classB : classC ">vue.js绑定class属性--三元表达式< /div>

文章图片
数组绑定
另外，如果有多个class需要绑定，除了可以设置对象之外，我们可以把一个数组传给 v-bind:class，vue.js称这种方式为数组绑定。
例如：

< div class="class1" :class="[classA,classB]">vue.js绑定class属性< /div> < script> new Vue({ el: '#app', data: { classA:'class2', classB:'class3' } }) < /script>

如图：

文章图片
2、Vue.js style(内联样式)
如果想直接在模版中设置样式，可以像HTML内联样式的方式那样设置，这样看起来十分直观。但其实内联样式中的每个属性值都是一个 JavaScript 对象。所以也存在上面两种方式。
对象语法

< div :style="{color:fontColor,fontSize:fontSize +'px'}">Vue.js style(内联样式)< /div> < script> new Vue({ el: '#app', data: { fontColor:"green", fontSize:20 } }) < /script>

数组绑定
同理，可以把对象换成一个数组：

< div :style="styleObject">Vue.js style(内联样式)< /div> < script> new Vue({ el: '#app', data: { styleObject:{ color: 'green', fontSize: '20px', } } }) < /script>

二．Vue.js 事件处理器什么是事件处理器？其实就是用来监听事件方法函数的属性，正如javascript的onclick属性。在vue.js中v-on指令监听DOM事件，触发一些javascript代码。
【vue.js框架快速入门简明教程(四)（样式绑定和事件处理器）】例如：

< button @click="con+=1">点击了{{con}}次< /button> < script> new Vue({ el: '#app', data: { con:0 } }) < /script>

在vue.js框架快速入门简明教程(四)：模版语法中我们提到v-on 缩写用@表示。
例图：

文章图片
但是在实际项目中，要处理的事件都是比较复杂的，如果还写在模版中，会显得很臃肿，程序很难维护，所以vue.js允许用v-on接收一个定义的方法来调用。
例如：

< button @click="myfun">点我有惊喜< /button> < script> new Vue({ el: '#app', data: { myfun:function () { alert("有什么惊喜你告诉我...") } } }) < /script>

文章图片
当然也函数也可以带参：

< button @click="myfun('有什么惊喜')">点我有惊喜< /button> < script> new Vue({ el: '#app', data: { myfun:function (message) { alert(message) } } }) < /script>

文章图片
1、事件修饰符
在vue.js中，methods只是处理数据逻辑的，而不是去处理DOM事件的细节，如果在事件处理中涉及到一些常用的DOM事件细节，比如 event.preventDefault（）方法阻止元素发生默认的行为和 event.stopPropagation() 方法阻止事件冒泡到父元素，这些涉及到元素处理的方法。因此强大灵活的Vue.js 为 v-on 提供了事件修饰符。
事件修饰符是通过由点(.)表示的指令后缀来调用修饰符。
常用的一些修饰符有：
?.stop
?.prevent
?.capture
?.self
?.once