vue‘中的全部指令

已于 2022-06-15 19:22:54 修改
阅读量173 收藏 1
点赞数 2
文章标签： vue.js javascript 前端
于 2022-06-15 19:16:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63564182/article/details/125302808
版权

Vue中有很多的指令，且形式都是：
我在这里总结了12个常见指令，顺序如下：v-on、v-bind、v-model、v-for、v-show、v-if、v-else/v-else-if、v-text、 v-html、v-cloak、v-once、v-pre

1. v-on

用于绑定事件，用法如下：
(1) 先来看看有哪些事件：
绑定键盘事件：

绑定鼠标单击事件： 
<a href="#" v-on:click="ShowInfo">鼠标单击事件</a>

绑定鼠标覆盖事件：

<a href="#" v-on:mouseover="ShowInfo">鼠标覆盖事件</a>

绑定鼠标双击事件：

<a href="#" v-on:dblclick="ShowInfo">鼠标双击事件</a>

总之就是替换掉v-on:后边的事件即可，下面总结一下可能会用到的事件：

鼠标事件

在这里再总结一下input框的几个事件：
https://pic1.zhimg.com/v2-822b9ae1adf580c7bf0587b52b33ef04_r.jpg

input事件：适用于实时查询，每输入一个字符都会出发这个事件

<input type="text" v-on:input="ShowInfo" />

blur事件：失去焦点时触发的事件

<input type="text" v-on:blur="ShowInfo" />

(2) v-on的简写形式

：
v-on：可以简写成@，即上边所有的v-on:事件名都可以简写成@事件名，比如@click，@keyup，@input……

(3) 传参（以click事件为例）：

不传参:

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <a href="#" v-on:click="ShowInfo">{{msg}}</a>
    </div>
    <script>
      Vue.config.productionTip = false; //阻止Vue在启动时生成生产提示
      const vm = new Vue({
        el: '#root',
        data: {
          msg: '点我提示信息',
        },
        methods: {
          ShowInfo(event) {
            console.log(event); //event是这个事件对象，这里会有一个默认的参数
          },
        },
      });
    </script>
  </body>
</html>

v-on:可以简写为@: @click=“ShowInfo”

传参:

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <a href="#" @click="ShowInfo(1)">{{msg}}</a>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          msg: '点我提示信息',
        },
        methods: {
          ShowInfo(num) {
            console.log(num); //打印结果为1
          },
        },
      });
    </script>
  </body>
</html>

这样传参会导致丢失event，那么怎么给event占位呢？看下面：

在这里插入图片描述

在这里插入图片描述

总结：

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

2.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

(4) v-on绑定多个事件：

语法：v-on="{事件名：方法名，事件名：方法名,……}"，v-on里面是一个对象，例如：

<!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>test</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <!-- v-on绑定多个事件： -->
      <button v-on="{click:single,dblclick:double}">单击n+1,双击m-1</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          n: 1,
          m: 2,
        },
        methods: {
          single() {
            console.log('我被单击了');
          },
          double() {
            console.log('我被双击了');
          },
        },
      });
    </script>
  </body>
</html>
  1. v-bind
    单向数据绑定，它是为标签里的某个属性绑定值用的
    (1) 基本用法：
 <body>
    <div id="root">
     单向数据绑定：<input type="text" v-bind:value="aname">
    </div>
    <script>
      const vm = new Vue({
        el: '#root',
        data: {
          aname:'进击的Giser'
        },
      });
    </script>
 </body>

在这里插入图片描述

(2) 简写形式：

v-bind:可以简写为:，举例：v-bind:href='xxx’可以简写为：:href=‘xxx’

3. v-model

双向数据绑定，v-model只能应用在表单类元素（如：input、select等）
(1) 基本用法：

<body>
   <div id="root">
    双向数据绑定：<input type="text" v-model:value="aname">
   <!-- 下边一行代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
   <!-- <h2 v-model:x="name">你好啊</h2> -->
   </div>
   <script>
     const vm = new Vue({
       el: '#root',
       data: {
         aname:'学编程的Giser'
       },
     });
   </script>
 </body>

(2) 简写形式：

v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

4. v-for

遍历

(1) 遍历数组：

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1 v-for="(i,index) in arr">每一项：{{i}}--索引值：{{index}}</h1>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          arr: ['学', '编程', '的', 'GISer'],
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

(2) 遍历对象：

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1 v-for="(i,index) in arr">键：{{i}}--值：{{index}}</h1>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          arr: {
            name: 'Dapan',
            age: 3,
            sex: 'boy',
          },
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

(3) 迭代数字：

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1 v-for="(i,index) in 6">每一项：{{i}}--索引：{{index}}</h1>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {},
      });
    </script>
  </body>
</html>

在这里插入图片描述

5. v-show

条件渲染，v-show指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。v-show等于false时,相当于设置了样式的display为none

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>下边测试v-show：</h1>
      <h3 v-show="showTest">v-show = true,故这个元素显示出来了</h3>
      <button @click="showTest = true">点击按钮，showTest变为true</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          showTest: false,
        },
      });
    </script>
  </body>
