vue中的for循环以及自定义指令解读

目录
  • vue for循环及自定义指令
    • v-for
    • 自定义指令
  • vue自定义指令动态参数
    • 通过自定义指令中的修饰符的key作为值,更改显示的颜色

vue for循环及自定义指令

v-for

1.v-for用来循环的数组怎么发生变化可以被vue检测到:

push、pop、shift、unshift、splice、sort、reverse等方法可以被检测到

vue对于这些方法的处理是重写了这些方法,并在最后会触发一次notify方法来通知这个array已经发生变化

vue还增加了两个方法来观测array的变化:

  • $set:如果直接设置array中的元素,不会触发视图的变化
this.selectArray[1] = 'newValue'  // 不会触发视图变化
this.selectArray.$set(1, 'newValue') // 会触发视图变化
  • $remove:是splice的语法糖,用来从目标元素中查找并且删除这个元素
let itemIndex = this.selectArray.indexOf(selectItem)
this.selectArray.splice(itemIndex,1) // 删除这个元素
this.selectArray.$remove(selectItem) // 同样效果,不用查找index

vue不能检测到下面数组的变化:

使用索引设置元素:

this.selectArray[1] = 'newValue'

解决办法:使用$set方法

修改数据的长度:

this.selectArray.length = 0

解决方法:使用空数组来替换:this.selectArray = []

2.使用v-for遍历对象

使用别名

<li v-for = "(key,value) in obj"> {{key}}-{{value}}</li>

不使用别名,使用$key

<li v-for = "value in obj"> {{$key}}-{{value}} </li>

注意:es5无法检测到对象增加新属性,所以vue提供了三个方法来监视对象属性:

  • $add(key,value)
  • $set(key,value)
  • $delete(key)

自定义指令

Vue.directive('directiveName',{
    // 这里就是指令对象的内部
    // 可以使用this来获取有用的参数
    bind: () => {
        //  准备工作:添加事件处理器等
        dom.addEventListener........
    },
    update: (oldVal,newVal) => {
        // 值更新的时候的工作
        //  初始化的时候也会被调用
    },
    unbind: () => {
        // 清理工作,比如接触bind添加的事件处理器
    }
})

Vue.directive('directiveName',(value) => {
    // 代替update函数
})
// 使用指令
<div directiveName="argumentValue"></div>

在指令对象中,可以只用this来获取一些有用的参数:

  • this.el: 指令绑定的元素
  • this.vm:指令的上下文viewModel
  • this.expression: 指令的表达式
  • this.arg:指令的参数
  • this.name: 指令的名字
  • this.modifiers:一个对象,指令的修饰符
  • this.descriptor: 一个对象,指令的解析结果

vue自定义指令动态参数

通过自定义指令中的修饰符的key作为值,更改显示的颜色

动态指令参数

当参数是动态的时候。

main.js

//当参数的值是动态的时候
Vue.directive('color2', {
  bind: function(el, binding) {
    el.style.color = binding.value;
  }
})
Vue.directive('color3', {
  bind: function(el, binding) {
    el.style.color = binding.arg;
  }
})

template.vue中

<template>
<div class="demo">
  <!-- value -->
  <p v-color2='purpleUser'><i class="el-icon-user-solid"></i></p>
  <p v-color2='redUser'><i class="el-icon-user-solid"></i></p>
  <p v-color2='greenUser'><i class="el-icon-user-solid"></i></p>
  <!-- arg -->
  <p v-color3:[purpleUser]><i class="el-icon-user-solid"></i></p>
  <p v-color3:[redUser]><i class="el-icon-user-solid"></i></p>
  <p v-color3:[greenUser]><i class="el-icon-user-solid"></i></p>
</div>
</template>
<script>
export default {
  data() {
    return {
      purpleUser: 'purple',
      redUser: 'red',
      greenUser: 'green'
    }
  },
  created() {},
  methods: {}
}
</script>
<style lange='scss' scoped>
p {
  display: inline-block;
  font-size: 40px;
}
</style>

参数是静态的,将key的值作为value,改变颜色

main.js

Vue.directive('color', {
  bind: function(el, binding) {
    const color = Object.keys(binding.modifiers)[0]; //将key的值作为value,改变颜色,Object.keys获取key的值;
    el.style.color = color;
  }
})

template.vue中

<template>
<div class="demo">
  <p v-color.purple><i class="el-icon-user-solid"></i></p>
  <p v-color.red><i class="el-icon-user-solid"></i></p>
  <p v-color.green><i class="el-icon-user-solid"></i></p>
