本文标识 : V00003
本文编辑 : Jack 风
编程工具 : Vscode
阅读时长 : 4分钟
话不多说,直入主题。 先来看一下,看完这篇文章,你可以了解学到什么?
本章知识点
事件修饰符
V-Bind
V-model
vue-样式
class-样式
style样式
制作简易计算器
1、事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事业
.capture 添加事件倾听器时使用事件捕获模式
.self 只当事件在该元素本身
.once 事件只触发一次
2、V-Bind
V-bind 只能实现数据单向绑定,从 M 自动绑定到 V ,无法实现数据双向的绑定。
3、V-model
V-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定。
注意:使用 V-model 只能运用在表单元素中。
4、Vue样式
使用class样式
(1)数组
<h1 :class="['red', 'thin']">欢迎H1</h1>
(2)数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">关注H1</h1>
(3)数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">公号的H1</h1>
(4)直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">A2Data H1</h1>
style样式使用(head中)
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: initial;
}
.active{
letter-spacing: 0.5em;
}
</style>
效果如下
<h1> 这是一个H1,是不是很大啊 </h1>
<h1 class="red thin"> 这里配备了 class</h1>
<!-- 第一种使用方式,直接传递一个数组,注意,这里的class 需要使用 v-bind做数据绑定 -->
<H1 class="['thin','italic']"> 这里传递个数组吧 </H1>
<!-- 在数组中使用三元表达式 -->
<h1 class="['thin','italic',flag?'active':'']" > 这里是三元表达式</h1>
<!-- 在数组中使用 对象来代替三元表达式,提高代码的可读性 -->
<h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1,大到你无法想象!!!</h1>
<!-- 在为 class 使用 v-bind 绑定 对象的时候,对象的属性是类名,由于 对象的属性可带引号,也可不带引号,所以 这里我没写引号; 属性的值 是一个标识符 -->
<h1 :class="classObj">这是一个很大很大的H1,大到你无法想象!!!</h1>
具体案例请见次条哦!