知识点

Vue 基础-指令(第二章)

1. 内置指令

1. 常用

  • v-bind : 单向绑定解析表达式，简写为 :xxx
  • v-model : 双向绑定
  • v-for : 遍历数组、对象、字符串
  • v-on : 绑定事件监听，简写为 @xxx
  • v-if,v-else : 条件渲染，控制节点是否存在
  • v-show : 条件渲染，控制节点是否显示

2. 其他

  • v-text : 向其所在标签插入文本，类似插值语法
  • v-html : 支持 html 标签解析，会将标签解析后展示
  • v-cloak : Vue 在创建完毕并接管容器后，会删掉 v-cloak 属性，主要用来解决网速慢时，直接展示未渲染的 DOM 结构
  • v-once : 在节点初次渲染后，就变为静态内容，来提高效率
  • v-pre : 跳过所在节点的编译过程，利用它可以跳过没有使用指令语法、插值语法的节点，加快编译

2. 自定义指令

利用 Vue 中的属性 directives{} 可以进行指令自定义，指令名为 v-xxx，有函数和对象2种方式

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
// 1.自定义指令，将字符串转为大写
<h2 v-upper="it"></h2>

new Vue({
    el: "#root"
    data:{
        it:"hello"
    },
    directives:{// 指令名取 v-xxx 后面部分即可
        // 使用函数方式，第一个参数是该 DOM 元素，第二个参数是该标签的绑定对象
        // 当指令初次绑定和指令所在模板被重新解析时，该函数都会被调用
        upper(element,binding) {
            element.innerText = binding.value.upper()
        }
    }
})

// 2.自定义指令，将字符串转为大写，并写入输入框，同时获取焦点
<input type="text" v-foc:value="it"></input>

new Vue({
    el: "#root"
    data:{
        it:"hello"
    },
    directives:{// 指令名取 v-xxx 后面部分即可
        // 使用对象方式，参数与函数方式一样
        foc: {
            // 指令初次绑定时调用
            bind(element,binding) {
                element.innerText = binding.value.upper()
            },
            // 指令所在元素被插入时调用
            inserted(element,binding) {
                element.focus()
            },
            // 指令所在模板被重新解析时调用
            update(element,binding) {
                element.innerText = binding.value.upper()
            }
        }
    }
})