• Vue核心 内置指令 自定义指令

    内置指令

    常用指令：

    • v-bind 单向绑定解析表达式，可简写为:

    • v-model 双向数据绑定

    • v-for 遍历数组 / 对象 / 字符串

    • v-on 绑定事件监听，可简写为@

    • v-show 条件渲染 (动态控制节点是否展示)

    • v-if 条件渲染（动态控制节点是否存存在）

    • v-else-if 条件渲染（动态控制节点是否存存在）

    • v-else 条件渲染（动态控制节点是否存存在）

    其他指令

    v-text指令

    作用：向其所在的节点中渲染文本内容

    与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会，更灵活

    v-html指令

    作用：向指定节点中渲染包含html结构的内容
    与插值语法的区别：

    • v-html会替换掉节点中所有的内容，{{xxx}}则不会
    • v-html可以识别html结构
    • 严重注意v-html有安全性问题！！！
    • 在网站上动态渲染任意html是非常危险的，容易导致 XSS 攻击
    • 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！

    v-cloak 指令

    v-cloak指令（没有值）
    a本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
    b使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

    v-once 指令

    • v-once所在节点在初次动态渲染后，就视为静态内容了
    • 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
    <title>v-once指令</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h2 v-once>初始化的n值是: {{n}}</h2>
  <h2>当前的n值是: {{n}}</h2>
  <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  new Vue({ el: '#root', data: {n:1} })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    v-once 指令

    v-pre 指令

    1 跳过v-pre所在节点的编译过程
    2 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

    自定义指令

    directives

    定义语法

    1 局部指令

    new Vue({															
  directives:{ 
    指令名:配置对象 
  }   
})

new Vue({															
  directives:{ 
    指令名:回调函数 
  }   
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    2 全局指令

    Vue.directive(指令名, 配置对象)
或
Vue.directive(指令名, 回调函数)


Vue.directive('fbind', {
    // 指令与元素成功绑定时（一上来）
    bind(element, binding) {	// element就是DOM元素，binding就是要绑定的
      element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted(element, binding) {
      element.focus()
    },
    // 指令所在的模板被重新解析时
    update(element, binding) {
      element.value = binding.value
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    配置对象中常用的3个回调函数

    • bind(element, binding) 指令与元素成功绑定时调用

    • inserted(element, binding) 指令所在元素被插入页面时调用

    • update(element, binding) 指令所在模板结构被重新解析时调用
      element就是DOM元素，binding就是要绑定的对象，它包含以下属性：name value oldValue expression arg modifiers

      备注

      1. 指令定义时不加v-，但使用时要加v-
      2. 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
      new Vue({
	el: '#root',
	data: {
		n:1
	},
	directives: {
		'big-number'(element,binding) {
			element.innerText = binding.value * 10
		}
	}
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

      Demo

      <style>.demo{background-color: orange;}</style>

<body>
  <button id="btn">点我创建一个输入框</button>
</body>

<script type="text/javascript" >
  const btn = document.getElementById('btn')
  btn.onclick = ()=>{
    const input = document.createElement('input')

    input.className = 'demo'
    input.value = 99
    input.onclick = ()=>{alert(1)}

    document.body.appendChild(input)

    input.focus()
    input.parentElement.style.backgroundColor = 'skyblue'
  }
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21

      DEMO 2

      <title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h2>{{ name }}</h2>
  <h2>当前的n值是：<span v-text="n"></span> </h2>
  <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
  <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
  <button @click="n++">点我n+1</button>
  <hr />
  <input type="text" v-fbind:value="n">
</div>

<script type="text/javascript">
  Vue.config.productionTip = false

  // 定义全局指令
  /* Vue.directive('fbind',{
		// 指令与元素成功绑定时（一上来）
		bind(element,binding){
			element.value = binding.value
		},
		// 指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		// 指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	}) */

  new Vue({
    el: '#root',
    data: {
      name: 'YOUNG',
      n: 1
    },
    directives: {
      // big函数何时会被调用？
      // 1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时
      /* 'big-number'(element,binding){
				// console.log('big')
				element.innerText = binding.value * 10
			}, */
      big(element, binding) {
        console.log('big', this) // 🔴注意此处的 this 是 window
        // console.log('big')
        element.innerText = binding.value * 10
      },
      fbind: {
        // 指令与元素成功绑定时（一上来）
        bind(element, binding) {
          element.value = binding.value
        },
        // 指令所在元素被插入页面时
        inserted(element, binding) {
          element.focus()
        },
        // 指令所在的模板被重新解析时
        update(element, binding) {
          element.value = binding.value
        }
      }
    }
  })
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
  • 相关阅读:
    Python每日一练（牛客数据分析篇新题库）——第30天：逻辑运算
    数字角频率w、模拟角频率Ω
    display详解
    Dubins曲线学习笔记及相关思考
    详解欧拉计划第456题：包含原点的三角形II
    CodeToN cf #3 Div.1+2 (A-D)
    第四章 Web服务器(1)
    C现代方法（第12章）笔记——指针和数组
    实战PyQt5: 140-QChart图表之烛台图
    VR头显如何低延迟播放8K的RTSP|RTMP流
  • 原文地址：https://blog.csdn.net/agonie201218/article/details/125531958