vue中的数据怎样和原生代码实现数据绑定？

Question

import $ from 'jquery';
import TocText from './text';
require( '../../assets/jquery-ui-1.10.3.min');

class TocDesign{
    constructor(){
        this.demoImgUrl='https://www.toctalk.com.cn/web/res_toc/js/toc/form/images/orgmgr/form2.jpg';
        this.widgetTemplate={
            text_widget:`
                <div class="field-component text">
                    <img src="${this.demoImgUrl}">
                    <span>${testVue}</span>    //这个地方!!!!!!!
                </div>
            </div>`,
            audio_widget:`
                <div class="field-component audio">
                    <img src="${this.demoImgUrl}">
                    <span>添加录音</span>
                </div>
            </div>`,
            pic_widget:`
                <div class="field-component audio">
                    <img src="${this.demoImgUrl}">
                    <span>添加图片</span>
                </div>
            </div>`,
            date_widget:`
                <div class="field-component audio">
                    <img src="${this.demoImgUrl}">
                    <span>添加日期</span>
                </div>
            </div>`
        }
    }
    loading(){
        //initParam
        var _self = this;
        _self.domTemplate = $("#" + _self.divDomTemplateId);
        _self.fieldWidgets = $("#" + _self.divWidgetsId);
        _self.fieldComponents = $("#" + _self.divComponentsId);
        _self.fieldItemArray.push(new TocText());
    }
    initWidget(){
        var _self = this;
          this.widgetArray=[
              {img:this.demoImgUrl,text:'文本',type:'text_widget'},
              {img:this.demoImgUrl,text:'语音',type:'audio_widget'},
              {img:this.demoImgUrl,text:'图片',type:'pic_widget'},
              {img:this.demoImgUrl,text:'日期',type:'date_widget'},
          ];
        return this.widgetArray;
    }
    initDragEvent(){
        var _self =this;
        $(function() {
              $('.component_items').draggable({
                cursor: "pointer",
                cursorAt: { top:20, left:75 },
                connectToSortable: ".currentTemplate",
                helper:function(){
                    var getThisWidgetType=$(this).attr("name");
                    var jqDom=$('<div></div>').append(_self.widgetTemplate[getThisWidgetType]);
                    return jqDom;
                },
            });
            $('.currentTemplate').sortable({
                distance: 10,
                cursor: "move",
                cancel: "",
                cursorAt: { top:20, left:75 },
                placeholder:"toc-design-mark",
                activate:function(event,ui){
                    _self.initWidget();
                },
                beforeStop:function(event,ui){
                    var getThisWidgetType=ui.item.attr("name");
                    ui.item.html(_self.widgetTemplate[getThisWidgetType]);
                },
                out:function(event,ui){
                    
                },
                receive:function(event,ui){
                    //ui.helper.html(_self.widgetTemplate.text_widget);
                }
            })
        });
    }
    
}
export default TocDesign;

希望在vue中的一个数据变化的时候原生中的参数也同步发生变化 ，有没有什么办法 ，写一个Object.defineProperty的访问器属性吗？

或者这么说 ：这个代码在原生的模板 能不能也绑定上v-on这类事件

Answer 1

先说你这个东西。字符串模板，在你把他付给变量的时候，他就已经把变量取出来了。所以呢，你要是想用这个东西，那你就每次改变testVue的时候，让他给你return一个新的出来就完事了。

 `<div class="field-component text">
        <img src="${this.demoImgUrl}">
        <span>${testVue}</span>    //这个地方!!!!!!!
    </div>
</div>`

其实监听改变这东西大概就是一个观察者模式，搭配一个引用列表。你可以自己定义一个模板，然后去分析里面的变量，也可以把就吧你的testVue改了。每次读他的时候，都调用你的上面那个return的方法。不过我觉得你这样写没啥意义吧。