vue指令

最新推荐文章于 2023-04-13 23:14:01 发布
最新推荐文章于 2023-04-13 23:14:01 发布
阅读量622 收藏
点赞数
分类专栏： vue 文章标签： vue指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44390722/article/details/90374125
版权

vscode快捷键打开终端==>ctrl + shift + y
使用我的代码的时候，要下载一个vue文件，还有就是要注意文件所放的路径要写对。或者你可以使用在线版本： ，把这段代码复制，然后在相应的地方替换。

所有的指令都是属性，所以写的地方应该在标签里面。插值表达式只能写在双标签之间。

例如:   <div v-text="msg"></div>    这个是指令书写的地方例如：   
        <div>{{msg}}</div>          这个是插值表达式书写的地方

v-text 作用：输出一段文本

v-html 作用：输出一段文本，但是如果里面有html结构，会解析出来，如果里面写了js，是解析不出来的，只能解析html

v-bind 作用：动态绑定数据。让冒号后面的属性值进行动态的绑定，动态绑定就是绑定data里面的数据。可以动态绑定图片；可以动态绑定id号，用来删除这个id号的内容；可以动态绑定class样式，然后判断在什么条件下加这个样式，什么时候不加；可以动态绑定多个样式；可以动态设置字体大小。只要这个属性的值是动态变化的，就可以把这个属性设置为动态属性，不管是style，class，href都可以用。v-bind是一个单向绑定，意味着如果model中的数据变化，view中的显示结果也会变化，但是反过来就不行了，v-model就可以双向数据绑定

(重点)v-for 作用：循环遍历。可以遍历数组或者对象，数组中没有键(key)，但是对象中有索引(index)，

(重点)v-model 作用：双向绑定。如果是通过索引的方式修改数组中的数据，那么页面并不会自动的更新数据；同时如果通过length属性修改数组的长度，页面中的数据也不会有动态的更改。

v-show 作用：显示隐藏元素。添加一个disabled:none的样式来进行隐藏元素。只是隐藏，但是页面上还是会生成结构。控制显示隐藏结构。如果是操作大量的dom元素，可以使用v-show，这样避免频繁的创建和销毁dom。例如我有很多的值，我需要频繁的显示和隐藏，而不需要反复创建dom结构，就可以使用v-show来做。

v-if 作用：也是显示隐藏元素，还有一个作用是用来判断。通过动态绑定的值来确定是否生成结构，如果是false，页面上将不会生成html结构。控制结构的销毁和生成。异步请求的时候，使用v-if，或者涉及到生成新的dom结构就使用v-if，就是抛弃以前的结构，需要产生新的结构。

v-if 和 v-else 和v-else-if 作用：用来判断，满足哪个条件就执行哪个条件的内容

(重点)v-on 作用：写自定义函数，动态绑定一个事件或多个事件。事件可以传参数，事件可以搭配修饰符使用，修饰符有.stop，.prevent等等；用.stop可以阻止冒泡；用.prevent可以阻止标签的默认行为，例如阻止跳转，一般给a标签使用；可以使用多个修饰符同时使用。事件还可以搭配键盘的键值使用，键值就是键盘上每一个按键所对应的数字或者英文。键码表地址 https://www.cnblogs.com/yiven/p/7118056.html 。enter回车键的键码是13。还可以使用对象语法，就是使用多个事件，但是这种语法不支持修饰符。

v-cloak 作用：可以在结构没加载出来的时候先隐藏未编译的内容，等待结构生成或者js加载完成后再显示编译的内容。

例子：插值表达式 v-text v-html 的演示

在html标签内插入一段文字*****

template里面的结构

<template>
    <div>
    <div>{{msg}}</div> <!-- 插值表达式 -->
    <div v-text="msg"></div> <!-- v-text -->
    <div v-html="msg"></div> <!-- v-html -->
    </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      msg: "<button>文字</button>" //上面获取这里的数据
    };
  }
};
</script>
在html标签内插入一段文字效果图

在这里插入图片描述

例子：v-bind 的演示

动态添加图片*****(常用)

template里面的结构

<template>
    <div>
    <img :src="src" alt="">      <!-- 动态添加图片 -->
    </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      src: "@/assets/img/login/wechat.png", //这里写你的图片路径
    };
  }
};
</script>
动态添加图片效果图

在这里插入图片描述

动态删除ID号*****(常用)

template里面的结构

<template>
    <div>
    <a :href="'./del?id='+id">删除ID号{{id}}的成员</a> <!-- 删除这个ID号的成员 -->
    </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      id: 5 //现在的ID号为5
    };
  }
};
</script>
删除ID号效果图

在这里插入图片描述
在这里插入图片描述

动态添加样式*****(常用)

template里面的结构

