前言

入手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. 【AR实验室】ARToolKit之概述篇

    0x00 - 前言 我从去年就开始对AR(Augmented Reality)技术比较关注,但是去年AR行业一直处于偶尔发声的状态,丝毫没有其"异姓同名"的兄弟VR(Virtual ...

  2. 用scikit-learn学习主成分分析(PCA)

    在主成分分析(PCA)原理总结中,我们对主成分分析(以下简称PCA)的原理做了总结,下面我们就总结下如何使用scikit-learn工具来进行PCA降维. 1. scikit-learn PCA类介绍 ...

  3. Java多线程

    一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是一个线程.   进程:进程 ...

  4. 踩石行动：ViewPager无限轮播的坑

    2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

  5. 高性能Javascript--脚本的无阻塞加载策略

    Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理U ...

  6. Web Api 入门实战 （快速入门+工具使用+不依赖IIS）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  7. favicon.ioc使用以及注意事项

    1.效果 2.使用引入方法 2.1 注意事项:(把图标命名为favicon.ico,并且放在根目录下,同时使用Link标签,多重保险) 浏览器默认使用根目录下的favicon.ico 图标(如果你并没 ...

  8. C#多线程之线程池篇1

    在C#多线程之线程池篇中,我们将学习多线程访问共享资源的一些通用的技术,我们将学习到以下知识点: 在线程池中调用委托 在线程池中执行异步操作 线程池和并行度 实现取消选项 使用等待句柄和超时 使用计时 ...

  9. webstorm下载&&安装过程&&打开项目

    一.webstorm下载 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为"Web前端开发神器"."最强大的HT ...

  10. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...