VUE入门2---vue指令

 一、el：挂载点

1.el的作用

用来设置Vue实例挂载（管理）的元素

2.几个问题

（1）Vue实例的作用范围是什么？

Vue会管理el选项命中的元素及其内部的后代元素

（2）是否可以使用其他的选择器？

可以，建议使用ID选择器

（3）是否可以设置其他的dom元素？

可以使用其他的双标签，不能使用HTML和BODY

二、VUE指令

1.内容绑定，事件绑定

（1）v-text

1. 作用：设置标签的内容
2. 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
3. 内部支持写表达式

（2）v-html

1. 作用：设置元素的innerHTML
2. 内容中有html结构会被解析为标签
3. v-text指令无论内容是什么，只会解析为文本

（3）v-on基础

1. 作用：为元素绑定事件
2. 事件名不需要写on
3. 指令可以简写为@
4. 绑定的方法定义在methods属性中
5. 方法内部通过this关键字可以访问定义在data中数据

2.显示切换，属性绑定

（1）v-show

1. 作用：根据表达式的真假，切换元素的显示和隐藏
2. 原理是修改元素的display，实现显示隐藏
3. 指令后面的内容，最终都会解析为布尔值

（2）v-if

1. 作用：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）
2. 本质是通过操纵dom元素来切换显示状态
3. 表达式的值为true，元素存在于dom树中，为false，从dom树中移除

 

（3）v-bind

1. 作用：设置元素的属性（比如：src、title、class）
2. 完整写法：v-bind:属性名=表达式
3. 简写：直接忽略v-bind，只保留:属性名
4. 需要动态的增删class建议使用对象的方式

举例：图片切换

1. 列表数据使用数组保存
2. v-bind指令可以设置元素属性，比如src
3. v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

3.列表循环，表单元素绑定

（1）v-for

1. 作用：根据数据生成列表结构
2. 数组经常和v-for结合使用
3. 语法是(item,index) in 数据
4. item和index可以结合其他指令一起使用
5. 数组长度的更新会同步到页面上，是响应式的

（2）v-on补充

1. 作用：传递自定义参数，事件修饰符
2. 事件绑定的方法写成函数调用的形式，可以传入自定义参数
3. 定义方法时需要定义形参来接收传入的实参
4. 事件的后面跟上.修饰符 可以对事件进行限制
5. .enter可以限制触发的按键为回车
6. 事件修饰符有多种

事件修饰符：

• .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

1. 作用：获取和设置表单元素的值（双向数据绑定）
2. 绑定的数据会和表单元素值相关联
3. 绑定的数据←→表单元素的值

参考文献：

【1】前端基础必会教程-4个小时带你快速入门vue