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>