最近学习Vue.js感觉跟不上节奏了，Vue.js用起来很方便。

主要实现功能，能添加书的内容和删除。（用的Bootstrap的样式）demo链接

标题用了自定义组件，代码如下：

components: {

    'my-title': {

        template: '<h1 v-text="title"></h1>',

        data: function () {

            return {

                title: 'Vue.js 实例练习 Bootstrap样式'

            }

        }

    }

}

增加书的内容和表格用的都是指令+列表渲染，vue.js构造单页面应用确实很方便。

Vue.js提供的指令很快的渲染想要的内容。这里主要用了v-for嵌套使用。

v-for还包含2个特殊变量：$index,$key。能遍历数组和对象。 全部代码如下：

<!DOCTYPE html>

<html">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <style>

        #app {

            width: 990px;

            padding: 0 15px;

            margin: 0 auto;

        }

    </style>

    <div id="app">

        <my-title></my-title>

        <div id="divTblBook">

            <table class="table table-hover">

                <thead>

                    <tr>

                        <th v-for="b in bookShow">{{ b }}</th>

                        <th>操作</th>

                    </tr>

                </thead>

                <tbody>

                    <tr v-for="item in books">

                        <td v-for="b in item">{{ item[$key] }}

                        </td>

                        <td>

                            <button class="btn btn-primary" v-on:click="delBook(item)">删除</button>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

        <div id="divAddBook">

            <p>添加书籍</p>

            <div v-for="b in bookShow">

                <div class="form-group">

                    <label>{{ b }}</label>

                    <input type="text" class="form-control" v-model="book[$key]">

                </div>

            </div>

            <button class="btn btn-primary" v-on:click="addBook()">添加</button>

        </div>

    </div>

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />

    <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>

    <script>

        var vm = new Vue({

            el: "#app",

            components: {

                'my-title': {

                    template: '<h1 v-text="title"></h1>',

                    data: function () {

                        return {

                            title: 'Vue.js 实例练习 Bootstrap样式'

                        }

                    }

                }

            },

            data: {

                books: [{

                    author: '曹雪芹',

                    name: '红楼梦',

                    price: 32.0

                }, {

                    author: '施耐庵',

                    name: '水浒传',

                    price: 30.0

                }, {

                    author: '罗贯中',

                    name: '三国演义',

                    price: 24.0

                }, {

                    author: '吴承恩',

                    name: '西游记',

                    price: 20.0

                }],

                book: {

                    Name: '',

                    Author: '',

                    price: ''

                },

                bookShow: {

                    Name: "书名",

                    Author: "作者",

                    price: "价格"

                }

            },

            methods: {

                addBook: function () {

                    this.books.push(this.book);

                    this.book = "";

                },

                delBook: function (book) {

                    this.books.$remove(book);

                }

            }

        })

    </script>

</body>

</html>

Vue.js实例练习的更多相关文章

  1. Vue.js实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 })

  2. vue.js实例对象+组件树

    vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...

  3. vue.js应用开发笔记

    看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...

  4. 用Vue.js开发微信小程序：开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  5. Vue.js 2.x笔记：基本语法（2）

    1. Vue实例及选项 1.1 创建Vue实例(new Vue instance) 每个Vue Application必须创建一个root Vue Instance. <script> v ...

  6. Vue.js和angular.js区别

    Vue.js:易学 简单 指令以v.xxx 一片HTML代码配合json,在new出来Vue,js实例 个人维护项目 适用于移动端 应用超越了angular angular.js:上手难 指令以ng. ...

  7. vue.js学习总结

    下面使用的命令工具为git bash 使用命令行工具搭建vue.js项目 vue.js官网命令行工具安装 为了提升安装速度,建议将 npm 的注册表源设置为国内的镜像 1.输入命令:npm insta ...

  8. Vue.js教程—1.介绍和安装

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定 ...

  9. Vue.JS学习基础

      = 导航   顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件   顶部 vue.js介绍 vue.js实例 模板语法 计 ...

随机推荐

  1. JNDI学习总结(一)——JNDI数据源的配置

    一.数据源的由来 在Java开发中,使用JDBC操作数据库的四个步骤如下:   ①加载数据库驱动程序(Class.forName("数据库驱动类");) ②连接数据库(Connec ...

  2. nodejs 基本类型和语法

    写在前面 今天想要查下Node的类型什么的知识,想要总结下,在Googol上看到一个文章,但是原始的链接不在了,在快照中把这篇文章拉出来,如果原作者有问题,请联系我! 该文章都是一些JS的基础,高手自 ...

  3. SecureCRT登录Ubuntu 的中文乱码问题

    (1)/var/lib/locales/supported.d/local文件中添加一行:zh_CN.UTF-8 UTF-8,执行sudo locale-gen下载文件   su - root (2) ...

  4. java并发编程-线程池的使用

    参考文章:http://www.cnblogs.com/dolphin0520/p/3932921.html 深入剖析线程池实现原理 将从下面几个方面讲解: 1.线程池状态 2.任务的执行 3.线程池 ...

  5. 读书笔记——《图解TCP/IP》(4/4)

    经典摘抄 第八章 应用层协议概要 1.应用协议是为了实现某种应用而设计和创造的协议. 2.TCP/IP的应用层包含了管理通信连接的会话层功能.转换数据格式的表示层功能,还包括与对端主机交互的应用层功能 ...

  6. Qt的IDE开发环境（KDevelop，MonKey Studio，QDevlop，Dev-cpp，Cobras，Edyuk）

    讲到Qt的IDE开发环境,本人一直在Windows下使用VC6.0 + Qt4.3.1开发程序.但转到Linux下,使用Fedora中自带的KDevelop + Qt4.3.1开发程序. 最近一直做Q ...

  7. input的type属性的修改

    记录一下成长的历程吧! 刚开始写,没什么文笔,也没什么技术含量,可能主要的是纪录一下平常工作学习中遇到的问题,以及解决的办法吧.或者只有问题,没有解决办法. 前两天项目中遇到的一个问题,由于之前一直没 ...

  8. XCODE打包安装包步骤

    1. 2. 3. 4. 5. 6. 7. 导出之后就可以看到一个后缀为.ipa 的安装包.

  9. svn利用TortoiseSVN忽略文件或文件夹

    忽略已经版本控制的文件 如果你不小心添加了一些应该被忽略的文件,你如何将它们从版本控制中去除而不会丢失它们?或许你有 自己的IDE配置文件,不是项目的一部分,但将会花费很多时间使之按照自己的方式工作. ...

  10. python join split

    本文记录python,join和split函数的用法. 参考 http://blog.csdn.net/doiido/article/details/43538833 http://blog.csdn ...