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中的方法了

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值