第一次接触神奇的前端框架vue.js


Posted in Javascript onDecember 01, 2016

前言

    入手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。 

看图

第一次接触神奇的前端框架vue.js

看代码

<!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>

参考资料:

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
bootstrapValidator自定验证方法写法
Dec 01 #Javascript
jQuery生成假加载动画效果
Dec 01 #Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 #Javascript
浅谈js键盘事件全面控制
Dec 01 #Javascript
jstree的简单实例
Dec 01 #Javascript
Vue.JS入门教程之事件监听
Dec 01 #Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 #Javascript
You might like
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
js实现拖拽效果
2015/02/12 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
python导入时小括号大作用
2017/01/10 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python实现多线程网页下载器
2018/04/15 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python简单验证码识别的实现方法
2019/05/10 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
python实现IOU计算案例
2020/04/12 Python
python定时截屏实现
2020/11/02 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
网络安全方面的面试题
2015/11/04 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