首页 前端知识 jQuery 老项目引入vue,elementui (vue3 elementplus)

jQuery 老项目引入vue,elementui (vue3 elementplus)

2024-01-29 13:01:21 前端知识 前端哥 531 774 我要收藏

背景

juery是一个广泛使用的JavaScript库,用于简化DOM操作、事件处理、动画效果等常见任务。

Vue是一个现代化的JavaScript框架,专注于构建可复用的组件和实现响应式数据绑定。在开发jQuery项目时,我们常常需要在JavaScript代码中处理大量的DOM操作,这给维护和更新带来了不少麻烦。而Vue提供了更加优秀的组件化和响应式数据绑定机制,为解决这些问题提供了一种全新的思路。

//以jQuery为例
$(function() {
//获取页面元素和绑定事件
var $button = $('#my-button');
$button.on('click', function() {
var $content = $('#my-content');
$content.slideToggle();
});
});
//使用Vue重构代码
Vue.component('my-component', {
template: '#my-template',
data: function() {
return {
showContent: false
};
},
methods: {
toggleContent: function() {
this.showContent = !this.showContent;
}
}
});
//HTML代码

将原本使用jQuery实现的交互效果重构为Vue组件,并使用Vue提供的指令和模板语法来实现显示和隐藏内容的效果。可以看到,Vue组件的代码结构更加清晰和易于维护,将DOM操作以及事件处理逻辑封装在了组件中,使得整个应用的代码结构变得更加清晰和易于维护。

除了简化DOM操作和提供更加优秀的组件化机制之外,Vue还提供了一些其他的特性,如响应式数据绑定、模板渲染、路由管理等,这些特性使得Vue在构建大型、复杂的Web应用时也可以发挥其优秀的表现。

总之,Vue和jQuery在Web开发中都有自己的优点和适用场景。当我们在开发jQuery项目时,如果发现DOM操作逻辑过于复杂、JS代码结构混乱、维护成本较高等问题,可以考虑使用Vue来优化或者重构代码。而如果业务逻辑相对简单,DOM操作较为简单,或者项目已经成型,引入Vue反而会增加开发和维护成本,那么还是继续使用jQuery更为合适。

参考:https://www.yzktw.com.cn/post/1244916.html

同时引入vue, Elementui

记引入elementui的前提是引入vue,引入vue就得有挂载 所以vue的基本“样子”得有,需要new Vue()

1.老项目指只有jquery, html,css,js ,freemarker 等的原始项目。

2.引入ElementUI步骤:

a. 进入elementUI官网 CDN处

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

下载 element-ui.js 和 element-ui.css 以及 字体库 有2个(icon主要是UI库中的一些小图标)

3.进入Vue 官网 下载 vue.js

Vue.js 最新官方下载地址与项目导入_vue.js下载_Lan.W的博客-CSDN博客

4.本地引入 (可以引用本地下载好的文件)

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
<!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

字体库路径特别注意与css文件同文件夹 fonts下面

5.使用 new Vue({}) 创建Vue实例开始使用。

6.可以使用mixins 。

补充:

jq中如何调用vue中的方法来

vue:

var app = new Vue({

    el:'#main',

    data:{},

    method:{

        fn:function(){

        }

}

  

jq:

$('#main').click(function(){

    app.fn();

VUE与jquery方法相互调用

拿起html的时候,在数据处理上,疯狂怀念数据双向绑定,vue又成了我的必选项,但是有些业务场景其实并不适用vue,所以最终技术选型为vue+jquery混合使用,结合两边的优点,大大提高开发效率。

vue和jquery同时引入的时候,jquery操作一定要放在vue后面,要等DOM渲染完成,jquery才能进行DOM事件操作。

那么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://blog.csdn.net/qq_34514388/article/details/117717300

总结:

公司旧项目,新增的模块页面,都是在index.html页面,用<iframe/>容器来加载展示。

新页面的话,很容易通过引入vue,elementui脚本就可以了。旧的页面就先不必改造了。

html

用Vue2的话,要用element ui的包

<!-- 引入样式 -->

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

用VUE3, 那element 要用:element Plus.

UNPKG - element-plus

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="https://unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="https://unpkg.com/element-plus"></script>
</head>

jquery,vue3 ,element plus之间相互调用参考

Html 引入element UI + vue3 报错Failed to resolve component: el-button-CSDN博客

jquery的项目,html页面使用vue3 +element Plus-CSDN博客

相关案例

jquery的项目,html页面使用vue3 +element Plus的简单入门使用-CSDN博客

html 中vue3 的setup里调用element plus的弹窗 提示-CSDN博客

 html页面直接使用elementui Plus时间线 + vue3-CSDN博客

转载请注明出处或者链接地址:https://www.qianduange.cn//article/751.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!