Vue常用指令

最新推荐文章于 2025-06-06 16:47:17 发布
原创 最新推荐文章于 2025-06-06 16:47:17 发布
· 134 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #html5

指令描述
{{}}插值表达式
v-text更新元素中的text内容
v-html更新元素中的 innerHTML
v-if根据表达式的真假值来有条件地渲染元素。
v-else-if表示 v-if 的“else if 块”。可以链式调用。
v-else为 v-if 或者 v-else-if 添加“else 块”。
v-for基于源数据多次渲染元素或模板块。
v-on绑定事件监听器。
v-bind动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
v-once只渲染元素和组件一次。
v-model在表单控件或者组件上创建双向绑定。
v-slot提供具名插槽或需要接收 prop 的插槽。

1. 插值表达式 {{}}

  • 在HTML页面中我们需要获取Vue中的数据，这时我们可以通过插值表达式来获取。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <div id="root">
    <div>{{message}}</div>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "hello world"
        };
      }
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

2. v-text

  • 更新元素的 textContent。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "hello world"
        };
      },
      template: `
        <div v-text="message"></div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

3. v-html

  • 更新元素的 innerHTML。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          html: "<i style='color:red;'>hello world</i>"
        };
      },
      template: `
        <div v-html="html"></div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

4. v-if

  • 根据表达式的真假值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          b1: true,
          b2: false,
          message1: "hello world true",
          message2: "hello world false"
        };
      },
      template: `
        <div v-if="b1">{{message1}}</div>
        <div v-if="b2">{{message2}}</div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

5. v-else-if

  • 前一兄弟元素必须有 v-if 或 v-else-if。
  • 表示 v-if 的“else if 块”。可以链式调用。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          b1: true,
          b2: false,
        };
      },
      template: `
        <div v-if="b2">v-if</div>
        <div v-else-if="b1">v-else-if</div>
        <div v-else>v-else</div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

6. v-else

  • 前一兄弟元素必须有 v-if 或 v-else-if。
  • 为 v-if 或者 v-else-if 添加“else 块”。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          // b1: true,
          b2: false,
          // message1: "hello world true",
          // message2: "hello world false"
        };
      },
      template: `
        <div v-if="b2">v-if</div>
        <div v-else>v-else</div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

7. v-for

7.1用 v-for 把一个数组对应为一组元素

  • 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
  • 在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
  • v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <ul id="root">
  </ul>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 用 v-for 把一个数组对应为一组元素
    const app = Vue.createApp({
      data() {
        return {
          parentMessage: 'Parent',
          items: [{ message: 'Hello' }, { message: 'world' }]
        };
      },
      template: `
        <li v-for="(item, index) in items" :key="index">
          {{ parentMessage }}--{{ index }}--{{ item.message }}
        </li>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

7.2 数组更新检测

  • 1. 使用数组的变更函数 push, pop, shift, unshift, splice, sort, reverse
vm.items.pop();
  • 2. 直接替换数组
vm.items = [{message: "666666"}];
  • 3. 直接更新数组的内容
vm.items[0] = {message: "111111"};

