vue调用js方法
    Vue.js一个渐进式的JavaScript架，它可被用于创建前端应用程序。它的优点包括数据驱动、组件化、可维护性、可测试性等。在工作中，有时候需要在 Vue用程序内调用原生的 JavaScript法。在本文中，我们将主要来讨论 Vue何调用原生的 JavaScript法。
    ### 一、使用全局的方法
    最简单的一种方法是 Vue局调用 JavaScript生方法，即在 Vue 中挂载到 window 下的方法，例如：
    ```javascript
    // window 下挂载一个全局方法
    window.sayHello = function () {
    console.log(Hello, Vue!
    }
    ```
    然后，在 Vue组件中调用该方法：
    ```javascript
    mounted () {
    // Vue用 JavaScript生方法
    window.sayHello()
    }
    ```
    使用这种方法，你可以将所有的 JavaScript法挂载到 window 上，而不需要考虑如何向 Vue 传递参数，只要在 Vue 中直接调用就可以了。这种方式简单易行，但也有一些缺点，例如：
    -局污染：每次添加一个 JavaScript法都会影响全局变量，如果不小心，很容易引起全局变量冲突；
    -维护性：如果有多个组件要使用同一个 JavaScript生方法，则需要在每个组件中都添加这样的代码，可维护性比较差。
    ### 二、设置属性
    Vue 也可以使用属性的方式来调用 JavaScript生的方法，例如：
    ```javascript
    Vueponent(my-component {
    data () {
    return {
    sayHelloFunc: function () {
    console.log(Hello, Vue!
    }
    }
    },
    mounted () {
    this.sayHelloFunc()
    }
    })
    ```
    使用这种方法，可以设置一个属性（sayHelloFunc），该属性的值是一个函数，然后在 mounted子函数中调用这个函数即可。这种方式有以下优点：
    - 不会发生全局污染：使用这种方式， JavaScript法被封装在 Vue件内，不会影响全局环境；
    -维护性：Vue件之间是可以共享的，一个原生 JavaScript法只需要在一个组件中定义即可，其它组件都可以共享。
    ### 三、传递参数
js调用方法的三种写法
    在调用 JavaScript生方法时，有时候需要传递一些参数，例如：
    ```javascript
    Vueponent(my-component {
    data () {
    return {
    sayHelloFunc: function (param) {
    console.log(Hello,  + param)
    }
    }
    },
    mounted () {
    let param = Vue
    this.sayHelloFunc(param)
    }
    })
    ```
    在上面的例子中，我们调用的 sayHelloFunc法接受一个参数，我们可以在 mounted子函数中，将参数传递给该方法，即可实现原生方法调用。
    ###、使用插件
    Vue 中也有一些现成的插件可以用来调用原生 JavaScript法，例如：vue-native-helper。使用插件方式，可以更加便捷地调用原生 JavaScript法，例如：
    ```javascript
    // 使用插件
    import VueNativeHelper from vue-native-helper
    Vue.use(VueNativeHelper)
    //组件中调用原生方法
    mounted () {
    // Vue用 JavaScript生方法
    this.$native(function () {
    console.log(Hello, Vue!
    })
    }
    ```
    使用插件的优点在于，它简化了原生方法的使用，我们可以直接在 Vue 中使用 $native数，无需定义属性和函数，直接调用即可。
    ### 五、总结
    本文介绍了 Vue何调用原生的 JavaScript法的几种方法，从而可以更加灵活的在 Vue 中使用原生的 JavaScript法。从上面的分析，我们可以得出以下结论：
    - 使用全局变量的方式最简单，但存在全局污染和可维护性差的问题；
    -置属性的方式可以解决全局污染问题，但也要在每个组件中都定义一遍，这样可行性就不是特别高；
    - 传递参数的方式可以使用在调用原生方法时传递参数，但其实也可以用设置属性的方式实现；
    - 使用插件的方式，可以在插件中封装多个 JavaScript法，简化 Vue 中的调用，可维护性更高。
    因此，在实际的开发中，要根据需求来选择合适的方式，以实现原生 JavaScript法调用。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。