首页 前端知识 在HTML中 vue和jquery混合使用,相互调数据

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

2024-04-12 20:04:57 前端知识 前端哥 558 53 我要收藏
<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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4802.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!