jQuery 与 vue.js 可以混用.
有时候只要想到要用的 vue.JS 的时候就会惯性的想起用 vue-cli 手脚架搭建一个项目, 但是有时候的业务场景并不适合用 vue-cli 手脚架, 这个时候使用 vue+jQuery 混合使用, 把他们的优点结合起来使用会大大提升开发效率.
vue+jQuery 应该如何使用呢?
1, 首先引入 vue 文件 (cdn 或者下载到本地都行), 参考 vue 官方链接 (https://cn.vuejs.org/v2/guide/installation.html)
2, 创建一个 vue 实例, 因为每个 vue 应用都是通过创建一个 vue 实例开始的
例:
- var vm = new Vue({
- el:'#app', // 实例化对象
- data:{
- wordCardStyles:[] // 要存放的数据
- },
- methods:{
- // 存放实例方法
- }
- })
3,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 方法
- },
- }
- })
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17490.html