vue基础学习+django后端+apache部署

1.基础学习

学习传送门

2.vue写js

2.1 语法

1.v-on监听事件
2.@+事件，其实就是v-on缩写
eg:
<input type=“button” value=“scrapy” @click=“exportToScrapy()”>;
<input type=“button” value=“scrapy” @mouseover=“exportToScrapy()”>;
注意：js代码一定写到 methods 里才起作用

2.2 点击事件

2.2.1 代码

<template>
	<div class="tableBackground">
		<div class="ipShow">导出显示...</div>
		<input type="button" value="scrapy" @click="exportToScrapy()" style="margin-bottom: 20px;margin-right: 20px">
		<input type="button" value="requests" @click="exportToRequests()" style="margin-bottom: 20px;margin-right: 20px">
		<input type="button" value="全选/取消" @click="checkAll()" style="margin-bottom: 20px" name="checkAll" class="all">
		<div class="table">
			<!--此行代码用于，控制列的样式。-->
			<div class="table-column-group">
				<div class="table-column-click"></div>
				<div class="table-column"></div>
				<div class="table-column"></div>
				<div class="table-column"></div>
				<div class="table-column"></div>
				<div class="table-column"></div>
				<div class="table-column"></div>
				<div class="table-column"></div>
			</div>
			<!--如果不写上一个div, 也可以把样式写在以下div里。 -->
			<div class="table-header-group">
				<ul class="table-row">
					<li class="table-cell-click"></li>
					<li class="table-cell">id</li>
					<li class="table-cell">ip</li>
					<li class="table-cell">port</li>
					<li class="table-cell">匿名度</li>
					<li class="table-cell">类型</li>
					<li class="table-cell">位置</li>
					<li class="table-cell">最后验证时间</li>
				</ul>
			</div>
			<div class="table-row-group" v-for="(onedata,index) in proxiesData" v-bind:key="index">
				<ul class="table-row">
					<li class="table-cell-click"><input type="checkbox" name="selected" style="zoom:140%"></li>
					<li class="table-cell">{{index+1}}</li>
					<li class="table-cell">{{onedata.ip}}</li>
					<li class="table-cell">{{onedata.port}}</li>
					<li class="table-cell">{{onedata.anonymous}}</li>
					<li class="table-cell">{{onedata.type}}</li>
					<li class="table-cell">{{onedata.location}}</li>
					<li class="table-cell">{{onedata.verifyTime}}</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	var $ = require("jquery");
	export default {
		name: "proxiesTable.vue",
		data() {
			return {
				proxiesData:{},
			}
		},
		methods: {
			getData: function (vueobj) {
				$.ajax(
					{
						//向url获取json数据
						url: this.globalInfo.server_url + "/jsonProxies/proxiesData.json",
						headers: {
							"Content-Type": "application/json;charset=utf8",
						},
						type: "get",
						async: false,
						success: function (data) {
							//console.log(data);
							// 解释数据
							vueobj.proxiesData = data["data"];
							//console.log(vueobj.epidemicTitle);
							// console.log("这是控制台");
							// console.log(vueobj.eastmoneyData.datas);
						},
						error: function (xhr, status, error) {
							console.log("错误1：" + xhr);
							console.log("错误2：" + status);
							console.log("错误3：" + error);
						}
					}
				);
			},
			exportToScrapy: function () {
				var obj = document.getElementsByName("selected");
				var check_val = [];
				for (var k = 0; k < obj.length; k++) {
					if (obj[k].checked) {
						var ip = obj[k].parentNode.nextSibling.nextSibling.textContent;
						var port = obj[k].parentNode.nextSibling.nextSibling.nextSibling.textContent;
						var type = obj[k].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.textContent;
						var res = "'" + type + "://" + ip + ":" + port + "'";
						check_val.push(res);
					}
				}
				res = "[" + check_val + "]";
				var show = document.getElementsByClassName("ipShow")[0];
				if (res != "[]") {
					show.textContent = res;
				} else {
					show.textContent = "导出显示...";
				}
			},
			exportToRequests: function () {
				var obj = document.getElementsByName("selected");
				var check_val = [];
				for (var k = 0; k < obj.length; k++) {
					if (obj[k].checked) {
						var ip = obj[k].parentNode.nextSibling.nextSibling.textContent;
						var port = obj[k].parentNode.nextSibling.nextSibling.nextSibling.textContent;
						var type = obj[k].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.textContent;
						var res = "{'http':'" + type + "://" + ip + ":" + port + "',"+"'https':'" + type + "://" + ip + ":" + port + "'}";
						check_val.push(res);
					}
				}
				res = "[" + check_val + "]";
				var show = document.getElementsByClassName("ipShow")[0];
				if (res != "[]") {
					show.textContent = res;
				} else {
					show.textContent = "导出显示...";
				}
			},
			checkAll: function () {
				var obj = document.getElementsByName("selected");
				var all = document.getElementsByClassName("all")[0];
				if (all.name == "checkAll") {
					all.name = "quitAll";
					for (var k = 0; k < obj.length; k++) {
						obj[k].checked = true;
					}
				} else {
					all.name = "checkAll";
					for (var i = 0; i < obj.length; i++) {
						obj[i].checked = false;
					}
				}

			},
		},
		mounted() {
			this.getData(this);
		}
	}
