前言

入手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.cnblogs.com/yingzi1028/p/5671809.html

http://www.cnblogs.com/keepfool/p/5619070.html

vue.js初探的更多相关文章

  1. vue.js初探：计算属性和methods

    在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...

  2. 后端视角下的前端框架之Vue.js初探

    背景 作为常年搞后端的自己来说,除了多年前学习的一点关于HTML的皮毛,对现在的前端技术栈可谓是一窍不通.但是因为最近在做的内部业务全链路监控系统,负责前端的同事做到一半去搞别的项目了,为了把项目落地 ...

  3. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  4. Vue.js 入门指南之“前传”（含sublime text 3 配置）

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  5. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)

    缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...

  7. Vue.js的安装及简单使用

    一.Vue简介 二.Vue.js的安装 2.1.npm安装 2.1.1.node.js介绍及安装 简介: 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基 ...

  8. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  9. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

随机推荐

  1. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  2. EntityFramework.Extended 支持 MySql

    EntityFramework.Extended 默认不支持 MySql,需要配置如下代码: [DbConfigurationType(typeof(DbContextConfiguration))] ...

  3. CSS知识总结（九）

    CSS常用样式 10.自定义动画 1)关键帧(keyframes) 被称为关键帧,其类似于Flash中的关键帧. 在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“ ...

  4. ASP.NET MVC一次删除多笔记录

    批量删除数据记录,如下面的截屏: 先选中想删除的记录,然后点一下删除铵钮,系统将把选中的记录一次性删除.在此,Insus.NET不想每删除一笔记录连接一次数据库. 因此需要把选择的记录一次上传至服务器 ...

  5. slf4j中的MDC

    slf4j中MDC是什么鬼 slf4j除了trace.debug.info.warn.error这几个日志接口外,还可以配合MDC将数据写入日志.换句话说MDC也是用来记录日志的,但它的使用方式与使用 ...

  6. interpreter(解释器模式)

    一.引子 其实没有什么好的例子引入解释器模式,因为它描述了如何构成一个简单的语言解释器,主要应用在使用面向对象语言开发编译器中:在实际应用中,我们可能很少碰到去构造一个语言的文法的情况. 虽然你几乎用 ...

  7. listview下拉刷新和上拉加载更多的多种实现方案

    listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局        android系统为listview提供了addfootview ...

  8. 一键生成APP官网

    只需要输入苹果下载地址,安卓市场下载地址,或者内测下载地址,就能一键生成APP的官网,方便在网上推广. 好推APP官网 www.hotapp.cn/app

  9. Spring mvc @initBinder 类型转化器的使用

    一.单日期格式 因为是用注解完完成的后台访问,所以必须在大配置中配置包扫描器: 1.applicactionContext.xml <?xml version="1.0" e ...

  10. Web 前端攻防（2014版）

    在百度 FEX 团队时写的.有次让我写点前端开发中注意的安全规范,结果写着写着就跑题了,写了一堆纯前端实现的攻击方式...当然还有防范措施. 文章就懒得粘过来了~ 直接贴个地址算了:) http:// ...