Vue的单文件
- 一个vue文件就是一个组件
- 组成
- template标签=>只有一个跟标签div,用来存放HTML代码
- script标签=>用来存放JavaScript代码
- style标签=>用来存放样式代码,可以接受css,less,sass,除了css以外的代码都需要做配置才能正常使用
插值表达式
-
语法:
{{表达式}}
表达式包括:
- 变量-数据声明在data函数的返回对象里
- 对象.属性
- 三元表达式
- 字符串、数字、布尔值
- 函数调用-函数需要声明在methods对象里
- 变量的加减乘除
-
作用
-
把表达式的结果插入到指定的标签位置
-
eg:
<div>秒杀价:{{ price }}</div>
-
vue的指令
-
概念:指令是标签的属性
- vue的指令都以v-开头
- 属性名=“属性值”
-
v-bind
- 简写语法::属性名=“表达式”
- 作用:绑定标签属性
-
v-on
-
简写语法:
-
@事件名=“少量代码”=>@click = “count++”
-
@事件名=“函数名”(如果函数没写括号的情况下,第一个参数就是event事件对象)
-
@事件名=“函数名(参数)”(函数写括号,使用$event获取事件对象)
@click = "fn(100,$event)"
-
-
作用:给标签绑定事件
-
修饰符:
- 写法:@事件名.修饰符=“…”
- .prevent - 阻止默认行为
- .stop - 阻止事件冒泡
- 常用按键修饰符:
- .enter - 回车事件触发
- .esc - esc事件触发
-
-
条件显示属性
-
v-show - 通过控制样式display来显示和隐藏
-
v-if - 通过创建和删除标签来显示和隐藏
-
可以多个条件控制
v-if v-else-if v-else
-
多个条件之间,不能插入别的标签
-
-
当要控制的元素比较多时
- 需要频繁切换 - 使用v-show
- 不需要频繁切换 - 使用v-if
-