vue与jquery混用_vue怎么使用jquery

vue与jquery混用_vue怎么使用jquery有时候只要想到要用的vue.js的时候就会惯性的想起用vue-cli手脚架搭建一个项目,但是有时候的业务场景并不适合用vue-cli手脚架,这个时候使用vue+jquery混合使用,把他们的优点结合起来使用会大大提升开发效率。那么vue+jquery应该如何使用呢?一、首先引入vue文件(cdn或者下载到本地都行),参考vue官方连接https://cn.vuejs.o…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

 有时候只要想到要用的 vue.js 的时候就会惯性的想起用vue-cli手脚架搭建一个项目,但是有时候的业务场景并不适合用vue-cli手脚架,这个时候使用vue+jquery混合使用,把他们的优点结合起来使用会大大提升开发效率。

那么vue+jquery应该如何使用呢?

一、首先引入vue文件(cdn或者下载到本地都行),参考vue官方连接  https://cn.vuejs.org/v2/guide/installation.html

二、创建一个vue实例,因为每个vue应用都是通过创建一个vue实例开始的

例:

var vm = new Vue({
      el:'#app',  //实例化对象
      data:{
    
    
  
wordCardStyles:[] //要存放的数据
},
methods:{
//存放实例方法
}
})

三、vue和jquery之间互相调用

例如现在用jq写了一个方法,从后台获取数据,并且把获取到的数据要赋值给vue对象里的子对象

function getStyleSheetInfo(){
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: serverUrl + 'api/styleSheet/findStyleSheetPage',
        data: {
            pageNumber:1,
            pageSize:99,
            styleType:'582941287137673216'
        },
        success: function (result) {
            if (result.code == '0000') {
                vm.wordCardStyles = result.data.list //这里的vm就是代表上面的实例,wordCardStyles是vm实例里面的一个对象,然后把请求结果赋值给这里对象
            }
        }
    })
}

那么vm实例里面如何调用外部的jq方法呢?

直接把方法写在vm的方法里调用即可

var vm = new Vue({
      el:'#app',  //实例化对象
      data:{
           wordCardStyles:[]  //要存放的数据  
      },
      methods:{
               //存放实例方法 
             changeModel(event){
                console.log(event)
                 getMainTabelData() //外部的jq方法
            },
     }
 })

 

转载于:https://www.cnblogs.com/xxflz/p/11259462.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/183560.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 微信小程序列表页面_小程序分享跳转指定页面

    微信小程序列表页面_小程序分享跳转指定页面尽量不要用缓存去写效果展示:点击编辑,进入编辑页第一页编辑按钮:<viewclass=”bj-btn”bindtap=”redactGroup”data-id=”{{传递的id}}”>编辑</view>redactGroup方法:options.currentTarget.dataset.前面自定义的名字redactGroup(options){letid=options.currentTarget.dataset.id;…

  • Maximal Information Coefficient (MIC)最大互信息系数详解与实现「建议收藏」

    Maximal Information Coefficient (MIC)最大互信息系数详解与实现「建议收藏」MICMIC即:MaximalInformationCoefficient最大互信息系数。使用MIC来衡量两个基因之间的关联程度,线性或非线性关系,相较于MutualInformation(MI)互信息而言有更高的准确度。MIC是一种优秀的数据关联性的计算方式。本篇文章将会详细介绍MIC的算法原理,优缺点以及Python的具体实现方式,并给出一个可视化方案。互信息?互信息(Mut…

  • python 6行代码搞定图片批量重命名「建议收藏」

    python 6行代码搞定图片批量重命名「建议收藏」importpandasaspdimportosf1=pd.read_excel(‘花.xlsx’,converters={‘name’:int,’rename’:str})如下图所示,为f1。读取’花.xlsx’文件,以整型的形式读取’nama’,以文本的形式读取’rename’。name为图片原始的命名。rename为图片重命名的结果。filelist…

  • 苹果录屏gif_动态录屏

    苹果录屏gif_动态录屏作为一名优秀的前端程序员,想要输出内容,总需要制作一些动图(前端动效、功能预览、代码讲解等),接下来咱们说一下,使用Mac录屏,并转成Gif格式动图的方法:工具:Mac、QQ操作步骤:1.打开QQ(没有安装QQ的话,请自行安装)使用QQ聊天对话框中的截图功能(小剪刀),选中“录屏”功能。或者使用快捷键command+shift+A2.按照提示,选择要录屏的区域进行视频录制。如下图:…

  • jar中没有主清单属性啥意思啊_maven打jar包无主清单属性

    jar中没有主清单属性啥意思啊_maven打jar包无主清单属性在maven-assembly-plugin插件配置中添加,如下内容:maven-assembly-plugin

  • matlab怎么表示二元函数,如何用Matlab画二元函数?[通俗易懂]

    matlab怎么表示二元函数,如何用Matlab画二元函数?[通俗易懂]1、首先打开matlab。2、在matlab当前目录空2113间右键5261。41023、然后点击new->M-File。4、然后将文件命令为hello.m。5、然后双击该文1653件,输入[Rmdm]=meshgrid(15:5:50,1:10);6、然后添加f=0.034488*(Rm.^1.9400).*(10^-0.0173*dm);7、接着添加surf(Rm,dm,f)…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号