</script>

<style scoped>
	ul {
		list-style: none;
	}

	.tableBackground {
		width: 80%;
		margin: 0 auto;
		margin-top: 5%;
	}

	.table {
		/*此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。*/
		display: table;
		/*border-collapse:collapse;*/
		border-collapse: separate;
		border: 1px solid #ccc;
	}

	.table-caption {
		/*此元素会作为一个表格标题显示（类似 <caption>）*/
		display: table-caption;
		margin: 0;
		font-size: 16px;
	}

	.table-header-group {
		/*此元素会作为一个或多个行的分组来显示（类似 <thead>）。*/
		display: table-header-group;
		background: #eee;
		font-weight: bold;
	}

	.table-row-group {
		/*此元素会作为一个或多个行的分组来显示（类似 <tbody>）。*/
		display: table-row-group;
	}

	.table-footer-group {
		/*此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。*/
		display: table-footer-group;
	}


	.table-row {
		/*此元素会作为一个表格行显示（类似 <tr>）。*/
		display: table-row;
		height: 46px;
		line-height: 46px;
	}

	.table-cell {
		/*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
		display: table-cell;
		padding: 0 5px;
		border: 1px solid #ccc;
	}

	.table-cell-click {
		display: table-cell;
		padding:0px 8px;
		border: 1px solid #ccc;
	}

	.table-row-group .table-row:hover,
	.table-footer-group .table-row:hover {
		background: #f6f6f6;
		color: green;
		font-weight: bold;
	}

	.table-column-group {
		/*此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。*/
		display: table-column-group;
	}

	.table-column {
		/*此元素会作为一个单元格列显示（类似 <col>）*/
		display: table-column;
		white-space:nowrap;
	}

	.table-column-click {
		display: table-column;
		width: 10px;
	}

	.ipShow {
		padding: 10px;
		background-color: #fff;
		margin-top: 20px;
		margin-bottom: 20px;
		width: 100%;
		height: 150px;
		overflow-y: scroll;
		word-break: break-all;
		word-wrap: break-word;
		font-size: 18px;
	}
</style>

2.2.2 效果

2.3 vue动态获取界面高度

<template>
	<div class="sou" :style="contentStyleObj"></div>
</template>

<script>
	export default {
		name: "videoIndex",
		data() {
			return {
				contentStyleObj: {
					height: ''
				}
			}
		},
		methods: {
			getHeight: function () {
				this.contentStyleObj.height = window.innerHeight - 68 + 'px';
			}
		},
		mounted() {
			this.getHeight();
		}
	};
</script>

<style scoped>

</style>