vue2学习----vue指令

vue----内置指令

1.v-on的作用：注册事件=添加监听+提供处理逻辑

①v-on：事件名=“内联语句”

②v-on：事件名=“methods中的函数名”

v-on：click="count++"  等价于@click="count++" 

v-on：click="fn()"  等价于@click="fn()" 

2.v-bind的作用：动态的设置html的标签属性 -> src  url  title

v-bind:src="imgUrl" 等价于 :src="imgUrl"

3.v-for的作用：基于数据循环，多次渲染整个元素 -> 数组、对象、数字...

①v-for=“（item，index）in 数组”  其中item表示每一项，index表示下标

操作：通过id删除数组中的对应项，可以用filter

filter：根据条件，保留满足条件的对应项，得到一个新数组，他不会改变原数组

booklist.filter(item=> item.id!==id)

②v-for中的key（切记使用v-for需要把key加上）

key属性=“唯一标识”   作用：给列表项添加唯一标识，便于vue进行列表项的正确排序复用

4.v-model的作用：给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容

多行代码一起写：alt+鼠标左键 可以实现多光标

.sync修饰符，props不为value的时候

5.指令修饰符

①@keyup.enter="add" 键盘回车时触发add事件

②v-model.trim 去掉首尾空格、v-model.number 转数字

③事件名.stop 阻止冒泡   事件名.prevent 阻止默认行为

6.v-bind对于样式控制的增强，操作class

语法： ：class=“对象/数组”

例如 ：class=“{类名1：布尔值，类名2：布尔值}”  适用场景：一个类名，来回切换

：class=“[类名1，类名2]”  适用场景：批量添加或删除类

7.v-bind对于样式控制的增强，操作style

语法：  :style="样式对象"

例如  ：style=“{css属性名1：css属性值，css属性名2：css属性值}”

vue----自定义指令

自定义指令：自己定义的指令，可以封装一些dom操作，扩展额外功能

1.全局注册语法

Vue.directive('指令名',{
    inserted (el){ //el就是指令所绑定的元素
     // inserted表示在元素插入页面是调用这个方法
        // 可以对el标签扩展额外功能
        el.focus()
    }
})

2.局部注册语法

directives:{
    "指令名":{
        inserted(){
            // 可以对el标签扩展额外功能
            el.focus()
        }
    }
}

在标签处写v-指令名 去使用

3.指令的值

语法：在绑定指令时，可以通过"等号"的形式为指令绑定具体的参数值

<div v-color="color">我是内容</div>

通过binding.value可以拿到指令值，只控制修改会触发update函数

  directives: {
    color: {
//元素被添加到页面中时
      inserted(el, binding) {
        el.style.color = binding.value;
      },
// 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
  },

4.v-loading指令封装

分析：①本质loading效果就是一个蒙层，盖在了盒子上

②数据请求中，开启loading状态，添加蒙层

③数据请求完毕，关闭loading状态，移除蒙层

实现：①准备一个loading类，通过伪元素定位，设置宽高，实现蒙层

②开启关闭loading状态（添加移除蒙层），本质只需要添加移除类即可

③结合自定义指令的语法进行封装复用