创建一个工程文件：

css中引用的是bootstrap的css，js中就是vue，index页面：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>vue2.0</title>

    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

</head>

<body>

    <nav class="navbar navbar-default navbar-static-top">

    <div class="container" id="app">

        <div class="row">

            <div class="col-md-8 col-md-offset-2">

                <div class="panel panel-default">

                    <div class="panel-heading">welcome Vue 2.0</div>

                    <div class="panel-body">

                        <input type="text" name="" v-model="message" class="form-control">

                        <h1>{{message}}</h1>

                        <ul class="list-group">

                            <li class="list-group-item" v-for="(todo,index) in todos">

                                {{todo.title}}

                                <button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>

                            </li>

                        </ul>

                        <form v-on:submit.prevent="addTodo(newTodo)">

                            <div class="form-group">

                                <input type="text" name="" class="form-gcontrol" placeholder="add a new todo" v-model="newTodo.title">

                            </div>

                            <div class="from-group">

                                <button class="btn btn-success" type="submit">add todo</button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script type="text/javascript" src="js/vue.js"></script>

    <script type="text/javascript">

        new Vue({

            el:'#app',

            data:{

                message:'hello world',

                todos:[

                    {id:1,title:"learn vuejs"},

                ],

                newTodo:{id:null,title:""}//定义一个obj

            },

            methods:{

                addTodo(newTodo){//es6

                    this.todos.push(newTodo);//把新的obj添加在数组中，

                    this.newTodo = {id:null,title:""}//初始化newTodo

                },

                deleteTodo(index){

                    this.todos.splice(index,1);//删除下标为index的元素

                }

            }

        });

    </script>

</body>

</html>

这里的v-on:submit.prevent="addtodo(newTodo)"(这里的prevent是用来阻止form的默认提交行为，否则点击btn会有一个提交行为报错),methods里面定义一些方法。

input输入框一定绑定newTodo，这里不加this.newTodo = {id:null,title:""}的时候我点击按钮多次添加的是同样的内容，并且再次改变input的时候所有之前添加的都会改变，这是什么情况？不是已经添加到todos里了么，希望有朋友点拨一下。

v-for里面要把index参数传递进去。

arrayObject.splice(index,howmany,item1,.....,itemX)
参数 描述
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目
item1, ..., itemX 可选。向数组添加的新项目

vue.js 2.0开发的更多相关文章

  1. vue.js 2.0开发(3)

    组件化 Vue.component('todo-items',{ }); 定义组件,首先是标签的名字todo-items,然后里面还要配置一些选项,首先是我们的模板template,里面需要填入的内容 ...

  2. vue.js 2.0开发(2)

    如果我们想实时的显示我们todos的长度这个业务逻辑可以这样: <h1>{{message}} ({{todos.length}})</h1> 直接展示todos的length ...

  3. vue.js 2.0开发(4)

    使用vue-cli,首先安装: npm install -g vue-cli 安装完了执行vue命令,会出现 vue init <template-name> <project-na ...

  4. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  5. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  6. 更轻更快的Vue.js 2.0与其他框架对比(转)

    更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0  ...

  7. 【转】Vue.js 2.0 快速上手精华梳理

    Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

  8. 还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features- ...

  9. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

随机推荐

  1. 介绍开源的.net通信框架NetworkComms框架之七 数据加密通信

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...

  2. C#微信公众号接口开发实例-高级接口-申请带参数的二维码

    最近公司涉及到微信绑定用户,做了高级接口-申请带参数的二维码,总结了下微信开发接口.微信接口开发都是除了消息用的xml 回复基本上都是用json的形式传递信息(post/get),开发的方法基本都是一 ...

  3. 怎么做一个bat文件

    怎么做一个bat文件 | 浏览:639 | 更新:2014-11-25 17:02 1 2 3 4 5 6 7 分步阅读 其实做一个.BAT文件很简单,下面我就以做一个清除系统垃圾.BAT文件为例,给 ...

  4. tomcat一闪而过------Java EE环境部署

    今天浪费了一个多钟头,tomcat一直一闪而过,最终原因让人哭笑不得,最后发现自己下载的是tomcat的源码版本....哎 部署环境步骤: 1.安装JDK 下载安装,JDK只需要配以下两个环境变量就可 ...

  5. 系统不支持curl

    解决安装pinphp时出现的“系统不支持curl!”   今天在本机安装phppin开源程序时,提示“系统不支持curl!”错误. 由于我本机是UBUNTU系统,所以直接通过apt-get进行安装. ...

  6. Libgdx 开发指南(1.3) 应用框架——查询、日志

    查询 Application接口提过多种方法查询运行时环境属性. 获得应用类型 有时候根据运行平台需要处理一些具体的逻辑,可以使用 Application.getType() 方法来返回应用所运行的平 ...

  7. GCD的基本知识

    什么是GCD 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 GCD的优势 GCD是苹果公司为多核的并行运算提出的解决方案 GCD会自 ...

  8. dij单源最短路纯模板

    #include <iostream> #include <cstdio> #include <cstdlib> #include <algorithm> ...

  9. 使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响

    为元素设置“float”样式之后,元素会脱离标准文档流,不再占据原来的空间.后续元素会向前移动,占据这个新的空间.后续的文本会围绕着浮动元素分布,形成一种环绕布局的现象. 示例代码: <!DOC ...

  10. kuangbin_MST C (POJ 2031)

    全程double精度就能过了 间接0距离不用管 prim自动连起来的 G++交的话只能用%f输出 C++的话加不加l都可以 (这么说以后用%f肯定不会错咯) 不过我不懂为什么他们的空间时间差了好多倍. ...