</html>

6. v-if

条件渲染，与v-show类似，唯一不同的是，当v-if = false的时候，直接删掉DOM结构

<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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>下边测试v-if：</h1>
      <h3 v-if="ifTest">v-if = true,故这个元素显示出来了</h3>
      <button @click="ifTest = true">点击按钮，ifTest变为true</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          ifTest: false,
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

7. v-else/v-else-if

v-else-if: 和if语句中else if的用法相同

v-else: 当v-if不成立时执行

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div v-if="n==1">{{a}}</div>
      <div v-else-if="n==2">{{b}}</div>
      <div v-else-if="n==3">{{c}}</div>
      <div v-else-if="n==4">{{d}}</div>
      <div v-else style="font-weight: 700">{{e}}</div>
      <button @click="n++">点我n加一</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          n: 0,
          a: '欢迎',
          b: '关注',
          c: '公众号',
          d: '学编程的',
          e: '学编程',
        },
      });
    </script>
  </body>
</html>

注意: 如果用v-if和v-else去做判断,中间不能被打断,如:

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 错误： -->
    <div id="root">
      <div v-if="n==1">{{a}}</div>
      <div v-else-if="n==2">{{b}}</div>
      <!-- v-if和v-else被打断了: -->
      <div>@</div>
      <div v-else-if="n==3">{{c}}</div>
      <div v-else-if="n==4">{{d}}</div>
      <div v-else style="font-weight: 700">{{e}}</div>
      <button @click="n++">点我n加一</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          n: 0,
          a: '欢迎',
          b: '关注',
          c: '公众号',
          d: '学编程的GISer',
          e: '欢迎关注公众号:学编程的GISer',
        },
      });
    </script>
  </body>
</html>

8. v-text

用于将数据填充到标签中，作用于插值语法表达式类似，但是没有闪动问题 （如果数据中有HTML标签会将html标签一并输出 ）
用法：

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>{{str}}</h1>
      <h1 v-text="str">公众号:</h1>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          str: '学编程的GISer',
        },
      });
    </script>
  </body>
</html>

注意：1. v-text会把解析到为文本完全替换掉标签里的内容,如上边例子中，页面上并没有显示出“公众号：”这几个字符，因为它被v-text完全替换掉了

  1. 不能解析字符串，v-text会把所有的字符串都当成正常的文本解析，不会当成标签，即使你的data里的str数据中有标签结构（比如: 《h1》123《h1》”）

  2. v-html

v-html和v-text的区别：它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

…………………… 共同点：都会全部替换原本标签里的内容。


```html

```html
<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div v-html="name"></div>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          name: '<h1>Dapan</h1>',
        },
      });
    </script>
  </body>
</html>

v-html指令：

1.作用：向指定节点中渲染包含html结构的内容。

2.与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2).v-html可以识别html结构。

3.严重注意：v-html有安全性问题！！！！

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
10. v-cloak
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
代码演示：

网速慢的时候：

<!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>v-clock</title>
 <script src="../js/vue.js"></script>
</head>
<body>
 <div id="root">
   <h1>{{name}}</h1>
 </div>
 <script>
   Vue.config.productionTip = false;
   const vm = new Vue({
     el: '#root',
     data: {
       name:"Dapan"
     },
   });
 </script>
</body>
</html>

这个时候因为网速过慢，导致vue.js并没有加载出来，所以页面渲染如下：{{name}}

使用v-cloak之后：

<!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>v-cloak</title>
 <script src="../js/vue.min.js"></script>
 <style>
   [v-cloak] {
     display: none;
   }
 </style>
</head>
<body>
 <div id="root">
   <h1 v-cloak>{{name}}</h1>
 </div>
 <script>
   Vue.config.productionTip = false;
   const vm = new Vue({
     el: '#root',
     data: {
       name:"Dapan"
     },
   });
 </script>
</body>
</html>

设置了所有包含v-cloak属性的页面的display为none：

打开Live Server为空白，但是当vue.js加载好之后会删掉v-cloak属性，进而display值也就不再是none

  1. v-once
    1.v-once所在节点在初次动态渲染后，就视为静态内容了。
    2.以后数据的改变不会引起v-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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1 v-once>初始化时候的n是:{{n}}</h1>
      <h1>现在的n是:{{n}}</h1>
      <button @click="n++">点我n加1</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          n: 1,
        },
      });
    </script>
  </body>
</html>

点击两次按钮之后：

在这里插入图片描述
注意：v-cloak和v-once都没有值（后面都没有等号）。

12. v-pre

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

<!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>test</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1 v-pre>没有使用指令语法和插值语法</h1>
      <h1 v-pre>{{name}}</h1>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
          name: 'dapan',
        },
      });
    </script>
  </body>
</html>

跳过vue的编程过程 —》{{name}}

一句话总结这12个常用指令：

