一、el:挂载点
1.el的作用
用来设置Vue实例挂载(管理)的元素
2.几个问题
(1)Vue实例的作用范围是什么?
Vue会管理el选项命中的元素及其内部的后代元素
(2)是否可以使用其他的选择器?
可以,建议使用ID选择器
(3)是否可以设置其他的dom元素?
可以使用其他的双标签,不能使用HTML和BODY
二、VUE指令
1.内容绑定,事件绑定
(1)v-text
- 作用:设置标签的内容
- 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
- 内部支持写表达式
(2)v-html
- 作用:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
(3)v-on基础
- 作用:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
2.显示切换,属性绑定
(1)v-show
- 作用:根据表达式的真假,切换元素的显示和隐藏
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
(2)v-if
- 作用:根据表达式的真假,切换元素的显示和隐藏(操纵dom元素)
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
(3)v-bind
- 作用:设置元素的属性(比如:src、title、class)
- 完整写法:v-bind:属性名=表达式
- 简写:直接忽略v-bind,只保留:属性名
- 需要动态的增删class建议使用对象的方式
举例:图片切换
- 列表数据使用数组保存
- v-bind指令可以设置元素属性,比如src
- v-show和v-if都可以切换元素的显示状态,频繁切换用v-show
3.列表循环,表单元素绑定
(1)v-for
- 作用:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item,index) in 数据
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
(2)v-on补充
- 作用:传递自定义参数,事件修饰符
- 事件绑定的方法写成函数调用的形式,可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上.修饰符 可以对事件进行限制
- .enter可以限制触发的按键为回车
- 事件修饰符有多种
事件修饰符:
.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 }
模式添加侦听器
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) --> <button v-on:[event]="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) --> <button @[event]="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为,没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符,键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符,键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
(3)v-model
- 作用:获取和设置表单元素的值(双向数据绑定)
- 绑定的数据会和表单元素值相关联
- 绑定的数据←→表单元素的值
参考文献: