前言

入手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. Summary of Critical and Exploitable iOS Vulnerabilities in 2016

    Summary of Critical and Exploitable iOS Vulnerabilities in 2016 Author:Min (Spark) Zheng, Cererdlong ...

  3. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. gradle学习笔记(1)

    1. 安装     (1) 下载最新gradle压缩包,解压到某处.地址是:Gradle web site:     (2) 添加环境变量:             1) 变量名:GRADLE_HOM ...

  5. dagger2系列之Scope

    Dagger的Scope注解代表的是作用域,通过实现自定义@Scope注解,标记当前生成对象的使用范围,标识一个类型的注射器只实例化一次,在同一个作用域内,只会生成一个实例, 然后在此作用域内共用一个 ...

  6. 免费开源的DotNet任务调度组件Quartz.NET（.NET组件介绍之五）

    很多的软件项目中都会使用到定时任务.定时轮询数据库同步,定时邮件通知等功能..NET Framework具有“内置”定时器功能,通过System.Timers.Timer类.在使用Timer类需要面对 ...

  7. CSS知识总结（八）

    CSS常用样式 8.变形样式 改变元素的大小,透明,旋转角度,扭曲度等. transform : none | <transform-function> <transform-fun ...

  8. MongoDB学习笔记~对集合属性的操作

    回到目录 $unset清除元素 请注意在单个数组元素上使用$unset的结果可能与你设想的不一样.其结果只是将元素的值设置为null,而非删除整个元素.要想彻底删除某个数组元素,可以用$pull 和$ ...

  9. BZOJ 4199: [Noi2015]品酒大会 [后缀数组 带权并查集]

    4199: [Noi2015]品酒大会 UOJ:http://uoj.ac/problem/131 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品 ...

  10. Node.js Express连接mysql完整的登陆注册系统(windows)

    windows学习环境: node 版本: v0.10.35 express版本:4.10.0 mysql版本:5.6.21-log 第一部分:安装node .Express(win8系统 需要&qu ...