v-bind指令

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定

  • v-bind指令用法<a v-bind:href='url'>跳转</a>
  • 缩写形式<a :href='url'>跳转</a>

image-20200213203525707

GIF

v-bind 和 v-on的区别

  • v-bind 绑定属性

  • v-on 绑定事件

指令v-model底层原理分析

通过 v-on监听输入框的输入事件,将输入的值通过input事件处理函数存到data中给输入框,通过v-bind 绑定属性 value 把数据渲染到页面上

image-20200605151322265

GIF

还可以将其简写

image-20200605151627496

GIF1

样式绑定之class绑定

绑定对象

通过v-bind:class = {键:值}

键代表一个类名 如果这个值为true表示显示这个类名 如果这个值 为false 表示不显示这个类名

image-20200605152544297

image-20200605152701610

可以看见当为true的时候类名是加上的。为false则没有类名

GIF3

绑定数组

如何绑定一个数组

通过v-bind:class =[ 值1，值2 ] 值1、值2 对应 data 中的 数据

image-20200605210147631

类名绑定成功，当点击切换时数组中的数据变为空，类名绑定也为空，样式消失

GIF4

3个细节用法

对象绑定和数组绑定可以混用吗？

  • 数组中可以存储任何数据类型

  • 对象的值中也可以存储任何数据类型

绑定数组和绑定对象有什么区别？

  • 绑定对象的时候对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据

  • 绑定数组的时候数组里面存的值 是data 中的数据

默认的class如何处理？

  • 默认的class会保留

image-20200605211556589

image-20200605211631211

样式绑定之style绑定

v-bind:style = [值1， 值2 ] 数组中的值1和值2中存储的是一个对象 这个对象里面存储的css属性和属性值

v-bind:style = { 键： 值 } 对象中键代表 CSS的属性 ,中存贮的是 CSS 属性值

image-20200606091448607

GIF5

分支结构

v-if ⚫ v-else ⚫ v-else-if ⚫ v-show

v-if 使用场景

  • 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素

v-show 和 v-if 区别

  • v-if控制元素是否渲染到页面

  • v-show控制元素是否显示（已经渲染到页面）

  • v-show本质就是标签display设置为none，控制隐藏

  • v-if是动态的向DOM树内添加或者删除DOM元素

  • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

  • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

image-20200606092323098

image-20200606092551702

v-show效果测试

GIF6

当我们修改score的值的时候，v-if会将符合条件的进行动态添加到DOM中。

GIF7

循环结构

遍历数组

vue中循环是哪一个指令？

  • v-for=”item in 数组名”

  • v-for = “(item,index) in 数组名”

  • Item 代表数组中的每一项 index 代表索引

key的作用

  • key来给每个节点做一个唯一标识

  • key的作用主要是为了高效的更新虚拟DOM

image-20200606094011937

image-20200606094151263

遍历对象

怎么遍历对象？

  • v-for = “(item,key,index) in 对象名”

  • Item 代表对象中的每一项

  • Key 代表对应的键名

  • Index 代表对应的 索引

v-if 和 v-for 搭配使用

  • 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。不推荐使用

image-20200606095133770

image-20200606095157539