7.3 在 v-for 里使用对象

  • 你也可以用 v-for 来遍历一个对象的 property。
  • 你也可以提供第二个的参数为 property 名称 (也就是键名 key)。
  • 还可以用第三个参数作为索引。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <ul id="root">
  </ul>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 在 v-for 里使用对象
    const app = Vue.createApp({
      data() {
        return {
          myObject: {
            name: 'ZS',
            age: 18,
            sex: 'male'
          }
        };
      },
      template: `
        <li v-for="(value, key, index) in myObject">
          {{ index }}--{{ key }}--{{ value }}
        </li>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

7.4 在 v-for 里使用值的范围

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

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <ul id="root">
  </ul>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 在 v-for 里使用值的范围
    const app = Vue.createApp({
      template: `
        <span v-for="item in 10" :key="item">
          {{ item }}&nbsp&nbsp
        </span>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

8. v-on

  • 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
  • 使用 .prevent 修饰符等于调用 event.preventDefault()。
  • 我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data(){
        return {
          message: 'hello'
        };
      },
      methods: {
        handleSubmit(){
          const inputValue = document.getElementById('inputValue');
          this.message = inputValue.value;
          console.log(this.message);
        }
      },
      template: `
        <div>{{message}}</div>
        <form action='https://www.baidu.com'>
          <input type='text' id='inputValue'/>
          <input type='submit' value='submit' v-on:click.prevent='handleSubmit'/>
        </form>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

9. v-bind

  • 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
  • 在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。

9.1 字符串语法

  • 我们可以传给 :class (v-bind:class 的简写) 一个字符串：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
  <style>
    .red {
      color: red;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          classString: 'red'
        };
      },
      template: `
        <div :class="classString">
          Hello World
        </div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

9.2 对象语法

  • 我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
  <style>
    .red {
      color: red;
    }

    .green {
      color: green;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          classObject: { red: false, green: true },
        };
      },
      template: `
        <div :class="classObject">
          Hello World
        </div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

9.3 数组语法

  • 我们可以把一个数组传给 :class，以应用一个 class 列表：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
  <style>
    .red {
      color: red;
    }

    .green {
      color: green;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          classArray: ['red', 'green'],
        };
      },
      template: `
        <div :class="classArray">
          Hello World
        </div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

9.4 在组件上使用

  • 当你在带有单个根元素的自定义组件上使用 class attribute 时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。
  • 如果你的组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
  <style>
    .red {
      color: red;
    }

    .green {
      color: green;
    }

    .italic {
      font-style: italic;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          italic: 'italic',
          classObject: { red: false, green: true },
        };
      },
      template: `
        <div>
          <demo1 :class="classObject" 
          v-bind:italic='italic'></demo1>
          <demo2 :class="classObject" 
          v-bind:italic='italic'></demo2>
        </div>
      `
    });

    app.component('demo1', {
      props: ['italic'],
      template: `
      <div :class="$attrs.class">one</div>
      <div :class="italic">two</div>
      `
    })

    app.component('demo2', {
      props: ['italic'],
      template: `
          <div :class="italic">three</div>
        `
    })

    const vm = app.mount('#root');
  </script>
</body>

</html>

10. v-once

  • 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用指令</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 1
        };
      },
      methods: {
        handleClick() {
          this.message++;
        }
      },
      template: `
        <div v-once>{{message}}</div>
        <div>{{message}}</div>
        <button @click=handleClick>+1</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

11. v-model

  • 在表单控件或者组件上创建双向绑定。

11.1 表单控件绑定

  • 与表单元素中 text 类型的 <input> 元素中的 value 进行绑定。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>props</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          inputValue: '',
          list: []
        };
      },
      methods: {
        handleAddItem() {
          this.list.push(this.inputValue);
          this.inputValue = '';
        }
      },
      template: `
        <div>
          <input v-model="inputValue" />
          <button v-on:click="handleAddItem">增加</button>
          <ul>
            <li v-for="(item, index) of list">{{item}}</li>
          </ul>
        </div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>