<template>
  <div class="shiyan">
    <div class="shiyan1">
        <span :class="{pinkFont:hanPink}">我是粉红色字</span>     <!-- 第一种写法 -->
        <span :class="{pinkFont:hanPink==3}">我是粉红色字</span>   <!-- 第二种写法 -->
    </div>
  </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      hanPink: true,//第一种写法
      hanPink: 3,//第二种写法
    };
  }
};
</script>

css里面的结构

<style lang="scss">
@import "../index.scss";
.myneeds {
}
.shiyan {
  width: 100%;
  height: 100%;
  .shiyan1 {
    width: 500px;
    height: 500px;
    margin: 35px auto;
    background-color: #eae8e8;
  }
  .pinkFont {
    color: hotpink;
  }
}
</style>
第一种写法动态添加样式效果图

在这里插入图片描述

第二种写法动态添加样式效果图

在这里插入图片描述

动态添加两个样式*****(常用)

动态添加的时候，记得先在data数据里面绑定样式，这样才能使用

template里面的结构

<template>
  <div class="shiyan">
    <div class="shiyan1">
        <span :class="[pinkFont,underline]">动态绑定两个样式</span>
    </div>
  </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      pinkFont: 'pinkFont', //动态绑定样式
      underline: 'underline', //动态绑定样式
    };
  }
};
</script>

css里面的结构

<style lang="scss">
@import "../index.scss";
.myneeds {
}
.shiyan {
  width: 100%;
  height: 100%;
  .shiyan1 {
    width: 500px;
    height: 500px;
    margin: 35px auto;
    background-color: #eae8e8;
  }
  .pinkFont {
    color: hotpink;
  }
  .underline {
    text-decoration: underline;
  }
}
</style>
动态添加两个样式效果图

在这里插入图片描述

动态设置字体大小*****(常用)

动态添加的时候，记得先在data数据里面绑定样式，这样才能使用

template里面的结构

<template>
  <div class="shiyan">
    <div class="shiyan1">
        <span :style="'font-size:'+fs+'px'">动态设置字体大小</span>       <!--第一种写法-->
        <span :style="{fontSize:fs+'px'}">动态设置字体大小</span>        <!--第二种写法-->
    </div>
  </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      fs:50,  //动态设置字体的大小
    };
  }
};
</script>
第一种写法动态设置字体大小效果图

在这里插入图片描述

第二种写法动态设置字体大小效果图

在这里插入图片描述

例子：v-for 的演示

1.遍历数组的内容(显示索引)*****(常用)

不写index也可以的，index是索引。如果下面的{{item}}-{{index}}不把index写出来的话，是不会显示索引的

template里面的结构

<template>
  <div class="shiyan">
    <div class="shiyan1">
      <ul>
        <li  v-for="(item,index) in list" :key="index">{{item}}-{{index}}</li>
      </ul>
    </div>
  </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      list:["写代码","调bug","分享"],
    };
  }
};
</script>
遍历数组的内容效果图

在这里插入图片描述

2.遍历对象的内容(键值对显示)*****(常用)

循环里面不写index也可以的，index是索引。如果下面的{{item}}-{{index}}不把index写出来的话，就只显示值，不显示键，键就是对象里冒号前面的内容。说明一下，对象里面的是键值对。

template里面的结构

<template>
  <div class="shiyan">
    <div class="shiyan1">
      <ul>
        <li v-for="(item,index) in computer" :key="index">{{item}}-{{index}}</li>
      </ul>
    </div>
  </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      computer:{
        brand:"小米",
        color:"white",
        size:5.2,
        price:2000
      }
    };
  }
};
</script>
遍历对象的内容(键值对显示)效果图

在这里插入图片描述

3.遍历对象的内容(显示值)*****(常用)

循环里面不写index也可以的，index是索引。如果下面的{{item}}-{{index}}不把index写出来的话，就只显示值，不显示键，键就是对象里冒号前面的内容。说明一下，对象里面的是键值对。

template里面的结构

<template>
  <div class="shiyan">
    <div class="shiyan1">
      <ul>
        <li v-for="item in computer" :key="item">{{item}}-{{index}}</li>
      </ul>
    </div>
  </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      computer:{
        brand:"小米",
        color:"white",
        size:5.2,
        price:2000
      }
    };
  }
};
</script>
遍历对象的内容(显示值)效果图

在这里插入图片描述

例子：v-model 的演示

实现数据双向绑定*****(常用)

view的数据进行更改，data的数据也会随着更改，反之，一样。他们已经绑定在一起了。

template里面的结构

<template>
  <div class="shiyan">
    <div class="shiyan1">
      <ul>
        <input type="text" v-model="msg">
      </ul>
    </div>
  </div>
</template>

script里面的结构

