Vue——day10之指令

内置指令

v-text指令

v-html指令

v-cloak指令

v-once指令

v-pre指令

整体代码示例

自定义指令

整体代码演示

总结

内置指令

v-text指令

v-text指令是Vue.js中的一种指令，它用于将元素的textContent设置为指定的值。它的使用方式是在元素上添加v-text属性，并将其值设置为Vue实例中的一个变量或表达式。

例如，假设Vue实例有一个名为message的变量：

new Vue({
  data: {
    message: 'Hello world!'
  }
})

然后可以在HTML中使用v-text指令将message的值显示在元素中：

<div v-text="message"></div>

这样，当页面加载时，元素的textContent会被设置为'Hello world!'。如果message的值发生变化，元素的内容也会自动更新。相比起使用双花括号插值语法{{}}, v-text指令更适合用于在元素中显示简单的文本内容。

v-html指令

v-html指令是Vue.js中的一种指令，用于将元素的innerHTML设置为指定的HTML内容。它的使用方式与v-text指令类似，只需在元素上添加v-html属性，并将其值设置为Vue实例中的一个变量或表达式。

例如，假设Vue实例有一个名为htmlContent的变量：

new Vue({
  data: {
    htmlContent: '<span style="color:red;">Hello world!</span>'
  }
})

然后可以在HTML中使用v-html指令将htmlContent的值作为HTML内容显示在元素中：

<div v-html="htmlContent"></div>

当页面加载时，元素的innerHTML会被设置为'<span style="color:red;">Hello world!</span>'，从而正确渲染出红色的“Hello world!”文本。需要注意的是，使用v-html指令时要确保内容是可信的，以避免XSS攻击。只应该使用可信的HTML内容来渲染，而不是用户输入的内容。

v-cloak指令

v-cloak是Vue.js提供的一个指令，用于在Vue实例渲染完成之前隐藏绑定元素。在页面加载过程中，由于Vue实例需要进行渲染和解析，有时候会导致用户在浏览器中看到未渲染的Vue模板或表达式。v-cloak指令可以用来解决这个问题。

使用v-cloak指令的方法是在需要隐藏的元素上添加v-cloak属性，然后在CSS中定义v-cloak伪类选择器来控制元素的显示与隐藏。例如：

<style>
  [v-cloak] {
    display: none;
  }
</style>

<div v-cloak>
  <!-- Vue模板或表达式 -->
</div>

上面的代码中，[v-cloak]选择器会在Vue实例渲染完成之前将具有v-cloak属性的元素隐藏起来。渲染完成后，Vue会自动移除v-cloak属性，元素会恢复显示。

需要注意的是，v-cloak指令必须和CSS配合使用，才能隐藏元素。在没有定义v-cloak样式的情况下，即使添加了v-cloak属性，元素也不会被隐藏。

v-once指令

v-once指令是Vue.js中的一个指令，它用于标记元素或组件的一部分内容只需要渲染一次。一旦这部分内容被渲染，任何后续的数据变化将不会更新它。

使用v-once指令有两个主要的优点：

提高性能：当有一些静态的内容，不需要被重新渲染时，可以使用v-once指令，减少不必要的性能开销。
避免无限循环更新：有时候，在Vue.js的模板中可能会出现无限循环更新的问题。通过使用v-once指令，可以阻止这种无限循环更新的情况发生。

使用v-once指令很简单，只需要在需要渲染一次的元素或组件上添加v-once指令即可。例如：

<template>
  <div>
    <h1 v-once>{{ title }}</h1>
    <p>This content will not be updated</p>
  </div>
</template>

在上面的例子中,<h1>元素使用了v-once指令来标记，因此它只会渲染一次。即使title数据发生变化，<h1>元素的内容也不会被更新。而<p>元素没有使用v-once指令，因此它的内容会随着数据变化而更新。

v-pre指令

v-pre指令是Vue.js的一个指令，用于在模板中以原始的方式显示文本内容，而不将其解析为Vue的模板语法。v-pre指令可以用于提高性能，特别是在大型的、复杂的模板中，可以避免Vue对文本内容进行解析和编译过程。

使用v-pre指令的方式如下：

<template>
  <div v-pre>
    {{ message }}
  </div>
</template>

在上述例子中，div元素中的内容将以原始的方式显示，而不会进行Vue的模板解析。这对于一些静态的文本内容或者作为占位符的文本非常有用，可以提高渲染的速度。