v-on : 绑定事件监听, 可简写为@
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-show : 条件渲染 (动态控制节点是否展示)
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-text：将数据填充到标签中（不会解析填充内容中的HTML标签）
v-html：将数据填充到标签中（会解析填充内容中的HTML标签）
v-cloak：一个特殊属性，Vue接管标签后会删掉这个属性（没有值）
v-once：只渲染一次，之后Vue就不再渲染这个标签了（视为静态内容了）
v-pre：Vue不接管这个属性所在的标签（可用于加快编译速度，用于没有使用指令语法、没有使用插值语法的节点上）

Myleague
关注
Vue自定义弹窗指令的实现代码
10-18
在Vue.js框架中，自定义指令是一种扩展Vue组件行为的方式，它们可以被添加到任何元素上。这篇文章主要讲解了在Vue2.0版本中如何创建一个自定义弹窗指令，使得具有该指令的标签在被点击时能够显示一个弹窗。 ### ...
vue 中自定义指令改变data中的值
12-29
通过局部自定义指令实现了一个拖动的指令 html: <div xss=removed v-drag={set:set}></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(el,binding...
vue 启动命令顺序_Vue基础
weixin_36373787的博客
01-26 205
Vue是一套构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue安装 Vue安装有三种方式，下面依次介绍。独立版本打开Vue.js的官网，找到安装页面选择下载开发版本，因为生产版本没有错误提示和警告，不利于学习。在html文件的...
Vue中常见指令汇总
cuckooii的博客
04-05 510
Vue指令 解释：是指带有 v- 前缀的特殊属性 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 1、v-html 解释：更新dom对象的innerHTML <div id="box"> <div v-html="str"></div> </div> <script> var vm = new ...
vue中的常用指令
soos的博客
08-09 193
vue中常用指令
Vue常用指令+用法举例 详解
m0_69287579的博客
08-18 3996
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
关于Vue中常用指令总结
huangzhixin1996的博客
07-29 284
关于vue中的指令
Vue自定义指令封装节流函数的方法示例
08-27
需要注意的是，在自定义指令中，我们可以传递参数，例如 binding.value()。这个参数可以是一个函数、事件或绑定对象等。我们可以根据需要来传递不同的参数，以实现不同的功能。 使用 Vue 自定义指令封装节流函数...
vue自定义指令实现方法详解
01-21
vue中的指令就是v-on v-bind v-show等等，那么自定义指令是什么呢？ 自己定义的指令就是自定义指令。 语法： Vue.directive(id, definition) 这里可以参考vue中的指令 ”yes”>Yes</h1> 其中，if就是指令ID，yes是...
Vue中集成的指令以及其用法
感恩、奋进、自信
03-21 971
下面介绍Vue中集成的指令以及用法和作用 v-bind v-on v-model v-for v-html v-text v-if v-else-if v-else v-show v-once v-pre v-cloak 1、声明式渲染有两种方法 A、文本插值，用两个花括号：{{内容}} html如下： <div id="app"&gt...
Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
01-08
在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍： 一、插值表达式 插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义： 通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了 Document {{msg}} var vm=new Vue({ el:#app, data:{ msg:Hello Vue! } }) 由于插值表达式的语法是{{}} 因而也被称为mustache胡子
Vue.js 中的 v-cloak 指令及使用详解
10-17
主要介绍了Vue.js 中的 v-cloak 指令及使用详解，通过案例给大家简单介绍了vue中v-cloak的使用，感兴趣的朋友跟随小编一起看看吧
v-cloak指令
fushan2012的博客
02-22 4232
v-cloak
v-cloak指令的使用
liyongchunscr的博客
07-19 6039
v-cloak原理是先通过样式隐藏内容，然后在内存中进行值的替换，将替换的内容再反馈给界面，数据渲染完场之后，v-cloak属性会被自动去除。v-cloak指令常常用在插值表达式的标签中，因为它可以解决当网络加载很慢时，或者频繁渲染时候，页面就会显示出源代码的情况。然后，在css中设置v-cloak的属性为display为none。首先，在差值语法所在的标签处加上v-cloak指令。v-cloak的使用场景。...
vue.js v-model的运算
qq_37805832的博客
02-15 1454
<!DOCTYPE html> <html lang="zh"> <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"> <script type="text/javasc
Vue中的 v-cloak 指令
m0_72759446的博客
08-21 953
【代码】Vue中的 v-cloak 指令。
vue 的指令
热门推荐
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
Vue26-内置指令03：v-cloak指令
最新发布
qq_31532983的博客
06-13 257
JS阻塞，v-cloak指令
Vue3学习笔记-06
JZYCLL的博客
07-22 238
Vue3学习笔记-06 一、内置指令 ​ 接着Vue3学习笔记-05 4. v-cloak 指令 当网速过慢的时候，可以让未经过解析的模板不会渲染在页面上 <style> [v-cloak]{ display:none; } </style> <div id="root"> <h2 v-cloak>{{name}}</h2> </div> <script> new Vue({
在vue中 自定义指令
08-16
在Vue中，自定义指令是一种能够扩展已有的HTML元素或者Vue组件的功能的方式。你可以使用自定义指令来直接操作DOM、添加事件监听器、应用动画效果等。 要创建一个自定义指令，你可以使用Vue实例的`directive`方法。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值