Vue入门实例-表格的增删改查

原创 乘风逐月 教程 Vue 224阅读 12 天前 举报

不知道是否有人和我一样,想使用Vue但是看了几遍文档仍然不知道如何应用到自己的项目中,尤其是之前的项目都是使用 jquery 的。网上看了很多教程却都是要安装 vue-cli 的,要使用 webpack 和 node.js ,对于这些更是很懵。难道不使用这些构建工具就不能应用到自己的项目中吗?
我摸索了好久,终于把Vue应用到自己的项目中了,不使用那些工具,直接引入 Vue.js ,结合 jquery 一起使用,体会到了数据驱动视图,不操作 DOM 获取数据的感觉了。下面将介绍自己的使用方法。但前提是已经看过Vue的文档,了解插值,指令,事件监听,生命周期函数等。

一、项目使用到的框架插件:

1.UI框架:zui.css,zui.js;附上网址zui官网文档
2.jquery.js,vue.js;附上网址Vue官方教程

二、起步:

先写静态的html,像平常写项目一样,完成页面布局主要样式等。
得到以下页面

三、使用Vue进行数据绑定:
1.json数据
2.js代码

这里需要知道:
a.创建一个Vue实例: new Vue();
b.el: 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el 访问。
c.data: Vue 实例的数据对象。data的属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值,最好在创建实例之前,就声明所有的根级响应式属性。
d.mounted: el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该生命周期函数函数。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。我把它当$(document).ready使用。当使用了jquery的插件时,将在此初始化。
e.methods: methods将被混入到 Vue 实例中。可以直接通过 Vue 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

3.将数据绑定到html里面

这里需要知道:
a.v-for指令: v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。v-for 还支持一个可选的第二个参数为当前项的索引。即v-for="(item,key) in mainData" 中的key。
b.插值: 双{{}}标签将会被替代为对应item上的属性的值,绑定的item数据对象上属性发生了改变,插值处的内容都会更新。

此时得到以下页面

这时可以看到页面上将所有数据都加载出来了,下面将进行增删改查处理。

四、增删改
1.js代码

以上代码都没有去操作 DOM 只是改变数据,但因为双向绑定,视图会响应改变。

2.在html里面需要监听事件,数据绑定

在html里面需要注意的是:
a. class:的绑定通过一个 Boolean 值来控制一个类名是否存在,从而控制弹窗的显示隐藏。
b. v-model: v-model指令在表单 <input> 元素上创建的双向数据绑定。
c.v-on: v-on指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

五、查找数据
1.js 增加属性,方法
2.html:页面上使用v-model双向绑定数据

到这里页面的增删改查操作都完成了,一般后台管理系统就是这些操作。但后台数据是需要分页的,页面上还需要分页,后面再说如何分页。
这里附上完整代码

完整代码

关于分页:我分页一直使用laypage这个插件,很好用,只需要简单配置就可以。
laypage的官方文档:laypage

评论 ( 1 )
最新评论
红达 3 天前 1F

不错不错,收藏备用。