在HTML中 vue和jquery混合使用，相互调数据

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>复制

1:创建VUE实例

<script type="text/javascript">
  var vm = new Vue({
      el:'#app',  //实例化对象
      data: function() {
                return {　         
      	             newArry:[{name:100,num:2145},{name:100,num:2145}] //数组
      	        }
      },     
      methods:{  
      	//实例方法编辑区   
      } 
  })
</script>复制

jquery和vue之间互相调用(模拟接口拿到数据)

<script type="text/javascript">
  console.log(vm.newArry) //拿到vue实例中定义的newArry数组 [{name:100,num:2145},{name:100,num:2145}]
  function getXzcfxq(){
    $.ajax({
      type: "get",
      url: url + 'ltiesList',
      data: {},
      success: function (data) {
        vm.newArry = data.data.list //这里的vm就是上面的实例，newArry是vm实例里面的数组，然后把请求结果赋值给vm里面定义的数组newArry
      };
    });
  </script>复制

2:vue如何调用外部的jq方法呢？
直接把方法写在vm的methods方法里调用

<script type="text/javascript">
  var vm = new Vue({
      el:'#app',  //实例化对象
      data: function() {
                return {　         
      	             newArry:[{name:100,num:2145},{name:100,num:2145}] //数组
      	        }
      },       
      methods:{  
      	getNewData(this.newArry)   
      } 
  })
  //jq定义一个方法
  function getNewData(newArry){
     console.log(newArry);//这里是newArry是从vue实例vm方法中getNewData(this.newArry)传来的形参
  }
</script>复制

3:jq如何调用外部的vue方法呢？

<script type="text/javascript">
  var vm = new Vue({
      el:'#app',  //实例化对象
      data: function() {
                return {　         
      	             newArry:[{name:100,num:2145},{name:100,num:2145}] //数组
      	        }
      },       
      methods:{  
      	getArry(){
      	   console.log(this.newArry)
        }
      } 
  })
  //jq调用vm里面的methods方法
  $('#app').click(function(){
     vm.getArry();
  })
</script>复制