layui和vue.js和jq一起使用調用vue方法及變數

<div class="layui-row layui-col-space15"  id="app"></div>

定義vueApp:

let vueApp
require(['vue'],function(Vue) {
        vueApp=new Vue({
            el: "#app",
            data: {
                where:{
                    nickname:'',
                    phone:'',
                    office:0,
                    rank:0,
                },
                table:1,
　　　　　　　　}
　　　　}）
}）

　　普通點擊事件直接用vue的方法：

methods: {

　　getSkill:function(){

    　　console.log(this.skill,7777)
　　},

}

　　動態生成HTML，在頁面寫入需要添加的:

<div id="popo" style="display: none">
    <div class="add-popo-card" >
　　　　<div id="getSkill"></div> 
　　</div> 
</div>

帶ID的元素不會動態添加進去 只會引用class="add-popo-card"元素，同樣方法也是寫在vue中，這個是彈出層

setTop: function(){
                  var that = this;
                  //多視窗模式，層疊置頂

                  layer.open({
                    type: 1 //此處以iframe舉例
                    ,title: '添加技術'
                    ,area: ['588px', '560px']
                    ,shade: 0
                    ,maxmin: false
                    ,offset:'auto'
                    ,content:$('#popo').html()  //此處為插入代碼塊
                    ,btnAlign: 'l'
                    ,end: function(){ //無論是關閉還是確認，都執行
                        that.skillName=''
                        that.skillUrl=''
                        that.skillDetail=''

                    }
                  });

                }

jq方法引用vue方法的關聯，可以直接修改data內數據：（動態插入的元素綁定點擊事件方法，點擊事件不能直接寫在添加元素上的，引用此ID綁定方法）

$(document).on('click','#getSkill',function(){
    vueApp.getSkill()
　　
})

翻譯

搜索

複製