初识vue.js
来源:互联网 发布:眼睛变大 知乎 编辑:程序博客网 时间:2024/06/14 13:54
一:为什么会想到用vue .js?
场景:ajax传回一个二维json,解析json数据,拼接html,追加到指定的DOM里.......
这个过程很繁琐,而且拼接html这一步也很容易出错.........
思考:有没有一种方法让页面的DOM随数据自己变化?
二 :他的demo(原文点我)(ps:原文比我写得好的多,我只是写写我自己的理解~..~)
交互流程:点击create 列表增加一行,点击delete删除当前行。
分析:
1.列表里的数据一般是从数据库传回来的,返回一个二维数组,vue.js 可以将循环绑在tr上
<tr v-for="(person,index) in people">v-for 是一个循环指令,循环people数组,当前对象person,index是索引(0开始)
2.点击create,获取文本框的值,增加一行在末尾;vue.js 可以让数据和DOM绑定,简言之,我文本框的值是随我的Vue的实例对象里面的数据自动更新的
v-model指令创建双向绑定:
<p>Name: <input type="text" v-model="newPerson.Name"/></p>这样文本框的值就和 Vue实例对象里的newPerson.Name绑定起来
3.点击delete,删除当前行;
v-on指令可以绑定点击事件,并且可以带参数,比如这里带上当前行的索引值
<td><input type="button" v-on:click="deletePerson(index)" value="delete"/></td>
这样一个vue.js的小demo就算完成了。
原文demo:点击打开链接
注:原文的demo删除有点小问题,可能是版本问题,请看原文的第九楼评论。
我的理解:在这个demo中vue.js就很好的实现了DOM与数据的绑定,我们没有去直接去操作DOM,而是操作Vue的实例去帮助我们操作demo,通过这个方式不仅减少了对DOM的操作(因为Vue已经将数据和DOM绑在一起了)加大效率,而且对数据的操作也变的更方便(MVVM);
阅读全文
0 0
- 初识Vue.js
- 初识vue.js
- 初识vue.js
- 初识Vue.js
- vue.js初识,请多指教。
- Vue初识
- 初识Vue
- 初识vue
- vue初识
- 学习vue.js初识npm,webpack,CommonJS,AMD与CMD
- 曹可爱之最可爱-Vue.js入门 (一)初识
- Vue入门01-vue初识
- 初识vue(一)
- 初识vue系列一
- 初识 webpack vue项目
- Vue实践--初识组件
- js初识,博客初识
- vue.js
- PHP操作Memcached
- 泡妞秘籍一
- Linux 磁盘管理(2)
- Maven系列(七)assembly打包-程序和依赖jar包分开化
- 由《图解HTTP》反省的测试用例思考之错误消息toast提示
- 初识vue.js
- 大话数据结构(一)——线性表顺序存储结构的java实现
- windows系统开放外部访问端口
- Memcached 服务器端命令
- python——pandas--如何得到某一个值所在的行?
- 禅道的敏捷开发模式
- HTML5游戏技术革新增强
- 使用mondo制作备份linux的iso文件
- gtdt的作用之一注册sbsa watchdog device