个性化阅读
专注于IT技术分析

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>

如图:

vue绑定class属性-01

如果你也想根据条件切换列表中的 class ,可以用三元表达式:

例如:

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

数组绑定

另外,如果有多个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>

如图:

vue绑定class属性-03

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代码。

例如:

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

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

例图:

Vue事件处理器-04

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

例如:

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

当然也函数也可以带参:

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

1、事件修饰符

在vue.js中,methods只是处理数据逻辑的,而不是去处理DOM事件的细节,如果在事件处理中涉及到一些常用的DOM事件细节,比如 event.preventDefault()方法阻止元素发生默认的行为 和 event.stopPropagation() 方法阻止事件冒泡到父元素,这些涉及到元素处理的方法。因此强大灵活的Vue.js 为 v-on 提供了事件修饰符

事件修饰符是通过由点(.)表示的指令后缀来调用修饰符。

常用的一些修饰符有:

.stop

.prevent

.capture

.self

.once

用法:
<button @click.once="myfun('有什么惊喜')">只能点击一次</button>

2、按键修饰符

很多时候我们都是通过键盘操作事件,比如按下ENTER按键执行提交事件,除此之外还有ctrl,tab,delete,esc,left,right等,vue.js允许v-on 在监听键盘事件时添加按键修饰符

例如:

<button @click.ctrl="myfun">click+ctrl 同时点我有惊喜</button>

以上是vue.js中样式绑定和事件处理器的详细解析,结合文章中的例子带你更加深入学习和理解vue.js中样式绑定和事件处理器的原理。跟着教程边学边动手,会有不一样的收获哦。

赞(0) 打赏
未经允许不得转载:srcmini » vue.js框架快速入门简明教程(四):样式绑定和事件处理器
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