前言

入手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. Android 获取meta-data中的数据

    在 Android 的 Mainfest 清单文件中,Application,Activity,Recriver,Service 的节点中都有这个的存在.很多时候我们可以通过 meta-data 来配 ...

  2. Dapper.Contrib：GetAsync<T> only supports an entity with a [Key] or an [ExplicitKey] property

    异常处理:http://www.cnblogs.com/dunitian/p/4523006.html#dapper 原来Model是这样滴 修改后是这样滴 注意点:Model里面的Table和Key ...

  3. Android Ormlite 学习笔记1 -- 基础

    Ormlite 是一个开源Java数据实体映射框架.其中依赖2个核心类库: 1.ormlite-android-4.48.jar 2.ormlite-core-4.48.jar 新建项目,引用上面2个 ...

  4. scanf类型不匹配造成死循环

        int i = 0; while (flag) { printf("please input a number >>> "); scanf("% ...

  5. 访问者模式（visitorpattern）

    /** * 访问者模式 * @author TMAC-J * 在客户端和元素之间添加一个访问者 * 当你需要添加一些和元素关系不大的需求时,可以直接放在访问者里面 * 或者是元素之间有一些公共的代码块 ...

  6. 如何给FineReport设置自定义消息提醒工具

    FineReport设计器有自动的消息推送功能,可设置报表定时推送和常规的日报周报推送.官方有自己的消息推送的接口,不过有些用户旺旺希望自己开发,符合自己需求的推送界面. 下面这个方案就从逻辑层面简单 ...

  7. 项目游戏开发日记 No.0x000001

    14软二杨近星(2014551622) 既然已经决定了开发软件, 时不时就要练练手, 还要时不时的去寻找素材, 因为开发的人物设定就是DotA2里面的祈求者, 所以, 就去找了他的相关人物图片和模型, ...

  8. 在.NET Core控制台程序中使用依赖注入

    之前都是在ASP.NET Core中使用依赖注入(Dependency Injection),昨天遇到一个场景需要在.NET Core控制台程序中使用依赖注入,由于对.NET Core中的依赖注入机制 ...

  9. HTML5 摇一摇加强版之一次失败的探索

    最近在看设备传感器的API,当然也少不了研究一下让微信称神的“摇一摇”了.关于“摇一摇”的实现,网上很多资料所以不详细说了,但总是有布局.效果不全等各种问题,所以作为一名资深copypaster,代码 ...

  10. Joshua Bloch错了？ ——适当改变你的Builder模式实现

    注:这一系列都是小品文.它们偏重的并不是如何实现模式,而是一系列在模式实现,使用等众多方面绝对值得思考的问题.如果您仅仅希望知道一个模式该如何实现,那么整个系列都会让您失望.如果您希望更深入地了解各个 ...