第一次接触神奇的前端框架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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
Vue实现一个无限加载列表功能
Nov 13 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
php中的MVC模式运用技巧
2007/05/03 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
python更新列表的方法
2015/07/28 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
基于python 凸包问题的解决
2020/04/16 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
电子技术专业中专生的自我评价
2013/12/17 职场文书
财会自我鉴定范文
2013/12/27 职场文书
美发活动策划书
2014/01/14 职场文书
高三自我评价
2014/02/01 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
色戒观后感
2015/06/12 职场文书
辞职信怎么写?
2019/05/21 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android