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 ...

随机推荐

ArkUI中的线程和看门狗机制
一.前言本文主要分析ArkUI中涉及的线程和看门狗机制. 二.ArkUI中的线程应用Ability首次创建界面的流程大致如下: 说明: • AceContainer是一个容器类,由前端.任务执行器 ...
简洁，快速的bv号转av号 c++实现
加了一部分预处理,变得更高效了继承自朋友这里 #include <iostream> #include <string> using namespace std; const ...
美团一面：说说synchronized的实现原理？问麻了。。。。
引言在现代软件开发领域,多线程并发编程已经成为提高系统性能.提升用户体验的重要手段.然而,多线程环境下的数据同步与资源共享问题也随之而来,处理不当可能导致数据不一致.死锁等各种并发问题.为此,Jav ...
KL散度和交叉熵的对比介绍
KL散度(Kullback-Leibler Divergence)和交叉熵(Cross Entropy)是在机器学习中广泛使用的概念.这两者都用于比较两个概率分布之间的相似性,但在一些方面,它们也有所 ...
HarmonyOS实践之应用状态变量共享
平时在开发的过程中,我们会在应用中共享数据,在不同的页面间共享信息.虽然常用的共享信息,也可以通过不同页面中组件间信息共享的方式,但有时使用应用级别的状态管理会让开发工作变得简单. 根据不同的使用 ...
HarmonyOS 管理页面跳转及浏览记录导航
历史记录导航使用者在前端页面点击网页中的链接时,Web组件默认会自动打开并加载目标网址.当前端页面替换为新的加载链接时,会自动记录已经访问的网页地址.可以通过forward()和backward ...
Taurus.MVC 性能压力测试（ap 压测和 linux 下wrk 压测）：.NET 版本
前言: 上次发布了:Taurus.MVC 性能压力测试(ap 压测和 linux 下wrk 压测):.NET Core 版本今天计划准备压测一下 .NET 版本,来测试并记录一下 Taurus.M ...
WPF随笔收录-实时绘制心率曲线
一.前言在自己的项目中,涉及到实时心率曲线的绘制,项目上的曲线绘制,一般很难找到能直接用的第三方库,而且有些还是定制化的功能,所以还是自己绘制比较方便.很多人一听到自己画就害怕,感觉很难,今天就分享 ...
kkfileview搭建实战
kkfileview可以与nginx搭建的文件服务器配合实现预览工作,也可以通过自身的文件系统机制免搭建nginx文件服务器来实现预览工作. nginx 创建nginx # 创建初始容器,获得容器内部 ...
暑期集训 Day10 —— 模拟赛复盘
${\color{Green} \mathrm{Problem\ 0 :water }} $ 题如其名,可以用单调队列做,但是数据范围直接暴力枚举每一高度就行. 最不会打错的,还是暴力,所以用暴力. ...