<script>
export default {
  data() {
    return {
      msg:"努力一点点",
    };
  }
};
</script>
实现数据双向绑定效果图

在这里插入图片描述
在这里插入图片描述

例子：v-show和v-if 的演示

html结构

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.6.10.js"></script>
    <style lang="scss">
        .shiyan {
            width: 100%;
            height: 100%;
        }

        .shiyan1 {
            width: 500px;
            height: 500px;
            margin: 35px auto;
            background-color: #eae8e8;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="shiyan">
            <div class="shiyan1">
                <div v-show="isVisible">我是第一行  v-show</div>
                <div v-if="isVisible">我是第二行    v-if</div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isVisible: true,
            }
        })
    </script>
</body>

</html>
v-show和v-if 显示时演示效果图

在这里插入图片描述

v-show和v-if 销毁时演示效果图

在这里插入图片描述
要销毁的时候，要改一下script的代码

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isVisible: false,//这里改成false
            }
        })
    </script>

例子：v-if 和 v-else 和v-else-if 的演示

html结构

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

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.6.10.js"></script>
    <style lang="scss">
        .shiyan {
            width: 100%;
            height: 100%;
        }

        .shiyan1 {
            width: 500px;
            height: 500px;
            margin: 35px auto;
            background-color: #eae8e8;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="shiyan">
            <div class="shiyan1">
                <span v-if="score >= 90">A</span>
                <span v-else-if="score >= 80">B</span>
                <span v-else-if="score >= 70">C</span>
                <span v-else-if="score >= 60">D</span>
                <span v-else>E</span>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              score: 88,//上面的v-if以这里的值来判断显示哪个字母
            }
        })
    </script>
</body>

</html>
v-if 和 v-else 和v-else-if 的演示效果图

在这里插入图片描述

例子：v-on 的演示

html结构

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue2.6.10.js"></script>
    <style lang="scss">
        .shiyan {
            width: 500px;
            height: 500px;
            margin: 35px auto;
            background-color: #eae8e8;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="shiyan">
            <!-- 两个都可以生效，就是写法不一样 -->
            <button @click="showHide">控制显示隐藏</button>
            <button @click="isVisible = !isVisible">控制显示隐藏</button>
            <div v-show="isVisible">{{msg}}</div>
            <p></p>

            <!-- 两个都可以生效，就是写法不一样 -->
            <button @click="addNum">点击的时候数字加1</button>
            <button @click="num = num + 1">点击的时候数字加1</button>
            <div>{{num}}</div>
            <p></p>

            <!-- 1.不使用圆括号，event被自动当作实参传入 -->
            <!-- 2.使用圆括号，必须显式的传入$event对象，不能直接写event。不然只会把event当成一个变量，然后在data数据里搜索 -->
            <!-- 一般event我写在最后，这样方便辨认，你想写在哪个位置都行。event里面有这个页面的所有内容，还有很多数据 -->
            <!-- 括号里的都是实参，isVisible是data里面的isVisible数据，$event是整个页面的数据 -->
            <button @click="seeData(isVisible,$event)">点我查看控制台数据</button>
            <p></p>

        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "我是被控制的属性",
                isVisible: true,
                num: 18
            },
            methods: {
                // 控制显示和隐藏
                showHide() {
                    this.isVisible = !this.isVisible;
                },
                // 点击的时候数字加1
                addNum() {
                    this.num = this.num + 1;
                },
                // 点我看控制台数据
                //  这里的括号里面是形参。value用来接收上面所传进来的数据，event 是接收event的数据，名字随便你自己取，只要你能分出来就行
                //  一般event我写在最后，这样方便辨认，你想写在哪个位置都行 
                seeData(value, event) {
                    console.log(value, event);
                }
            }
        })
    </script>
</body>

</html>
v-on 的演示效果图

1.控制显示隐藏
在这里插入图片描述
在这里插入图片描述
2.点击的时候数字加1
在这里插入图片描述
在这里插入图片描述
3.点我查看控制台数据。event里面有这个页面的所有内容
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

例子：v-cloak 的演示

这里使用了一个场景来模拟结构未生成，和结构已生成的的结果。未生成的时候是插值表达式，生成的时候就是js解析完成后的结果。我这里是使用了单次定时器来制作这个场景。

没使用v-cloak的html结构

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

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

<body>
    <div id="app">
        <p>
            {{ message }}
        </p>
    </div>
    <script>
        setTimeout(() => {
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        }, 2000);
    </script>
</body>

</html>
没用v-cloak 之前的演示效果图

在这里插入图片描述

