关于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. Blockchain-enabled Access Control with Fog Nodes for Independent IoTs

    摘要: 物联网设备能力有限且数量多,因此当前的传统物联网平台可能无法在可扩展性.可靠性和实时响应方面有效地处理访问控制.本文提出了一种基于区块链.雾节点和物的角色的分散式物联网访问控制系统,利用以太坊 ...

  2. cocos2d-lua 控制台输入Lua指令方便调试

    用脚本进行开发,如果不能实时去输入指令,就丧失了脚本的一大特色,所以对cocos2d-x程序稍微修改下,使其可以直接从控制台读入lua指令,方便调试. 1 首先在行首加入lua的引用,如下 1 #in ...

  3. koa获取get和post的参数实例代码

    1 const Koa = require('koa'); 2 const Router = require('koa-router');//引用koa-router 3 const KoaBody ...

  4. Python学习的第三次的总结

    元组 #组内元素可读,不能被改变 tup1=() #空元组 tup2=(1,) #一个元素后添加逗号 嵌套列表 a = [[1,2,3],'lyyyyy',4,(2,3,4)] b = a[0]   ...

  5. 软件工程日报七——checkbox的使用

    今天学了checkbox的使用 activity_main.xml文件为 <?xml version="1.0" encoding="utf-8"?> ...

  6. 推荐优秀国产蓝牙芯片-HS6621CxC系列

    HS6621CxC是一个优化功耗真正芯片系统(SOC)解决方案,适用于蓝牙低功耗和私有的2.4GHz应用场景.它集成了一个高性能.小功率的射频收发器,具有蓝牙基带和丰富的外围IO扩展. HS6621C ...

  7. KMS服务器 激活win 和 office

    环境:Debian 9.5 (Google Cloud) 切换到root用户:sudo su wget --no-check-certificate https://github.com/teddys ...

  8. Appkiz.Base、Appkiz.Base.Languages

    环境: ILSpy version 4.0.0.4319-beta2 选择 C#6.0 Visual Studio 2015 直接保存代码,直接用Visual Studio 2015打开.csprj文 ...

  9. js实现点击按钮或div显示与隐藏div

    var box = document.getElementById("box"); var btn = document.getElementById("btn" ...

  10. (K8s学习笔记五)Pod的使用详解

    1.Pod用法 K8s里使用的容器不能使用启动命令是后台执行程序,如:nohup ./start.sh &,该脚本运行完成后kubelet会认为该Pod执行结束,将立刻销毁该Pod,如果该Po ...