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的使⽤
处理⾃定义原⽣事件的,给按钮添加click并让使⽤变量的

v-on: 绑定事件
事件名=“表达式||函数名”
简写方式: @事件名=“表达式”

1. 绑定监听:
   v-on:xxx=“fun”
   @xxx=“fun”
   @xxx=“fun(参数)”

   vue中的事件对象获取, 当方法中没有参数时, 在方法中的第一个参数就是事件对象
   当方法中有参数时,需要手动, 在调用事件时,加入$event,代表事件对象

默认事件形参: event
隐含属性对象: $event

2. 事件修饰符:
   .prevent : 阻止事件的默认行为 event.preventDefault()
   .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
   .keycode : 操作的是某个keycode值的健
   .enter : 操作的是enter键

v-model 双向的数据绑定(重点)
双向数据流（绑定） 页面改变影响内存(js) 内存(js)改变影响页面

使用v-model(双向数据绑定)自动收集数据
单向数据绑定 内存改变影响页面⾯改变

ps: v-bind 和 v-model 的区别?
v-model: 外部改变数据时,影响内部
v-bind: 外部改变数据时,不影响内部

v-for的使⽤
基本语法 v-for=“item in arr”
对象的操作 v-for=“item in obj”
如果是数组没有id
v-for="(item,index) in arr" :class=“index”