在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的更多相关文章

  1. vue-修改vue项目运行端口号

    一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...

  2. Cordova打包vue项目生成Apk （解决cordova build android抛出的zip问题）

    最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...

  3. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  4. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  5. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...

  6. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

  7. vue项目iframe的传值问题

    前言 项目需要,我需要引入一个已经封装好的浏览器插件.插件只能以html的方式调用, 所以.我把插件的使用封装了一个html页面.vue项目则利用iframe的方式引入. 到这里我就遇到了一个问题,那 ...

  8. 如何加快Vue项目的开发速度

    如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...

  9. vue 项目页面刷新router-view控制

    vue项目开发过程中,需要在页面提交表单信息之后清空还原,即恢复页面初始状态,第一想法就是对当前页面刷新,重新加载. 想起location.reload()方式和this.$router.go(0)方 ...

  10. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

随机推荐

  1. char * 、BSTR、long、wchar_t *、LPCWSTR、string、QString、CStringA类型转换

    char* 转 BSTR char* s1 = "zhangsan"; CString s2 = CString(s1); BSTR s3 = s2.AllocSysString( ...

  2. MogDB/openGauss 开机自启动

    MogDB/openGauss 开机自启动 在 centos7.6 操作系统上设置 MogDB/openGauss 开机自启动,我们先来了解一下自定义服务的配置文件组成部分,共分为[Unit].[Se ...

  3. SQL语言分为哪几类

    SQL 语言分为哪几类 介绍 SQL 语言分为三类,包括 DDL.DML 和 DCL. DDL DDL(Data Definition Language,数据定义语言) 用来创建或者删除存储数据用的数 ...

  4. linux 性能自我学习 ———— 软中断 [五]

    前言 linux 性能的自我学习. 正文 什么是软中断呢? 举一个网络的例子. linux 将中断处理过程分为两个阶段: 上半部用来快速处理中断,他在中断禁止模式下运行,注意是处理跟硬件紧密相关或时间 ...

  5. js 词法作用域

    前言 什么是作用域? 作用域(scope),程序设计概念,通常来说,一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域. 白话文:作用域就是变量在哪块 ...

  6. spring cloud 学习笔记 客户端（本地）均衡负载(三)

    前言 在微服务中,一个服务可能即是服务端也是客户端,当别的服务调用该服务的时候这个服务就是服务端,当这个服务主动调用另外一个服务的时候,那么就是服务端. 作为客户端通过服务注册与发现获取某个服务的注册 ...

  7. IaC：实现持续交付和 DevOps 自动化的关键

    基础架构即代码(IaC)和 CI/CD 流水线最初似乎并不匹配.因为它们代表了两种不同的流程.IaC 主要关注基础设施的配置和开发,而 CI/CD 则围绕软件开发.测试和部署. 然而,将 IaC 集成 ...

  8. CSS 样式清单整理（二）

    16.元素占满整个屏幕 heigth如果使用100%,会根据父级的高度来决定,所以使用100vh单位. .dom{ width:100%; height:100vh; } 17.CSS实现文本两端对齐 ...

  9. 力扣239(Java)- 滑动窗口最大值（困难）

    题目: 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧.你只可以看到在滑动窗口内的 k 个数字.滑动窗口每次只向右移动一位. 返回 滑动窗口中的最大值 . 示 ...

  10. 消息队列 RabbitMQ 遇上可观测--业务链路可视化

    简介: 本篇文章主要介绍阿里云消息队列 RabbitMQ 版的可观测功能.RabbitMQ 的可观测能力相对开源有了全面的加强,为业务链路保驾护航. 作者:文婷.不周 本篇文章主要介绍阿里云消息队列 ...