11.2 父子组件间如何通过事件进行通信

  • 不使用 v-model
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>props</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return { count: 1 }
      },
      methods:{
        handleAdd(count){
          this.count = count;
        }
      },
      template: `
        <counter :count='count' @add="handleAdd" />
      `
    });
    app.component('counter', {
      props: ['count'],
      methods: {
        handleClick() {
          this.$emit('add', this.count + 3);
        }
      },
      template: `
        <div @click="handleClick">{{count}}</div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>

  • 使用 v-model
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>props</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return { count: 1 }
      },
      template: `
        <counter v-model='count' />
      `
    });
    app.component('counter', {
      props: ['modelValue'],
      methods: {
        handleClick() {
          this.$emit('update:modelValue', this.modelValue + 3);
        }
      },
      template: `
        <div @click="handleClick">{{modelValue}}</div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>
  • 多个 v-model 绑定
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>props</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return { count: 1, count1: 1 }
      },
      template: `
        <counter v-model:count='count' v-model:count1='count1'/>
      `
    });
    app.component('counter', {
      props: ['count', 'count1'],
      methods: {
        handleClick() {
          this.$emit('update:count', this.count + 1);
          this.$emit('update:count1', this.count1 + 3);
        }
      },
      template: `
        <div @click="handleClick">{{count}}--{{count1}}</div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>

  • 处理 v-model 修饰符
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>props</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          count: 'a',
        }
      },
      template: `
        <counter v-model.uppercase="count" />
      `
    });
    app.component('counter', {
      props: {
        'modelValue': String,
        // 检查是否带有修饰符，默认没有返回空对象
        'modelModifiers': {
          default: () => ({})
        }
      },
      methods: {
        handleClick() {
          let newValue = this.modelValue + 'b';
          // this.modelModifiers    {uppercase: true}
          if (this.modelModifiers.uppercase) {
            newValue = newValue.toUpperCase();
          }
          this.$emit('update:modelValue', newValue);
        }
      },
      template: `
        <div @click="handleClick">{{modelValue}}</div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

12. v-slot

  • 提供具名插槽或需要接收 prop 的插槽。
  • 跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。

12.1 插槽的基本使用

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

<head>
  <meta charset="UTF-8" />
  <title>v-slot</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data(){
        return {
          message: '值传递'
        }
      },
      template: `
        <comp1>字符串</comp1>
        <comp1><ul><li>HtML代码</li></ul></comp1>
        <comp1>{{message}}</comp1>
      `
    });
    app.component('comp1', {
      template: `
        <div><slot></slot></div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

12.2 具名插槽的使用

  • 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

  • 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

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

<head>
  <meta charset="UTF-8" />
  <title>v-slot</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      template: `
        <comp1>
          <template v-slot:header>
            <div>header</div>
          </template>
          <template v-slot:default>
            <div>content</div>
          </template>
          <template v-slot:footer>
            <div>footer</div>
          </template>
        </comp1>
      `
    });
    app.component('comp1', {
      template: `
        <slot name='header'></slot>
        <slot></slot>
        <slot name='footer'></slot>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

 12.3 作用域插槽

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

<head>
  <meta charset="UTF-8" />
  <title>v-slot</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      template: `
        <ul>
          <!-- 接收 prop 的默认插槽，使用了解构 -->
          <comp1>
            <template v-slot:default="{defItem}">
              <li>{{defItem}}</li>
            </template>
          </comp1>
          <!-- 接收 prop 的具名插槽 -->
          <comp1>
            <template v-slot:namItem="slotProps">
              <li>{{slotProps.namItem}}</li>
            </template>
          </comp1>
        </ul>
      `
    });
    app.component('comp1', {
      data() {
        return {
          defItems: [1, 2, 3],
          namItems: [4, 5, 6]
        }
      },
      template: `
        <slot v-for="defItem in defItems" :defItem="defItem"></slot>
        <slot name='namItem' v-for="namItem in namItems" :namItem="namItem"></slot>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

 

 

vue常用指令、修饰符
Senora的博客
06-24 1281
vue常见指令和修饰符以及涉及到的前端面试题
Vue常用指令详析与速查指南
12-11
内容概要：本文档详细介绍了Vue.js中的常用指令，涵盖了从基础到高级的各种指令及其应用场景。主要内容包括：v-bind的多种使用方法（如动态绑定、缩写语法、对象和数组绑定），v-model实现的数据双向绑定（适用于多...
Vue3源码学习笔记—— Vue.createApp(App) 和 app.mount(“#app“)（三）
weixin_53335381的博客
08-10 7376
本篇文章对 app.mount("#app") 实现流程进行了详细分析，以该系列（一）中的 demo 为例。
Vue 自定义插件等知识点（笔记自用，测试代码基于vue 3）
weixin_39763711的博客
08-25 525
vue 知识点总结
Vue组件
visibleforest的博客
10-07 669
组件的定义与使用 组件具备复用性 组件名使用横线连接的小写命名方式。 全局组件： 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单。名字建议小写字母单词，中间用横线连接。 定义全局组件： //声明一个全局组件（使用app.component声明全局组件） app.component('hello-word',{ data() { return { cou
Vue3源码之mount挂载
热门推荐
玉案轩窗的博客
07-14 1万+
前言 当调用Vue.createApp后就会生成一个应用上下文实例，该实例暴露了相关功能API，其中就包含mount函数，该函数实现组件挂载。简易实例如下： const Counter = { data() { return { counter: 0 } } } Vue.createApp(Counter).mount('#counter') 本文就是梳理mount函数的逻辑，对比Vue2来聊聊二者的不同处理。 mount处理逻辑 在之前的文章Vue3源码之creat
app.$mount("#app") 手动挂载
魏晋-
06-06 7407
$mount()手动挂载 当Vue实例没有el属性时，则该实例就没有挂载到某个dom中 假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如： 当Vue实例有el属性时---看代码: new Vue({ el: '#app', router, render: h => h(App) // render: x => x(App) // 这里的render:...
vue常用指令
ggdjs的博客
12-24 1352
Vue 允许你注册自己的自定义指令，用于封装对 DOM 的底层操作。// 当绑定元素插入到 DOM 中时...// 聚焦元素el.focus();})这些指令是 Vue.js 中最常用的指令，它们提供了丰富的功能来构建动态和响应式的用户界面。通过这些指令，你可以轻松地将数据和 DOM 元素绑定起来，实现数据驱动的视图更新。在实际开发中，合理地使用这些指令能够极大地提高开发效率和代码的可维护性。
vue常用指令代码实例总结
09-17
Vue 常用指令代码实例总结 Vue 框架提供了许多实用的内置指令，帮助开发者快速构建 Web 应用程序。本文将对 Vue 框架中一些常用的内置指令进行总结和介绍，包括文本更新、条件渲染、事件处理、数据绑定、动画和生命...
Vue常用指令详解分析
10-18
以上内容从Vue框架的基本概念讲起，深入讲解了Vue常用指令，包括它们的定义、用法、简写形式以及注意事项。此外，还涉及了Vue实例的基本用法和组件属性的定义。这些知识对于初学者来说是基础且必要的，它们是理解和...
cerateApp使用
weixin_42180591的博客
01-04 667
如下所示， const app = Vue.createApp({ template:` <div> <div>{{content}}</div> </div> `, data(){ return{ show:true, content:'
vue中.$mount('#app')手动挂载
ioszhanghui的博客
06-17 9317
在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$mount('#app')进行挂载。 配置了el属性： new Vue({ el:"#app", router }); 如果没有配置el属性，可以使用手动挂载$mount("#app") new Vue({ router }).$mount('#app'); var vm = new Vue({ ro...
vue封装gsap自定义动画指令
m0_69250830的博客
06-04 349
gsap自定义动画指令封装
D3.js与vue3力导向图开发全流程
最新发布
qq_38918953的博客
06-06 336
本文介绍了使用Vue 3、TypeScript和D3.js构建力导向图的实现方法。父组件D3ForceGraph接收图谱数据并渲染可视化图表，子组件负责D3.js的具体实现，包含节点样式配置、交互功能（如缩放）和箭头标记定义。通过模拟数据展示美国产品知识图谱，节点代表不同实体（国家、品牌、产品等），连线表示实体间关系。技术栈结合了Vue的组件化、D3.js的数据可视化能力以及Tailwind CSS的样式设计，实现了响应式、交互式的网络图谱展示。
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
向着太阳迎着光
06-06 463
uni-app中Web-view与Vue页面通讯主要通过双向消息传递实现：Web-view可加载本地或远程HTML，并通过postMessage与uni-app交互；uni-app则通过webview组件的postMessage方法向H5发送消息。通讯方式包括H5主动发送事件、uni-app接收处理，以及uni-app调用H5方法。还可通过JSBridge直接调用API或间接中转调用uni-app功能。该机制实现了原生与Web的高效互通，支持数据传递和功能调用，为混合开发提供了灵活解决方案。
VueScan：全能扫描，高清输出
2501_90839605的博客
06-03 860
在数字化办公和图像处理的领域，扫描仪扮演着不可或缺的角色。VueScan正是这样一款集多功能于一身的扫描仪软件，它凭借强大的兼容性、丰富的功能和跨平台的运行能力，成为了众多用户在扫描、拍摄和打印高质量图片及文档时的首选工具。此外，VueScan还具备OCR文字识别功能，能够将扫描的文档中的文字内容识别并转换为可编辑的文本格式，大大提高了文档处理的效率。VueScan凭借其广泛兼容性、高质量扫描输出、丰富的功能设置以及便捷的操作体验等优势，成为了众多用户在扫描、拍摄和打印高质量图片及文档时的首选工具。
VueUse：组合式API实用函数全集
qq_40603125的博客
06-03 465
VueUse 是Vue 3生态系统中不可或缺的工具库，它提供了：✅丰富的功能：涵盖传感器、浏览器、网络、状态管理等各个方面✅开箱即用：无需复杂配置，直接导入使用✅类型安全：完整的TypeScript支持，提供良好的开发体验✅性能优秀：按需导入，优化包体积✅生态完善：与Nuxt、Vue Router等完美集成✅持续更新：活跃的社区维护，功能不断丰富。
Vue3中使用Echarts图表步骤-demo
JackieDYH的博客
06-03 222
对应的vue页面中使用，使用前引入echarts。但页面窗口大小改变时重新渲染图表。
vue常用命令
03-08
好的，用户现在问的是Vue常用命令。首先，我需要确定用户的问题具体指向什么。Vue作为前端框架，可能有不同的“命令”需要解释。可能用户指的是Vue CLI的命令，或者是Vue项目中常用的npm脚本，或者是Vue的指令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值