我是靠谱客的博主 痴情泥猴桃,最近开发中收集的这篇文章主要介绍html里面有原生js如何使用vue,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

需求简述:在日常开发中,我们时常需要对以前无法重构的老项目进行维护,但是之前的老项目很多都是原生写的,或者jQ写的,维护的内容使用这些技术太麻烦,很想使用vue,但是不想改动之前的代码。

维护描述:我在项目中使用vue2以及element ui,所以这两个东西正常引入

方式:

  1. 在html找到最外层div加上 id='app'
  2. 找到script标签加上
    new Vue({
    el: '#app',
    })
  3. 在外部定义一个变量  let vm = ''
  4. 在vue的mounted函数中给外部变量赋值:vm = this
  5. 现在回到代码里,我给出关键代码
    //表格点击事件部分
    {
    field: '',
    title: '操作区',
    formatter: function (value, row, index) {
    let $row = JSON.stringify(row).replace(/"/g,"'")
    let html = ''
    html = '<a onclick="test(' + $row + ')">配置短信内容</a>'
    return html
    }
    }
    //script最外层部分
    let vm = ''
    function test(row){
    //调用vue中methods中的test()方法
    vm.test(row)
    }
    //vue部分
    new Vue({
    el: '#app',
    methods:{
    test(row){
    console.log(row)
    }
    },
    mounted(){
    vm = this
    }
    })

    这样就能在原生事件里面调用vue中methods中的方法了

最后

以上就是痴情泥猴桃为你收集整理的html里面有原生js如何使用vue的全部内容,希望文章能够帮你解决html里面有原生js如何使用vue所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(61)

评论列表共有 0 条评论

立即
投稿
返回
顶部