# vue 的事件指令
作用：给标签绑定事件
1 | <div v-on:事件类型="表达式"></div> |
# v-model 双向数据绑定的指令
作用：实现数据与 DOM 结构的双向绑定，彼此之间互相影响。
数据的改变会引起 DOM 的改变；
DOM 的改变也会引起数据的改变。（获取用户的值）
写在何处：表单控件 input、select、textarea、组件
语法：
在 HTML 属性上使用
v-model=“数据属性名”
特点：
1、在表单元素上创建双向数据绑定
2、会根据控件类型自动选取正确的方法来更新元素交互的值。即不同的 type 数据交互的方式也不同，比如单行文本框与 value 属性交互，单选复选框 checkbox 与 checked 属性交互
3、负责监听用户的输入事件以更新数据
注意：
1、会忽略所有表单元素的 value、checked、selected 等属性的初始值。也就是在标签上再写 value 属性等是无效的了。
1 | <input value="默认值" v-model="ipt"> |
2、将 vue 实例的数据作为数据来源
1 | <input v-model="ipt"> |
3、需要在数据对象中声明初始值
1 | <input v-model="ipt"> |
# v-for 指令 - 实现列表的循环
作用：遍历数组或对象，并渲染成 DOM 结构。
用于：标签中，要循环生成谁，就加在谁身上
1 | //item每一项元素，index索引 |
# 对象的响应式变化
数据都是计划好了的，使用插值运算符才不会报错。如果试图显示一个尚不存在的 data 属性值，那么很可能会报错。也就是只有计划好的数据或计划好的数据进行了改变才会做响应式的更新（动态更新 HTML 上的数据）
目的：操作一个未来的数据时，让视图也能响应式的变化。
以下几种方式虽然可以给对象添加数据，但是不会引起视图的更新：
1 | JS: |
以下几种方式可以给对象添加数据，也可以引起视图的更新：
1 | 1、Vue.set(target,key,value); |
# 数组的响应式变化
1、避免以下几种添加方式就可以让数据响应式：
1 | 1. 直接通过数组下标添加，比如 |
2、可以让按数据响应式的方法：
1 | 一、该方法都可以改变原数组，所以能做到响应式。 |
# v-if,v-show，v-else
-
v-if
作用：用来新增或删除一个元素用于不需要频繁切换它的可见性那种场景，比如广告只需要打开显示一次那种。
用法：
1
2
3<div v-if="表达式">看看我是否被显示</div>
//工作原理
如果表达式成立，则显示该标签，否则删除，会自动将表达式转为一个布尔值 -
v-show
v-show 与 v-if 相比，v-show 性能更优，适用于平常显示和隐藏场景
作用：用来显示或隐藏一个元素。相当于是操作了 display 值。
1
2
3<div v-show="表达式">看看我是否被显示</div>
//工作原理
如果表达式成立，则显示该标签，否则隐藏（结构还在），会自动将表达式转为一个布尔值 -
v-else
1
2跟v-if配套使用
如果v-if显示了A元素，那么else代表的B元素就会隐藏，否则也成立
# 动态操作 class 和样式
用的还是 v-bind 指令
1 | <div :class='box' :style="{color:red} "></div> |
-
:class
1
2
3
4
5
6
7
8
9
10
11给标签动态添加class的3种方式：
1. 添加一个
<div :class="box"></div>
2. 添加多个：
<div :class="[box1,box2,box3]"></div>
3. 按需添加（重点，按需添加，满足条件再添加）
里面写对象的形式，属性名指的是要添加的class,属性值指的是是否添加的条件
<div :class="{要添加的class:条件表达式}"></div>
比如，业绩达到>=10万，文字标红，业绩小于10w，则绿色，业绩达到<=1w，则灰色
<div :class="{red:money>=10,green:money<10,gray:money<=1}">要着色的文字</div> -
:style
作用：按需添加行内样式
添加 {} 是因为样式也是这么写的，同时也是对象1
2
3<div :style="{样式1:值1}">样式文字</div>
<div :style="{样式1:值1,样式2:值2}">样式文字</div>
<div :style="{样式1:表达式}">样式文字</div>
# vue 实例
# tab 页
1 |
|
# 选择品牌
1 |
|
# 轮播图
1 |
|
# 其他指令
-
v-text
1
2
3
4
5
6
7
8
9
10
11<div>
{{msg}}
</div>
//可以使用v-text来代替
<div v-text="msg">
</div>
// 更新元素的textContent(文本内容)，可替代{{}}
// 为什么要使用？
// 如果网速比较慢时还没等到vue解析{{}}，这时网页会出现源代码，但使用v-text 是写在标签内的，就不会有该问题。
// 总结：使用频率不高 -
v-html
1
2
3
4
5
6
7
8
9
10
11//v-html会渲染写在数据中的标签内容
<div v-html="msg">
</div>
<script>
new Vue({
data:{
}
});
</script>更新元素的 innerHTML
如果不使用该指令，插入的 HTML 结构会变成文本显示
注意：不要插入不安全的 HTML 结构，比如允许用户输入 HTML 并解析
我们之前的属性放的值都是一些简单的文本，现在也可以放一些 HTML 标签和内容，然后使用该指令解析 -
v-once
1
2
3
4<div v-once>
{{msg}}
</div>
//msg的值只会在第一次时渲染，后续即使数据更新了也不会被改变。类似于一次性事件不需要赋值，只需要写指令
只渲染一次，随后数据改变将不再渲染，视为静态内容
也就是只会使用最开始给标签的值，以后尽管数据更新了，但该处的数据依然保持不变。
用于优化更新性能
使用场景：比如一些 tab 标题等不需要更改的地方 -
v-cloak
1
2
3
4
5
6
7
8
9
10
11//批量替换v-text的，让所有的小胡子语法在数据准备好了再渲染
<style>
[v-cloak]{
display:none;
}
</style>
<div id="app" v-cloak>
{{msg}}
</div>
// 隐藏未编译的Mustache标签({{}})直到实例准备完毕
// 该指令其实就是用来替代v-text的，这个直接放到vue托管的最开始标签处，然后在样式中写 [v-cloak]{ display:none} 即可将vue托管的HTML标签中的所有{{}}都先隐藏，直到解析完毕。这样就避免了有时候在手机端先显示{{}}的尴尬。
# 事件修饰符
event 对象、阻止冒泡、默认事件等
1 | //.enter就是事件修饰符，指的是按了回车键再执行事件 |
-
事件修饰符
1
2
3
4
5.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发。（只能够在事件源上触发）
.once - 只触发一次回调。 -
按键修饰符：(一般用于键盘、鼠标事件中)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18.enter 键盘代码 也可写成 .13 - 按回车键时触发
.tab - 按tab键时触发
.delete - 按delete键或backspace退格键时触发
.esc - 按Esc退出键时触发
.space - 按空格键时触发
.ctrl - Ctrl键
.alt -alt键
.shift -shift键
.up - 按键盘上
.down -键盘下
.left - (2.2.0) 键盘左箭头(键盘事件)、只当点击鼠标左键时触发（点击事件）。
.right (2.2.0) 键盘右箭头(键盘事件)、只当点击鼠标右键时触发（点击事件）。
.middle - (2.2.0) 只当点击鼠标中键时触发（点击事件）。
如果还想要其他键名怎么办？可以直接写键值，比如enter的键值为13
如果要组合按键触发，可以写两个键值，比如Ctrl+enter键一起按下去才触发可以这样写：
@keyup.ctrl.enter="事件名"
用法总结：
1. v-on:事件名.修饰符="事件处理函数"
2. v-on:事件名.修饰符
不需要添加事件处理函数，起到的就是与修饰符有关的操作
3. v-on:事件名.修饰符1.修饰符2="事件处理函数"