2.Vue指令学习。实现员工表格中添加、删除和搜索功能_vue实现对员工表的编辑操作-CSDN博客

本文链接：https://blog.csdn.net/gin_xin/article/details/126204002

Vue指令:

指令 (Directives) 是带有 v- 前缀的特殊 attribute。v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1.v-text和v-html指令

作用：和插值表达式一样，都是用来在页面上显示 data属性中的数据。没有闪烁问题。

区别： v-text:只能显示纯文本。

v-html：显示的文本中可以带有html标记。

<body>
    <div id="app">
        <!-- v-text和v-html -->
        <h1>{
  {name}}</h1>
        <h1 v-text="name"></h1>
        <div v-html="link"></div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: '遇星星',
                link: '<a href="#">超链接</a>', //link属性的值，是包含超链接标价的文本内容  #代表链接的当前页面
            },
        })
    </script>
</body>

2.v-bind指令

作用：将data中的数据绑定到标记的属性中。

v-bind在项目中使用频率非常高，对于一些频繁用到的指令来说，就会感到使用繁琐。因此，Vue 为 v-bind 和 v-on （后续再说）这两个最常用的指令，提供了特定简写：v-vind:可以简写成：如v-bind:src=“” 简写成 :src=""

练习：在Vue中data中定义一个变量link，存储百度的网址，再定义一个变量 imgs，存储百度的图标。在页面显示图标，并且点击图标跳转至百度的首页。使用v-bind实现。

 <div id="app">
        <!-- v-bind:src可以简写成:src 只针对与v-bind这个指令-->
        <a :href="link">
            <img :src="imgs" v-bind:alt="info">
        </a>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                imgs: 'imgs/baidu.jpg',
                info: '百度图标',
                link: 'http://www.baidu.com',
            },
        })
    </script>

3.v-on指令及其修饰符

Vue使用事件，通过v-on指令实现。

作用：绑定事件

语法：v-on:事件名 = " 事件方法 "

缩写：

<button v-on:click="index">...</button>
<!-- 缩写 -->
<button @click="index">...</button>

v-on修饰符：

语法：修饰符加在 vue绑定事件的后面，使用.修饰符方式 .函数必须写在methods里面.

-事件冒泡概念：触发内层元素同时，也随之触发外层元素。

- .stop:阻止事件冒泡机制。

- .prevent: 阻断超链接行为。

- .captrue:实施捕获触发事件的机制（改变事件的优先级）

- .self:也是阻止当前修饰符的事件冒泡，但是和.stop有区别，只阻断当前的事件。不影响后续冒泡行为扩散。

- .once:只触发一次事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <div style="width: 200px;height:200px;background-color:#b20000" @click="test1">
            <div style="width: 100px;height:100px;background-color:#000000" @click.stop="test2">

            </div>

        </div>
        <!-- 阻断链接行为 -->
        <a href="https://www.baidu.com" @click.prevent="linkClick">去百度</a>
        <!-- .once 只触发一次事件 -->
        <a href="https://www.baidu.com" @click.prevent.once="linkClick">再去百度</a>

        <!-- .capture改变事件优先级 -->
        <div style="width: 200px;height:200px;background-color:#b20000" @click.capture="test1">
            <div style="width: 100px;height:100px;background-color:#000000" @click="test2">

            </div>

        </div>
        <!-- .self