vue3执行js脚本

Vue 3 是一个渐进式的JavaScript框架，用于构建用户界面。在 Vue 3 中执行 JavaScript 脚本可以通过多种方式实现，以下是一些常见的方法：

1. 插值表达式：在模板中使用双大括号 `{{ }}` 可以输出 JavaScript 表达式的值。这种方式通常用于绑定文本内容或者属性值。

   <p>当前计数：{{ count }}</p>

2. 指令：Vue 提供了一些内置指令，比如 `v-on` 或简写为 `@` 来监听 DOM 事件，并在事件触发时执行 JavaScript 代码。

   <button @click="increment">增加</button>

3. 计算属性和方法：在 Vue 实例的 `computed` 或 `methods` 选项中定义 JavaScript 函数，可以在模板中通过表达式调用它们。

   const app = Vue.createApp({
     data() {
       return {
         count: 0
       };
     },
     computed: {
       double() {
         return this.count * 2;
       }
     },
     methods: {
       increment() {
         this.count++;
       }
     }
   });

4. 生命周期钩子：在 Vue 实例的不同生命周期阶段执行特定的 JavaScript 代码，比如 `mounted` 钩子在组件被挂载到 DOM 后执行。

   const app = Vue.createApp({
     mounted() {
       console.log('组件已挂载');
     }
   });

5. 自定义指令：可以创建自定义指令来封装DOM操作，从而在指令的钩子函数中执行 JavaScript 代码。

   const app = Vue.createApp({});
   app.directive('my-directive', {
     beforeMount(el, binding, vnode, prevVnode) {
       // 在元素被插入DOM之前执行的代码
     }
   });

6. 动态样式绑定：使用 `v-bind` 或简写为 `:` 来动态绑定样式对象，可以在JavaScript中计算样式值。

   <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>