</div>
</template>
<script>
export default {
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>
<style lange='scss' scoped>
p {
  display: inline-block;
  font-size: 40px;
}
</style>

以上的方法,最终实现效果是一样的。

好了,这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue中v-for指令完成列表渲染

    目录 1.列表遍历 2.Vue中key的作用 3.列表过滤 本文就Vue中列表渲染做个简单总结和使用演示: 列表渲染是用v-for指令根据绑定一组元素的选项来完成的,渲染格式可以自定义. 1.列表遍历 最基本的使用案例1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa

  • Vue.js中v-for指令的用法介绍

    一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&quo

  • Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结

    本文实例讲述了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式.分享给大家供大家参考,具体如下: 定义数据: <script> new Vue({ el:"#test", data:{ message:"infor", list:["a","b","c","d","e"], web:{ "百度":"

  • Vue指令之v-for的使用说明

    目录 Vue v-for的使用 1.迭代普通数组 2.迭代对象数组 3.迭代对象 4.迭代数字 v-for的最佳使用技巧 1.始终在v-for循环中使用key 2.不要在循环中使用v-if 3.使用计算属性或方法来处理数据后再做数据遍历 4.在一个范围内循环 5.在循环中访问项目的索引 6.遍历一个对象 Vue v-for的使用 1.迭代普通数组 在data中定义普通数组 data:{       list:[1,2,3,4,5,6] } 在html中使用 v-for 指令渲染 <p v-for

  • vue.js指令v-for使用以及下标索引的获取

    在 v-for 代码块中,我们可以完全地访问父级作用域下的属性. v-for 还支持可选的第二个参数,作为当前项的索引. 也可以使用 v-for 来遍历对象的属性. 还可以提供第二个参数,作为对象的键名(key): <body> <div id="box"> <ul> <li @click="onclick(index)" v-for="(item,index) in dataList">{{ite

  • vue中的for循环以及自定义指令解读

    目录 vue for循环及自定义指令 v-for 自定义指令 vue自定义指令动态参数 通过自定义指令中的修饰符的key作为值,更改显示的颜色 vue for循环及自定义指令 v-for 1.v-for用来循环的数组怎么发生变化可以被vue检测到: push.pop.shift.unshift.splice.sort.reverse等方法可以被检测到 vue对于这些方法的处理是重写了这些方法,并在最后会触发一次notify方法来通知这个array已经发生变化 vue还增加了两个方法来观测arra

  • 详解vue中v-bind:style效果的自定义指令

    自定义指令 1.什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令. 2.自定义指令的语法 全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时-- inserted: function (el) { // 聚焦元素 el.focus() } })

  • Vue.js源码分析之自定义指令详解

    前言 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染.插入到父节点.更新.解绑时可以执行一些特定的操作(钩子函数() 自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指

  • VUE中的无限循环代码解析

    代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • 解决vue中的无限循环问题

    项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制台的话运行是没问题的.但是控制台报了无限循环的错误. 下面是错误代码 html: js: 这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法更新数据.所以尽量不要直接在绑定的数据上使用方法来绑定.找到问题后下面就是解决办法. 因为选中商品后就要重新计算价格.所以我

  • 详解Vue中的基本语法和常用指令

    什么是vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex) Vue.js 是前端的**主流框架之一**,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,**只关注视图层**,它不仅易于上手,还便于与第三方库或既有项目整合.(Vue有配套的第三方类库,可以整合起来做大型项目的开发) Vue

  • vue中的el-tree @node-click传自定义参数

    目录 el-tree @node-click传自定义参数 给el-tree添加自定义图标 el-tree @node-click传自定义参数 <el-tree node-click="(data, node, item) => nodeClick(data, node, item, param)"></el-tree> nodeClick(data, node, item, param) {     console.log(data)   // data,

  • vue中的config目录下index.js解读

    目录 vue的config目录下index.js config中的 index.js配置项 总结 vue的config目录下index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. // 用于处理路径统一的问题 const path = require('path') module.exports = { // 开发环境的配

  • 如何在Vue3中实现自定义指令(超详细!)

    目录 前言 生命周期 钩子的参数 简化形式 对象字面量 在组件上使用指令 几个实用的自定义指令 自动聚焦v-focus 防抖v-debounce 节流v-throttle 弹窗隐藏v-hide 总结 在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model.v-if等,在使用的时候不知道有没有想过自己也来实现一个指令呢.本文就以Vue3项目为基础,从原理.方法到实际案例.注意事项,尽可能细致的讲解如何自定义指令. 前言 我们需要明白为什么需要自定义一个指令,其实就是想更加简

随机推荐