background：
juery is a widely used JavaScript library used to simplify common tasks such as DOM manipulation, event handling, animation effects, etc.
Vue is a modern JavaScript framework focused on building reusable components and implementing responsive data binding. When developing jQuery projects, we often need to handle a large number of DOM operations in JavaScript code, which brings a lot of trouble to maintenance and updates. Vue provides a more excellent componentization and responsive data binding mechanism, providing a new way of thinking to solve these problems.
//以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代码Reconstruct the interactive effects originally implemented using jQuery into Vue components, and use the instructions and template syntax provided by Vue to achieve the effect of showing and hiding content. It can be seen that the code structure of the Vue component is clearer and easier to maintain. DOM operations and event processing logic are encapsulated in the component, making the code structure of the entire application clearer and easier to maintain.
In addition to simplifying DOM operations and providing a better componentization mechanism, Vue also provides some other features, such as responsive data binding, template rendering, route management, etc. These features make Vue useful in building large and complex web applications. It can also display its excellent performance.
In short, both Vue and jQuery have their own advantages and applicable scenarios in web development. When we develop jQuery projects, if we find that the DOM operation logic is too complex, the JS code structure is confusing, and the maintenance cost is high, we can consider using Vue to optimize or reconstruct the code. And if the business logic is relatively simple, the DOM operation is relatively simple, or the project has already taken shape, and introducing Vue will increase development and maintenance costs, then it is more appropriate to continue to use jQuery.
参考：https://www.yzktw.com.cn/post/1244916.html
At the same time, vue and Elementui are introduced
Remember that the prerequisite for introducing elementui is to introduce vue.Introducing vue requires mounting, so the basic "look" of vue must be present, and new Vue() is required
1. Old projects refer to original projects that only have jquery, html, css, js, freemarker, etc.
2.Introduce ElementUI steps:
a. Enter elementUI official website CDN
<!--Introduce styles --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!--Introduce component library --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
Download element-ui.js and element-ui.css as well as font library. There are 2 (icons are mainly some small icons in the UI library)
3. Enter the Vue official website and download vue.js
Vue.js latest official download address and project import_vue.js download_Lan.W's blog-CSDN blog
4. Local import (you can quote locally downloaded files)
<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>
Pay special attention to the font library path in the same folder as the css file, under fonts
5. Use new Vue({}) to create a Vue instance and start using it.
6. Mixins can be used.
Replenish:
How to call methods in vue in jq
|
|
VUE and jquery methods call each other
When I picked up HTML, I missed the two-way binding of data crazily when it came to data processing. Vue became my must-have option again, but some business scenarios are actually not suitable for Vue, so the final technology selection was a mixture of Vue+jquery, combined with The advantages of both sides greatly improve development efficiency.
When vue and jquery are introduced at the same time, jquery operations must be placed behind vue. Only after DOM rendering is completed can jquery perform DOM event operations.
So how should vue+jquery be used?
1. First introduce the vue file (cdn or download it locally), refer to the vue official link https://cn.vuejs.org/v2/guide/installation.html
2. Create a vue instance, because every vue application starts by creating a vue instance
var vm = new Vue({
el:'#app', //实例化对象
data:{
wordCardStyles:[]
//要存放的数据
},
methods:{
//存放实例方法
}
})
3. Call each other between vue and jquery
For example, now I use jq to write a method to get data from the background, and assign the obtained data to the vue object. subobject
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实例里面的一个对象，然后把请求结果赋值给这里对象
}
}
})
}
So how to call the external jq method in the vm instance?
Just write the method directly in the vm method and call it
var vm = new Vue({
el:'#app', //实例化对象
data:{
wordCardStyles:[] //要存放的数据
},
methods:{
//存放实例方法
changeModel(event){
console.log(event)
getMainTabelData() //外部的jq方法
},
}
})
Original link: https://blog.csdn.net/qq_34514388/article/details/117717300
Summarize:
For the company's old projects, the newly added module pages are all on the index.html page, using the <iframe/> container to load and display them.
For a new page, it is easy to introduce vue and elementui scripts. There is no need to modify the old pages yet.
html
If you use Vue2, you need to use the element ui package.
<!-- 引入样式 -->
<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>
If you use VUE3, then use element Plus: 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 call each other for reference
jquery project, html page uses vue3 +element Plus-CSDN blog
Related cases
jquery project, a simple introduction to using vue3 + element Plus for html pages - CSDN Blog
Tips for calling element plus pop-up window in vue3 setup in html - CSDN Blog
The html page directly uses elementui Plus timeline + vue3-CSDN blog