jquery项目引入vue和elementui遇到的坑

最新推荐文章于 2024-05-21 12:31:25 发布

原创最新推荐文章于 2024-05-21 12:31:25 发布 · 2.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #jquery

前端专栏收录该内容

1 篇文章

订阅专栏

本文详述了如何在非Vue项目中正确引入Element UI，包括CSS样式问题、Vue实例挂载、form表单事件冲突、Vue methods中函数调用难题，以及解决方法，特别关注this指向问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

切记引入elementui的前提是引入vue

常见出错的情况：
一个简单的html页面或者一个非vue的项目，想要引入elementui的组件，然后引入elementui之后发现样式不起作用，很大一个原因就是没有引入vue

为方便此处CDN引入

 <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 必须先引入vue，  后使用element-ui -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

引入vue之后发现还是不显示样式
原因：引入vue就得有挂载所以vue的基本“样子”得有

此处简单举个el-button的例子

 <div id="app">
 		<el-button type="primary">主要按钮</el-button>
 </div>

<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	    
	  }
	})
</scipt>

form标签里边自己写的按钮点击后无法调用事件

是以下这么个情况

<form>
	 <input type="text" />
	 ..............不详细写了
	 <button @click="submit()">提交</button>
</form>

点击提交按钮发现submit()方法调用不了

网上百度了半天最终原因是：
一旦写了form标签，form会有本身的提交函数，自己写的提交就调用不了

解决方法：
把form自带的提交给他关了
可以单独在<script></script>中写个函数
也可简单一点直接写在form标签里

<form onsubmit="return false;">
.....
</form>

vue的methods中函数调用不了

实际场景是这样:

//代码如下
<div id="app">	
		......
 		<el-button type="primary" @click=“method2()”>主要按钮</el-button>
 </div>

<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	   
	  },
	  mounted(){
	  	this.method1() 
	  }，
	  methods: {
			method1(){
				axios...发了一个请求 记得如果要用axios记得引入axios
			},//不详细写具体的方法了
			method2(){
				axios...发了一个请求 记得如果要用axios记得引入axios
			}
		}
	})
</scipt>


//实际情况
method2()的axios请求一直发不出去 但是method1() 就可以
说明后端接口没问题【这是当时在排错】

原因：？？？？欢迎大家评论区指点
大概就是this的指向这些问题吧
解决方法：

//在created里边加两行
<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	   
	  },
	  created(){
         var that = this
         window.method1 = that.method1
      },
	  mounted(){
	  	this.method1() 
	  }，
	  methods: {
			method1(){
				axios...发了一个请求 记得如果要用axios记得引入axios
			},//不详细写具体的方法了
			method2(){
				axios...发了一个请求 记得如果要用axios记得引入axios
			}
		}
	})
</scipt>

类似3的问题 从后端请求回来的数据赋值给this.变量页面无法渲染请求回来的数据

实际情况

//我们想要的效果是页面渲染出我们从后端请求回来的数据，但是实际上并没有
//代码如下
<div id="app">	
		{{message}}
 </div>

<script>
	var app = new Vue({
	  el: '#app',
	  data() {
         return{
              	message:""
           }
      },
      //或者这样写也行 这不影响
      data: {
		message:""
	  }
	  mounted(){
	  	this.method1() 
	  }，
	  methods: {
		method1(){
			axios.get(url.then(res => {
              this.message = res.data
            })
		}
	})
</scipt>

解决方法：

methods: {
	method1(){
		var self = this //此处this是全局
		axios.get(url.then(res => {
        	self.message = res.data //此处我们定义的self是局部
        })
 }

有些问题在之前用vue-cli搭建的前端项目中从来没有遇到过的，以上是基于在html文件中CDN引入vue时候遇到的问题

博客内容写的不够严谨和不够清晰的地方欢迎大家指正交流。