第一次接触神奇的前端框架vue.js
前言
入手2016最火前端框架之一vue.js。大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎。 网上的博客和教程各种组合。以至于我都有些感觉out。各种vue+webpack、vue+react、vue+es6+npm等等。琳琅满目。真是三天不学习赶不上刘少奇。
开篇主要是初次了解下vue.js,包括v-model、v-if、v-else、v-show、v-for(2.0对$index和$key舍弃,2.0要用index属性语法为 v-for="(person,index) in persons")、v-on。
看图
看代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js CURD</title> <meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div class="row" id="app"> <div class="col-xs-12 col-md-8"> <fieldset> <legend>New Person</legend> <div class="form-group"> <label>ID</label> <input type="text" v-model="newPerson.id"/> </div> <div class="form-group"> <label>Name:</label> <input type="text" v-model="newPerson.name"/> </div> <div class="form-group"> <label>Age:</label> <input type="text" v-model="newPerson.age"/> </div> <div class="form-group"> <label>Sex:</label> <select v-model="newPerson.sex"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> <div class="form-group"> <label></label> <button @click="createorupdate">ok</button> </div> </fieldset> </div> <div class="col-xs-12 col-md-8"> <table class="table table-striped"> <thead> <tr> <th>Id</th> <th>name</th> <th>age</th> <th>sex</th> </tr> </thead> <tbody> <tr v-for="(person,index) in persons"> <td>{{person.id}}</td> <td>{{person.name}}</td> <td>{{person.age}}</td> <td>{{person.sex}}</td> <td><button @click="deletePerson(index)">delete</button></td> <td><button @click="update(index)">update</button></td> </tr> </tbody> </table> </div> </div> <script> Array.prototype.arrIndex=function(obj){ for(let i=0;i<this.length;i++){ var tmp=this[i]; if(tmp==obj){ return i; } } } var vm=new Vue({ el:'#app', data:{ editLock:1, newPerson:{ id:0, name:'', age:0, sex:'male' }, persons:[{ id:1, name: 'Jack', age: 30, sex: 'Male' }, { id:2, name: 'Bill', age: 26, sex: 'Male' }, { id:3, name: 'Tracy', age: 22, sex: 'Female' }, { id:4, name: 'Chris', age: 36, sex: 'Male' }] }, methods:{ create:function(){ this.persons.push(this.newPerson); this.newPerson={id:0,name:'',age:0,sex:'male'}; }, createorupdate:function(){ if(this.editLock===1){ this.persons.push(this.newPerson); }else{ //删除老对象 var aindex=this.persons.arrIndex(this.newPerson); console.log(aindex); this.persons.splice(aindex,1); //插入新对象 this.persons.push(this.newPerson); } this.newPerson={id:0,name:'',age:0,sex:'male'}; }, deletePerson:function(idx){ this.persons.splice(idx,1); }, update:function(idx){ var p =this.persons[idx]; this.editLock=0; this.newPerson=p; } } }) </script> </body> </html>
参考资料:
https://cn.vuejs.org/v2/guide/routing.html
http://www.jb51.net/article/98791.htm
http://www.jb51.net/article/96426.htm
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15
vue.js页面加载执行created,mounted的先后顺序说明
这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07- 本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 本篇文章主要介绍了详解前后端分离之VueJS前端,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27
- 对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-04-03
- 过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。...2017-01-26
- 这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 这篇文章主要介绍了vue.js实现h5机器人聊天测试版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
- 这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-02-04
- 这篇文章主要介绍了初识angular框架后的所思所想,学习认识angular后的一些个人问题总结,需要的朋友可以参考下...2016-02-21
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
这篇文章主要介绍了Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
这篇文章主要介绍了BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)的相关资料,需要的朋友可以参考下...2016-12-02- 第一次接触神奇的vue.js,主要了解一下v-model、v-if、v-else、v-show、v-for等,感兴趣的小伙伴们可以一起学习一下...2016-12-02
- 这篇文章主要为大家详细介绍了Vue.JS入门教程之事件监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 这篇文章主要为大家详细介绍了Vue.js第三天的学习笔记,vue.js计算属性computed,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 这篇文章主要介绍了Vue.js之slot深度复制的相关资料,文中介绍的很详细,对大家具有一定的参考价值,需要的朋友们来一起看看吧。...2017-03-13
- 本篇文章主要介绍了vue.js实现仿原生ios时间选择组件实例代码,具有一定的参考价值,有兴趣的可以了解一下。 ...2017-01-09