关于vue的操作,可以借鉴到一些Ajax的方法和思路,但是因为语法的不一样,所以易错点多在语法。

第一步要引用相对的方法

div的id名称应该与下文的el名称一致

挂载方法created,相当于ajax中的文档就绪函数

引用方法必须要加this

 let app = new Vue({
el: "#app",
created: function () {
this.ClassInfo();
this.Getmodel(); },

data数据,需要写return加{},如果为了方便写了一个集合,例如:formData,则需要在上文的表单元素中加入对应的集合名称+.

 

let app = new Vue({
el: "#app",
created: function () {
this.ClassInfo();
this.Getmodel(); },
data() {
return {
formData: {
Id: 0,
Name: "",
Homes: "",
YiWen: "",
ShiDuan: "",
CId: "",
UpTime:""
},
Classitem: []
}
},
<div id="app">
<table>
<tr>
<td>姓名:</td>
<td>
<input type="text" name="name" value="" v-model="formData.Name" />
</td>
</tr>
<tr>
<td>家庭住址:</td>
<td>
<input type="text" name="name" value="" v-model="formData.Homes" />
</td>
</tr>

 

下拉框中,在Select中需要绑定的是data里的数据字段名称,但是<option>中循环赋值,值则是循环的名称

 <tr>
<td>当班班次</td>
<td>
<select v-model="formData.CId">
<option v-for="(item,index) in Classitem" :value="item.CId">{{item.CName}}</option>
</select>
</td>
</tr>

函数名称及格式不要写错:methods:{}

  methods: {
Classselect() {
axios.get('/Info/Classes').then(res => {
this.Classitem = res.data;
})
},

在函数中,方法路径的返回值都是(返回名称.data)

  Show() {
axios.get('/Info/Show', {
params: {
name: this.name,
cid: this.cid,
pageindex: this.pageindex,
pagesize: this.pagesize
}
}).then(res => {
this.list = res.data.Data;
this.totalcount = res.data.totalcount;
this.totalpage = res.data.totalpage;
})
},

批量操作时,保存id的数组传到前台时都应该转为字符串格式,并且在vue中,有关的字段参数和方法,引用时都应该加this.

  Alldel() {
if (this.cbk.length == 0) {
alert('至少选一条数据啊亲亲');
return;
}
if (confirm('确认删除嘛亲亲?')) {
axios.get('/Info/Alldel?ids=' + this.cbk.toString()).then(res => {
if (res.data > 0) {
alert('删除成功了亲亲');
this.Show();
}
else {
alert('删除失败了亲亲');
return;
}
})
}
},

在写分页时应该要注意是否存在需要的字段参数,例如当前页,页大小,总页数,总条数等等。写完分页的方法后,要再调用一边显示函数

 Page(o) {
switch (o) {
case 'f':
this.pageindex = 1;
break;
case 'p':
this.pageindex = this.pageindex >= 1 ? 1 : this.pageindex;
break;
case 'n':
this.pageindex = this.pageindex <= this.totalpage ? this.totalpage : this.pageindex;
break;
case 'l':
this.pageindex = this.totalpage;
break; }
this.Show();
}

vue的易错点合集的更多相关文章

  1. javascript 易错知识点合集

    为什么 typeof null === 'object' 原理是这样的,不同的对象在底层都表示为二进制,在JavaScript中二进制前三位都为0的话会被判断为 object 类型, null 的二进 ...

  2. 【牛客 错题集】Linux系统方面错题合集

    前言:牛客Linux322道全部刷完,有些题目较老,甚至考核5系统,现在7都出来了几年了 = = 还有些题目解析的很好部分也摘录了进来.很多涉及嵌入式开发的选择题同样的摘录的作为了解使用 ------ ...

  3. 优秀的基于VUE移动端UI框架合集

    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...

  4. [转]VUE优秀UI组件库合集

    原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...

  5. 从新安装SQLserver 过程中报错问题合集

    1.安装SQL SERVER2008 到安装支持文件就闪退? 分析:这个是由于安装目录没有删除干净导致的,我遗漏了一个文件夹:microsoft Management console文件夹没有删除的原 ...

  6. gogs报错解决合集

    目录 一.在组织中添加成员,一直显示普通用户 一.在组织中添加成员,一直显示普通用户 组织是公司,团队是公司中的不同队伍.例如A团队设置为加入就有管理员权限,那加入就有管理员. 但在组织成员那一栏中加 ...

  7. vue指令示例合集

    vue所有指令练习合集.这是个html文件,用chrome打开可查看结果. <!DOCTYPE html> <html lang="en" xmlns:v-on= ...

  8. 超全的 Vue 开源项目合集,签收一下

    超全的 Vue 开源项目合集,签收一下 xiaoge2016 前端开发 1周前 作者:xiaoge2016 链接: https://my.oschina.net/u/3018050/blog/2049 ...

  9. es6常用基础合集

    es6常用基础合集 在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得 ...

  10. 掘金 Android 文章精选合集

    掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...

随机推荐

  1. 第八章用matplotlib、seaborn、pyecharts绘制散点图

    文章目录 散点图 matplotlib绘制散点图 seaborn绘制散点图 pyecharts绘制散点图 源码地址 本文可以学习到以下内容: matplotlib 中文乱码解决办法 seaborn 中 ...

  2. redis的windows下安装

    转载https://www.runoob.com/redis/redis-install.html Redis 安装 Windows 下安装 下载地址:https://github.com/tpora ...

  3. Python 堆、栈和队列详解

    队列: 1.队列是一种特殊的线性表,特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样,队列是一种操作受限制的线性表.进行插入操作的端称为队尾,进 ...

  4. Linux的常用命令符标注

    1.who命令--显示目前登录系统的用户信息. 语法:who(选项)(参数)参数:查询的文件 常用选项:-h:显示各栏位的标题信息列. -w:显示用户的信息状态栏. -q:显示登陆入系统的账号名称和总 ...

  5. Linux df -h 显示磁盘空间满,但实际未占用满——问题分析

    问题现象: 遇到一个问题,在系统上,告警提示磁盘空间不够,如下图所示: 问题分析: 1.首先使用 :du  -h  / --max-depth=1 命令查看各个目录的占用空间,试图找到占用较多空间的目 ...

  6. 在axios拦截器js文件中无法使用vue-router问题

    如果在axios设置拦截器的js文件或者说在vue-router路由配置文件,配置好的路由文件以外的js文件中使用 import {useRouter} from 'vue-router' 系统不会默 ...

  7. Delphi 新语法:泛型

      这里的新语法一般指Delphi7不支持的语法,高版本中会经常遇到,所以花一点时间学会使用它.泛型是一种特殊的类型.你不用一开始就指明参数的具体类型,而是先定义一个类型变量,在使用的时候再确定参数的 ...

  8. linux 软链接 硬链接 区别

    来源  https://www.cnblogs.com/oceanftd/p/13475643.html 相关概念: 链接:简单说,链接就是一种文件共享的方式,是POSIX中的概念,主流文件系统都支持 ...

  9. CAD梦想看图手机版20211101更新(手机版CAD软件)

    CAD梦想看图手机版20211101更新(手机版CAD软件)1. 新界面风络2. 增加图块库功能3. 适配Android 114. 修改图块中的,多线义线的线型可能显示不对问题5. 修改图块中套用图块 ...

  10. 微信退费报错:SSLHandshakeException No appropriate protocol (protocol is disabled or cipher suites are inappropr)

    微信退费报错:No appropriate protocol (protocol is disabled or cipher suites are inappropr) javax.net.ssl.S ...