需要注意的是，v-pre指令只会影响到当前元素及其子元素，不会影响其它元素。同时，v-pre指令也不能在自定义组件上使用。

整体代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>

    <script type="text/javascript" src="../js/vue.js"></script>

    <style>
        [v-cloak]{
            /* v-cloak:加了这个样式让带v-cloak的标签在vue被渲染之后就会显现
            防止网络问题导致未经解析的模版被现实 */
            display: none;
        }
    </style>
</head>
</head>
<body>


    <div id="root">
        <div>{{name}}</div>
        <div v-text="name">即将被替代</div>
        <div v-html="str">即将被替代</div>
        <!-- v-cloak:会在vue实例渲染的同时此标签会被去掉 -->
        <h2 v-cloak>{{name}}</h2>

        <h2 v-once>初始化的n值是：{{n}}</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n加一</button>

        <br>
        <hr>
        <br>


        <h2 v-pre>学习其实很简单</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n加一</button>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            name:'WJG',
            str:'<h3>我是一个h3标签</h3>',
            n:1
        }
    });
</script>
</html>

页面效果

自定义指令

在Vue.js中，可以使用自定义指令来扩展Vue的功能。自定义指令是一种特殊的Vue功能，允许我们直接与DOM元素进行交互。

下面是一个示例，展示了如何在Vue中创建一个自定义指令：

<template>
  <div>
    <input v-focus />
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 指令被插入到DOM元素时触发
        el.focus();
      }
    }
  }
}
</script>

上述代码中，我们通过directives属性定义了一个名为focus的自定义指令。在指令的定义中，我们可以使用一些生命周期钩子函数来处理指令的行为，如inserted函数。在我们的示例中，当指令被插入到DOM元素时，会触发inserted函数，并将DOM元素作为参数传递给函数。在inserted函数中，我们可以执行一些操作来实现具体的功能，比如在插入元素后自动聚焦到输入框。

然后，我们在模板中使用自定义指令v-focus来应用该指令。在上述示例中，我们将自定义指令应用于一个输入框元素，这样在页面加载后该输入框就会自动获取焦点。

除了inserted生命周期钩子函数，还有其他一些生命周期钩子函数可以在指令中使用，用于处理不同的操作，如bind、update等。

通过自定义指令，我们可以扩展Vue的功能，实现一些特定的交互效果或行为。

整体代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>


    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大十倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n加一</button>

        <hr>
        <input type="text" v-fbind:value="n">


    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            n:1
        },
        directives:{
            // 调用时机
            // 1.指令与元素成功绑定时
            // 2.指令所在的模版被重新解析时
            big(element,binding){
                element.innerText = binding.value*10
            },
            fbind:{
                // 指令与元素成功绑定时
                bind(element,binding){
                    element.value = binding.value
                },
                // 指令所在元素被插入页面时被调用
                inserted(element,binding){
                    element.focus()
                },
                // 指令所在模版被重新解释时调用
                update(element,binding){
                    element.focus()
                    element.value = binding.value
                }
            }
        }
    });
</script>
</html>

页面效果展示

总结

我们学过的指令：

v-bind：单向绑定解析表达式，可简写为 :XXX
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为 @
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-text 指令：
- 作用：向其所在的节点中渲染文本内容。
- 与插值语法的区别：v-text 会替换掉节点中的内容，{{xx}} 则不会。
v-cloak 指令（没有值）：
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除 v-cloak 属性。
- 使用CSS配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}} 的问题。
v-once 指令：
- 所在节点在初次动态渲染后就视为静态内容了。
- 以后数据的改变不会引起 v-once 所在结构的更新，可用于优化性能。
v-pre 指令：
- 跳过所在节点的编译过程。
- 可以利用它跳过没有使用指令语法、没有使用插值语法的节点，以加快编译速度。

自定义指令总结：

定义语法：
- 局部指令：在组件的 directives 选项中定义。
- 全局指令：使用 Vue.directive 方法全局注册。
配置对象中常用的3个回调：
- bind：指令与元素成功绑定时调用。
- inserted：指令所在元素被插入页面时调用。
- update：指令所在模板结构被重新解析时调用。
备注：
- 指令定义时不加 v-，但使用时要加 v-。
- 指令名如果是多个单词，要使用 kebab-case 命名方式，不要用 camelCase 命名。