vue指令介绍及详解

1.什么是指令
在vue中提供了⼀些对于页面 + 数据的更为方便的输出, 这些操作就叫做指令, 以v-xxx表示
例:

在vue中 以v-xxx开头的就叫做指令
指令中封装了⼀些DOM⾏为, 结合属性作为⼀个暗号, 暗号有对应的值,根据不同的值，框架会进⾏相关DOM操作的绑定

vue中常⽤的v-指令演示
v-text:
v-html: 元素的innerHTML

v-if : 判断是否插⼊这个元素,相当于对元素的销毁和创建
v-else-if
v-else

v-show 隐藏元素
如果确定要隐藏, 会给元素的style加 上display:none。是基于css样式的切换

说明: v-if和v-show的区别?
v-if为DOM渲染属性, 通过添加删除DOM节点实现
v-show属于css渲染, 通过css的display:none实现

v-bind使⽤ 给元素的属性赋值
可以给已经存在的属性赋值
也可以给⾃定义属性赋值

语法:
在元素上 v-bind:属性名=“常量||变量名”

例:
v-bind:href = ‘res.url’ 可以简写为 :href = ‘res.url’

ps: 如果直接绑定属性值时,可以不用外部{ } , 如果设置属性与属性值时,要加入外部的{ }

:src=“变量” 绑定图片地址
:class = “{active:isActive}” 增加样式, active=’变量’

样式改变:
:style=’{color:isColor,fontSize:fontSize+“px”} 中间的变量可以直接被解析

功能类似于 jq中 attr为标签设置属性

简写形式 :属性名="变量名"v-on的