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 ...
随机推荐
- 使用Python的turtle模块绘制美丽的樱花树
引言 Python的turtle模块是一个直观的图形化编程工具,让用户通过控制海龟在屏幕上的移动来绘制各种形状和图案.turtle模块的独特之处在于其简洁易懂的操作方式以及与用户的互动性.用户可以轻松 ...
- 空间音频技术与生态发展高峰论坛成功举办，业界首个Audio Vivid创作工具花瓣三维声亮相
11月26日至27日,UWA世界超高清视频产业联盟(以下简称"UWA联盟").上海交通大学-南加州大学文化创意产业学院.华为联合举办了"互联智慧,共赢未来" 超 ...
- Godot UI线程，Task异步和消息弹窗通知
目录 前言 线程安全 全局消息IOC注入 消息窗口搭建 最简单的消息提示 简单使用 仿Element UI ElementUI 效果 简单的Label样式 如何快速加载多个相同节点 修改一下,IOC按 ...
- redis 简单整理——持久化之AOF[二十]
前言 简单介绍一下AOF. 正文 AOF(append only file)持久化:以独立日志的方式记录每次写命令, 重启时再重新执行AOF文件中的命令达到恢复数据的目的. AOF的主要作用 是解决了 ...
- 重新点亮linux 命令树————网络管理和网络配置文件[十一六]
前言 简单整理一下网络管理和网络配置文件. 正文 网络服务程序分为两种:分别是SysV和systemd service network start|stop|restart chkconfig --l ...
- nginx 均衡负载
前言 在此只介绍一些nginx的简单的负载均衡. 正文 在这篇之前,请看我的nginx反向代理这一篇,是接着上面的例子写的. 我在上个例子中,分别是两个a.html 和 b.html 现在我把他们的名 ...
- 重新整理数据结构与算法(c#)——算法套路k克鲁斯算法[三十]
前言 这个和前面一节有关系,是这样子的,前面是用顶点作为参照条件,这个是用边作为参照条件. 正文 图解如下: 每次选择最小的边. 但是会遇到一个小问题,就是会构成回路. 比如说第四步中,最小边是CE, ...
- 从零开始写 Docker(十一)---实现 mydocker exec 进入容器内部
本文为从零开始写 Docker 系列第十一篇,实现类似 docker exec 的功能,使得我们能够进入到指定容器内部. 完整代码见:https://github.com/lixd/mydocker ...
- vue 商品sku添加，笛卡尔算法，商品添加。动态生成table，table添加值后 再生成的table 不改变table之前输入的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 全链路灰度新功能：MSE 上线配置标签推送
简介: 本文介绍了全链路灰度场景给配置管理带来的问题,介绍了 MSE 针对这一场景的解决方案,并通过实践的方式展示了配置标签推送的使用流程.后续,MSE 还会针对配置治理做更多的探索,帮助用户更好地解 ...