Vue，jQuery混用，Element-UI，实际案例参考

别问我为啥知道，我裂了环境操作系统：CentOS7jQuery：2.2.3 下载官网：https://jquery.com/Element-UI：2.13.0 下载 index.js和 index.css：https://unpkg.com/browse/element-ui@2.13.0/lib/Vue.js:2.6.11 下载:https://vuejs.org/v2/guide...

Love丶伊卡洛斯

2733人浏览 · 2020-02-15 14:17:10

Love丶伊卡洛斯 · 2020-02-15 14:17:10 发布

别问我为啥知道，我裂了
！！！！！！！！！！！温馨提示，千万别这么写，别问为什么，有毒！！！！！！！！！！！

环境

操作系统：CentOS7
jQuery：2.2.3 下载官网：https://jquery.com/
Element-UI：2.13.0 下载 index.js和 index.css：https://unpkg.com/browse/element-ui@2.13.0/lib/
在这里插入图片描述

Vue.js:2.6.11 下载:https://vuejs.org/v2/guide/installation.html
在这里插入图片描述

官方文档

https://element.eleme.cn/#/zh-CN/component/installation
在这里插入图片描述

实际效果

在这里插入图片描述

相关代码

test.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/bootstrap.min.js"></script>
	
	<!-- 这个element_ui的js和css就是Element-UI下载来的index.js和index.css改名 -->
	<link href="css/element_ui.css" rel="stylesheet">
	<script src="js/vue.js"></script>
	<script src="js/element_ui.js"></script>
</head>
<body>
	<div>
		<input type="button" value="btn"  onclick="btn();">
	</div>
	
	<div id="app">
		<el-row>
		  <el-button>默认按钮</el-button>
		  <el-button type="primary">主要按钮</el-button>
		  <el-button type="success">成功按钮</el-button>
		  <el-button type="info">信息按钮</el-button>
		  <el-button type="warning">警告按钮</el-button>
		  <el-button type="danger">危险按钮</el-button>
		</el-row>
	</div>
	<script>
		//这步是关键
		new Vue().$mount('#app');
	</script>
</body>
</html>

分析（个人）

选择官方文档中的一个需要的组件，例：按钮
在这里插入图片描述
打开官方提供的在线运行，进入新页面

codepen，你可以在里面进行调试

可以发现这里已经写得很清楚了，HTML，CSS，JS。
我们把其复制到我们的代码中。
在id为 app 的div中的元素，

并由js进行定义，才能有效果。
在这里插入图片描述

简单测试一下

注释掉js部分后，样式就消失了
在这里插入图片描述

拓展

在这里插入图片描述
代码如下

test.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/bootstrap.min.js"></script>
	
	<!-- 这个element_ui的js和css就是Element-UI下载来的index.js和index.css改名 -->
	<link href="css/element_ui.css" rel="stylesheet">
	<script src="js/vue.js"></script>
	<script src="js/element_ui.js"></script>
</head>
<body>
	<div>
		<input type="button" value="btn"  onclick="btn();">
		<input id="abc" type="text" value="" />
	</div>
	
	<div id="app">
		<el-row>
		  <el-button>默认按钮</el-button>
		  <el-button type="primary">主要按钮</el-button>
		  <el-button type="success">成功按钮</el-button>
		  <el-button type="info">信息按钮</el-button>
		  <el-button type="warning">警告按钮</el-button>
		  <el-button type="danger">危险按钮</el-button>
		</el-row>
	</div>
	<div id="app1">
		<el-button type="text" @click="open">点击打开 Message Box</el-button>
	</div>
	<script>
		//这步是关键
		new Vue().$mount('#app');
		
		var Main = {
			methods: {
				open() {
					this.$alert('这是一段内容', '标题名称', {
						confirmButtonText: '确定',
						callback: action => {
							this.$message({
								type: 'info',
								message: `action: ${ action }`
							});
						}
					});
					
					document.getElementById("abc").value = "js";
				}
			}
		};
		var Ctor = Vue.extend(Main);
		new Ctor().$mount('#app1');
	</script>
</body>
</html>

补充说明

var Main = {
	methods: {
		open() {
			this.$alert('这是一段内容', '标题名称', {
				confirmButtonText: '确定',
				callback: action => {
					this.$message({
						type: 'info',
						message: `action: ${ action }`
					});
				}
			});
			
			document.getElementById("abc").value = "js";
		}
	}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app1');

也可以写成

var app = new Vue({
	el: '#app1',
	methods: {
		open() {
			this.$alert('这是一段内容', '标题名称', {
				confirmButtonText: '确定',
				callback: action => {
					this.$message({
						type: 'info',
						message: `action: ${ action }`
					});
				}
			});
			
			document.getElementById("abc").value = "js";
		}
	}
});

参考：将vue和element-ui写在一个html里面方便调试（小白篇）

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^