vue项目使用研究1
在windows上安装了npm vue-cli之后，创建vue项目。
用pycharm打开
vue form表单最简单提交方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>vue</title>
</head>
<body>
<div id="app">
<form @submit.prevent="submitPost">
<input type="text" name="name">
<input type="password" name="pass">
<div>
<input type="checkbox" name="ischeckbox">
<input type="radio" name="isradio">
<div>
<input type="mail" name="mail">
<div>
<input type="file" name="img">
</div>
</div>
</div>
<input type="submit" value="提交">
</form>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
submitPost(event) {
const formData = new FormData(event.target)
for (let [a, b] of formData) {
console.log('所有表单填写的内容：'+ a, b);
}
}
}
});
</script>
</body>
</html>
获取到表单数据就可以用aoxis提交请求数据了
</tbody>
</table>
</div>
<div id="app">
<form action="/jisuantijiao2/" @submit.prevent="qingqiushuju" method="post">
<div style="position: relative;display: inline" >
<input id="xuanze" type="text" value="-------请选择-------" style="border: #0000FF solid 1px">
<div id="duoxuan" style="border: #0000FF solid 1px;display: none;position: absolute;z-index: 9999;text-align: left;left: 20px;background-color: darkgray;">
<input type="checkbox" name="ECS-CPU-A-b89f" value="ECS-CPU-A-b89f">ECS-CPU-A-b89f <br>
<input type="checkbox" name="ECS-CPU-A-f8ed" value="ECS-CPU-A-f8ed">ECS-CPU-A-f8ed <br>
<input type="checkbox" name="ECS-GPU-A-c37a" value="ECS-GPU-A-c37a">ECS-GPU-A-c37a<br>
<input type="checkbox" name="ECS-IO11-A-aaff" value="ECS-IO11-A-aaff">ECS-IO11-A-aaff <br>
<input type="checkbox" name="MongoDB" value="MongoDB">云数据库MongoDB<br>
<input type="checkbox" name="Redis" value="Redis">云数据库Redis<br>
<input type="checkbox" name="RDS" value="RDS">云服务器RDS <br>
<input type="checkbox" name="Odps" value="Odps">大数据计算Odps<br>
<input type="checkbox" name="DRDS" value="DRDS">实时计算blink<br>
<input type="checkbox" name="blink" value="blink">分布式数据库DRDS<br>
</div>
</div>
<input type="submit" value="提交">
{# <button @click="qingqiushuju()">提交</button>#}
</form>
<table>
<tr class='tabTh'>
<td>云产品类型</td>
<td>CPU总核数</td>
<td>CPU已分配</td>
<td>CPU分配率</td>
<td>内存总数</td>
<td>内存已分配</td>
<td>内存分配率</td>
<td>均衡比</td>
<td>操作</td>
</tr>
<tr v-for="(value,index) in res" :key="index" >
<td>{[ value.clustername ]}</td>
<td style="background-color: grey;">{[ value.cpu_sum ]}</td>
<td><input id="cpu_allocated" type="text" v-model="value.cpu_allocated">{[ value.cpu_allocated ]} </td>
<td style="background-color: goldenrod;">{[ value.cpu_distribution_rates ]}</td>
<td style="background-color: grey;">{[ value.mem_sum ]}</td>
<td><input id="mem_allocated" type="text" v-model="value.mem_allocated"></td>
<td style="background-color: goldenrod;">{[ value.mem_distribution_rates ]}</td>
<td><input id="balance" type="text" v-model="value.balance"></td>
<td><button class="success">提交计算</button></td>
</tr>
</table>
</div>
</div>
</div>
</script>
<script type='text/javascript'>
let vm = new Vue({
el:'#app',
delimiters:['{[', ']}'],
data(){
return{
'res':'',
}
},
created() {
},
methods:{
qingqiushuju(event){
$('#duoxuan').css('display','none');
let formData=new FormData(event.target)
console.log(formData);
let mydata= []
for (let [a, b] of formData) {
mydata.push(a)
console.log('所有表单填写的内容：'+ a, b);
}
console.log(mydata);
axios.post('/jisuantijiao2/',{data1:mydata})
.then(res=>{
console.log(res.data);
this.res=res.data
}).catch(function (error) {
console.log(error);
})
}
}
})
</script>
Vue如何获取当前点击元素？
获取父元素、子元素、兄弟元素呢？
通过帮定点击事件：
例如： <button class="shanchu" @click="shanchu($event)">删除</button>
获取元素方法总结：
**
//当前点击的元素
e.target //绑定事件的元素
e.currentTarget //获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML //获得点击元素的第一个子元素
e.currentTarget.firstElementChild //获得点击元素的下一个元素
e.currentTarget.nextElementSibling //获得点击元素中id为string的元素
e.currentTarget.getElementById("string") //获得点击元素的class属性
e.currentTarget.getAttributeNode('class') // 获得点击元素的父级元素
e.currentTarget.parentElement // 获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML**
根据上面，我们可以看到使用两次获取父元素，我们可以看到控制台打印的是点击元素的父元素的父元素对象。
使用for循环中生成的变量作为标签自定义的属性值
循环生成的是集群名称变量，将循环中的变量设置为某个标签的属性值作为标记使用
成功生成属性值
vue项目使用研究1的更多相关文章
- vue-修改vue项目运行端口号
一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...
- Cordova打包vue项目生成Apk （解决cordova build android抛出的zip问题）
最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染
今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...
- vue项目iframe的传值问题
前言 项目需要,我需要引入一个已经封装好的浏览器插件.插件只能以html的方式调用, 所以.我把插件的使用封装了一个html页面.vue项目则利用iframe的方式引入. 到这里我就遇到了一个问题,那 ...
- 如何加快Vue项目的开发速度
如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...
- vue 项目页面刷新router-view控制
vue项目开发过程中,需要在页面提交表单信息之后清空还原,即恢复页面初始状态,第一想法就是对当前页面刷新,重新加载. 想起location.reload()方式和this.$router.go(0)方 ...
- vue-cli快速构建Vue项目
vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...
随机推荐
- 许北林：我为什么加入OpenHarmony生态？又为什么要做“启航KP”开发套件？
许北林 软通动力 资深项目经理 在全球开源趋势下,中国正逐渐成为全球开源软件的主要使用者和核心贡献者.今天我们来认识一位接触 OpenHarmony 不到一年,便带领团队成功开发出一款"启航 ...
- 为什么 L1 正则化能做特征选择而 L2 正则化不能
假设我们的模型只有一个参数 \(w\),损失函数为 \(L(w)\),加入 L1 和 L2 正则化后的损失函数分别记为 \(J_1(w), J_2(w)\): \[\begin{gathered} J ...
- Linux系统 g++ 链接 libopencv_world.a 静态库编译程序
编译opencv,我是直接编译成 libopencv_world.a 一个文件 正常链接编译,容易报错:main: hidden symbol `opj_read_header' isn't def ...
- C++ 递归与面向对象编程基础
C++ 递归 递归是一种使函数调用自身的技术.这种技术提供了一种将复杂问题分解为简单问题的方法,从而更容易解决问题. 递归可能有点难以理解.理解其工作原理的最佳方法是通过实验来尝试. 递归示例 将两个 ...
- docker搭建kafka集群实践
前言 本文主要介绍了如何通过docker搭建一个可以用于生产环境的kafka集群. kafka集群使用了3个节点,依赖zookeeper进行协调,所以会同时搭建一套3节点的zookeeper集群. 准 ...
- Ubuntu下部署gitlab
1.安装gitlab服务 1.安装依赖 在ubuntu下使用快捷键ctrl+alt+T打开命令行窗口,然后运行下面命令 sudo apt update sudo apt-get upgrade sud ...
- 云服务器ECS共享标准型S6全新发布，行业内最具性价比
近日,阿里云弹性计算发布全新一代云服务ECS共享标准型S6,性能相对上一代实例提升15%以上,价格相对上一代最高降低42%,是目前国内云计算厂商更能够提供的最具性价比的云服务器产品.一些中小型网站.轻 ...
- DataWorks搬站方案：Azkaban作业迁移至DataWorks
简介: DataWorks迁移助手提供任务搬站功能,支持将开源调度引擎Oozie.Azkaban.Airflow的任务快速迁移至DataWorks.本文主要介绍如何将开源Azkaban工作流调度引擎中 ...
- 数仓架构的持续演进与发展 — 云原生、湖仓一体、离线实时一体、SaaS模式
简介: 数据仓库概念从1990年提出,经过了四个主要阶段.从最初的数据库演进到数据仓库,到MPP架构,到大数据时代的数据仓库,再到今天的云原生的数据仓库.在不断的演进过程中,数据仓库面临着不同的挑战. ...
- [Linux] 日志管理: 日志轮替 logrotate
日志轮替包含了 "日志切割" 和 "删除旧的保留新的" 功能. 后缀 xx.1 xx.2 这种规则的一般出现的也比较多,目的系统是防止日志被覆盖. 查看详细配置 ...