使用了v-cloak的html结构

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue2.6.10.js"></script>
    <style>
        /* 这里添加v-cloak的样式 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
         <p v-cloak><!--这里使用v-cloak -->
            {{ message }}
        </p>
    </div>
    <script>
        setTimeout(() => {
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        }, 2000);
    </script>
</body>

</html>
用了v-cloak 之后的演示效果图

在这里插入图片描述

weixin_44390722
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue指令的钩子函数使用方法
08-31
主要为大家详细介绍了Vue指令的钩子函数使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue语法使用 if 使用disabled
什么风把您给吹来了
08-01 2951
vue语法中使用if去控制按钮显示内容和触发状态通过表单中的数据去判断验证。
Vue指令介绍及使用
AI_huihui的博客
11-06 2136
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。 二、插值表达式 在dom标签中直接插入内容，又叫声明式渲染/文本插值。 语法：{{ 表达式 }} 注意：dom中插值表达式赋值, vue的变量必须在data里声明 三、vue中常用 v-...
vue指令大全
qq_43235503的博客
04-13 1533
vue指令大全
vue 指令
ajdhakj6的博客
08-22 1350
vue 常用指令
Vue指令之自定义指令
interstingh的博客
03-29 1465
自定义指令 在每个vue组件中，可以在directives节点下声明私有自定义指令 钩子函数 bind：只调用一次，指令第一次绑定到元素时调用。在这里进行一次性的初始化设置 inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档，因为DOM节点插入是异步的） update：所在组件的VNode更新时调用，但是可能发生VNode更新之前。 指令的值可能发生了改变，也可能没有 但是可以通过比较更新前后的值来忽略不必要的模版更新 先触发update再触发componentU
Vue指令学习文档
流楚丶格念的博客
03-09 4074
文章目录Vue指令插值表达式Vue基本指令Vue指令之`v-bind`的三种用法Vue指令使用综合案例Vue指令之`v-on`和`跑马灯效果`跑马灯效果跑马灯完整代码Vue指令之`v-on的缩写`和`事件修饰符`事件修饰符：Vue指令之`v-model`实现`双向数据绑定`双向数据绑定案例Vue指令之`v-for`和`key`属性1. 迭代数组案例：循环遍历普通数组案例 ：循环遍历对象数组2. 迭代对象中的属性案例：遍历对象中属性3. 迭代数字案例：迭代数字输出4.for循环中key的使用Vue指令之`v-
Vue指令大全
qq_45479398的博客
02-25 3328
Vue指令大全 对于一些刚接触Vue的小伙伴来说，可能都记不清楚Vue有哪些指令 现在，我开始隆重介绍一下Vue有哪些指令。 v-on v-on 是事件绑定，可以缩写为@,如果需要event就在函数里面传参;例如@click=“btn($event)”； 常用的修饰符也有很多： 比如 .stop用来取消冒泡事件； . prevent阻止默认事件； .once只执行一次；当然还有许多。 v-model v-model 是双向绑定，一般用于文本框、单选、复选、下拉； 常用的修饰符有 .lazy - 取代 in
vue指令实现埋点
weixin_43837268的博客
04-26 2267
1. 自定义指令 import Vue from 'vue' // 自定义埋点指令 Vue.directive('track', { //钩子函数，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 /* * el:指令所绑定的元素，可以用来直接操作 DOM * binding：一个对象，包含以下 property: * name：指令名，不包括 v- 前缀。 * value：指令的绑定值，例如：v-my-directive="1 + 1" ...
vue常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
Vue 指令实现按钮级别权限管理功能
10-17
主要介绍了Vue 指令实现按钮级别权限管理功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
Vue指令指令大全
01-19
为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。 <div v-html=rawHtml></div> 这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。 3. v-pre v-pre主要用来跳过这个元素和它的子...
简单学习vue指令directive
09-01
主要和大家一起简单学习一下vue指令，directive,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2.vue指令.ppt
04-10
vue指令
vue指令实现防止连点
07-08
应用vue指令，实现防止按钮连点，此文件内容只是局部指令，全局指令需要自己完成，但是核心功能是一样的
vue-resize-text：vue指令，可根据元素宽度自动调整字体大小
02-05
Vue指令可根据元素宽度自动调整字体大小。 它使字体大小在灵活或响应式布局上具有灵活性。 ：调整浏览器视口的大小以查看实际效果 安装 通过NPM安装 $ npm install vue-resize-text --save 通过CDN安装 < ...
vue指令只能输入正数并且只能输入一个小数点的方法
08-27
主要介绍了vue指令只能输入正数并且只能输入一个小数点的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue指令和用法
最新发布
05-30
以下是常见的Vue指令及其用法： 1. v-bind: 绑定数据到DOM元素的属性上，例如绑定src属性、href属性等。 2. v-if: 根据条件表达式来控制DOM元素的显示与隐藏。 3. v-for: 遍历数组或对象，生成相应的DOM元素。 4...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值