vue 和 jquery混合使用
2024-09-01 19:41:10
有时候只要想到要用的 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:,
pageSize:,
styleType:''
},
success: function (result) {
if (result.code == '') {
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方法
},
}
})
最新文章
- Setting Up KeePass For Centos 6
- 谷歌input框黄色背景问题
- Python 3.5 连接Mysql数据库(pymysql 方式)
- Ubuntu上安装Minecraft服务器
- 禁随意改root密码
- Linux的别名使用
- 《Linux设备驱动程序》 笔记2
- Car immobilizer hacking
- Thread的第三天学习
- C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部【转载】
- Quartz定时任务学习(四)调度器
- jquery 点点滴滴小记
- c语常用算法库(1)
- Javascript的内容
- RabbitMQ学习笔记(二) 工作队列
- Python解析Xmind工具
- vue全局API
- 处理:“ORA-28002: the password will expire within 7 days”的问题
- ckeditor5 增加居中alignment
- epoll的高效实现原理
热门文章
- 安装k8s出现 Failed to list *api.Node: Get http://192.168.144.131:8080...: dial tcp 192.168.144.131:8080: getsockopt: no route to
- web开发一些资源的在线引用地址
- C# byte[]转string, string转byte[] 的四种方法
- 更改mysql数据库默认的字符集(编码方式)
- iptables详解(3):增删改存
- yii2 gii开启
- C语言中二维数组如何申请动态分配内存
- 1、json背景
- BZOJ 3262: 陌上花开 (cdq分治,三维偏序)
- Java入门笔记 06-常用类