Vue.js实例练习
最近学习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实例练习的更多相关文章
- Vue.js实例
构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 })
- vue.js实例对象+组件树
vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件 ...
- vue.js应用开发笔记
看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...
- 用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- Vue.js 2.x笔记：基本语法（2）
1. Vue实例及选项 1.1 创建Vue实例(new Vue instance) 每个Vue Application必须创建一个root Vue Instance. <script> v ...
- Vue.js和angular.js区别
Vue.js:易学 简单 指令以v.xxx 一片HTML代码配合json,在new出来Vue,js实例 个人维护项目 适用于移动端 应用超越了angular angular.js:上手难 指令以ng. ...
- vue.js学习总结
下面使用的命令工具为git bash 使用命令行工具搭建vue.js项目 vue.js官网命令行工具安装 为了提升安装速度,建议将 npm 的注册表源设置为国内的镜像 1.输入命令:npm insta ...
- Vue.js教程—1.介绍和安装
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定 ...
- Vue.JS学习基础
= 导航 顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件 顶部 vue.js介绍 vue.js实例 模板语法 计 ...
随机推荐
- 字符串复制char *strcpy(char* dest, const char *src);
⒈strcpy的实现代码 char * strcpy(char * strDest,const char * strSrc) { if ((NULL==strDest) || (NULL==strSr ...
- 初学Java，第一段代码
public class myapp { public static void main(String[] args) { // TODO Auto-generated method stub Sys ...
- P1965 转圈游戏
很容易可以得到,答案应该是(x+m*10^k)%n 很显然,用O(n)一定会卡爆,所以用快速幂来算,或者找一下循环节也是可以的. #include <bits/stdc++.h> usin ...
- ArcGIS Server 缓存服务切图范围
win10 + Server 10.4 + ArcMap 10.4 ArcGIS Server 缓存服务分为创建服务后手动建立缓存和创建服务时同时自动建立缓存两种. 10.2帮助文档:http:/ ...
- php://input，$_POST，$HTTP_RAW_POST_DATA区别
我们先来看两个demo 例子:php://input 代码如下 post.php 代码如下 例子:$_post 代码如下 welcome.php 代码如下 再来看$GLOBALS [& ...
- IOS 移除storyboard
我是IOS新手,都说storyboard是个好东西,但是我搞了一会始终没有搞懂,并且我觉得学习一门语言,使用类似以前网页三剑客这种所见所得工具,不太利于学习,所以我就想着移除storyboard 1: ...
- 将所有程序设置XML集中到一个单独XML配置文件的方法：使用appSettings元素的configSource元素
在.NET程序中,程序的配置文件默认都会放在程序根目录下的web.config(网站程序)或App.config(控制台等程序),在该配置文件中可以定义若干程序配置信息. 在此以网站程序为例,首先将下 ...
- Self和Super的用法
self 是类的隐藏的参数,指向当前当前调用方法的类,另一个隐藏参数是 _cmd,代表当前类方法的 selector.这里只关注这个 self.super 是个啥?super 并不是隐藏的参数,它只是 ...
- sp.net2.0中的新增控件BulletedList的一些高级用法
asp.net2.0新增了一个BulletedList控件,通过它可以以列表形式显示数据,而不必再用Repeater,Datalist等实现相同的效果.今天做程序的时候正好用到了这个控件,就把它的一些 ...
- key_value 类型配置文件的解析
#include <iostream> #include <string> #include <stdint.h> #include <map> #in ...