Jquery项目中使用vue.js和element-ui

过期の秋刀鱼

已于 2023-04-25 15:18:18 修改

阅读量1.9k

点赞数 3

文章标签： jquery 前端 javascript

于 2023-03-10 16:43:34 首次发布

本文链接： https://blog.csdn.net/m0_71231013/article/details/129445677

版权

大家在工作的情况中，可能会遇到之前的老项目采用jq书写，或者修改或者新增功能在jq中，原始jq的项目,代码可维护性很差,一个页面几千行jq,可维护性很差,工作量巨大，所以这个时候大家可以引入vue.js。

第一步：引入vue.js

这里给大家提供两种方式

cdn：

	<!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

本地文件导入：

<script src="./vue/vue.min.js" type="text/javascript"></script>

下载地址：

阿里云地址：阿里云盘分享https://www.aliyundrive.com/s/JwJppQFQCQB提取密码：t59b

注意：vue.js要在jq.js之前引入

第二步：创建一个vue实例

在自己的js文件代码中创建一个vue实例，测试一下

	    var app = new Vue();
	    console.log(app);

打印结果：

到这步，就说明我的vue实例创建成功可以使用vue的语法和生命周期函数了。

复制代码：

这里的el后面跟的是整个页面最大父级的id 我这边取名就叫app 大家写的时候，别忘在页面最大的父级绑定一个id，然后el的值就是大家绑定的id。这个很重要

// 使用vue实例 可以使用vue的方法和生命函数
new Vue({
    el:'#app',
    data:{
        text:'这是一个vue实例',
        list:['1','2','3']
    },
    methods:{
        initData(){
            this.list=['我爱你','你爱我','哈哈哈哈']
        }
    },
    created(){
        this.initData()
    },
});

ui引入部分教学：

效果展示：

代码教学：

1 引入css样式（注：可能需要修改字体图标引入路径）

2 引入js文件

element-ui文件地址：

阿里云网盘：

阿里云盘分享

提取码：n93y

最后希望可以帮助到大家，创作不易，请点个赞再走！

过期の秋刀鱼

关注关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Jquery项目中使用vue.js和element-ui

大家在工作的情况中，可能会遇到之前的老项目采用jq书写，或者修改或者新增功能在jq中，原始jq的项目,代码可维护性很差,一个页面几千行jq,可维护性很差,工作量巨大，所以这个时候大家可以引入vue.js。到这步，就说明我的vue实例创建成功可以使用vue的语法和生命周期函数了。在自己的js文件代码中创建一个vue实例，测试一下。注意：vue.js要在jq.js之前引入。第二步：创建一个vue实例。这里给大家提供两种方式。
复制链接

扫一扫