一个例子轻松学会Vue.js
大家都知道Vue.js是中国人创造出来的，简单易用，所以必须要支持一下
Vue采用的MVVM设计模式
也就是说model和view绑定
model改变，view的内容改变，反之亦然
Vue主要有以下几个关键字
v-model 绑定模型
v-if 判断是否显示该dom
v-show 判断是否将该dom的display设为none
v-else if或者show为false时显示该dom
v-for 迭代
v-bind 绑定属性
v-on 绑定方法
我们以一个可查找的信息管理系统为例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<span>key</span>
<!-- 绑定model中search.key -->
<!-- 内容和下面每一列的数据进行比较 -->
<!-- 内容改变，下面的每一列都马上会进行比较 -->
<input type="text" v-model="search.key">
<legend>
Create New Person
</legend>
<div class="form-group">
<label>Name:</label>
<!-- 绑定model中newPerson.name -->
<input type="text" v-model="newPerson.name"/>
</div>
<div class="form-group">
<label>Age:</label>
<!-- 绑定model中newPerson.age -->
<input type="text" v-model="newPerson.age"/>
</div>
<div class="form-group">
<label>Sex:</label>
<!-- 绑定model中newPerson.sex -->
<select v-model="newPerson.sex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label></label>
<!-- @click是v-on:click的缩写 -->
<button @click="createPerson">Create</button>
</div>
</fieldset>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<!-- 用v-for迭代，$index为每一个item的索引 -->
<!-- v-if判断为true则显示，否则则移除，这里更适合用v-show,v-show并不会移除dom只会将display属性改为none -->
<!-- 和搜索框内容进行比较 -->
<tr v-for="person in people" v-if="person.name.indexOf(search.key)>=0||person.sex.indexOf(search.key)>=0||person.age==search.key">
<td >{{ person.name }}</td>
<!-- :style是v-bind:style的缩写，满足条件则值为前面的，否则为后面的，固定的字符串要用' ',变量不需要用'' -->
<!-- v-bind后面还可以接其他的属性例如class，id -->
<td :style="person.age>30 ? 'color: red' : ' ' ">{{ person.age }}</td>
<!-- v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别 -->
<td v-if="person.sex =='Male'">男</td>
<td v-else>女</td>
<td class="text-center"><button @click="deletePerson($index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 初始化Vue
//el获取绑定的标签，#app获取id为app的dom，.app的话则获取class为app的dom
//data中为模型
//methods为方法
var vm = new Vue({
el: '#app',
data: {
search:{
key:""
},
newPerson: {
name: '',
age: 0,
sex: 'Male'
},
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
},
methods:{
createPerson: function(){
this.people.push(this.newPerson);
// 添加完newPerson对象后，重置newPerson对象
this.newPerson = {name: '', age: 0, sex: 'Male'}
},
deletePerson: function(index){
// 删一个数组元素
this.people.splice(index,1);
}
}
})
</script>
</html>
不需要太多的解释，直接看代码就知道Vue用法是什么
效果图
代码我已上传到github
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
简单谈谈MySQL5.7 JSON格式检索
MySQL5.7版本开始支持JSON格式,在创建表时,可以指定列表的数据类型为JSON,但是如何在JSON格式上创建索引呢?? 本人做了一个简单测试. 第一步:建立一个包含JSON类型的表: CREATE TABLE json_test` ( id` int (8) NOT NULL AUTO_INCREMENT, content` json NOT NULL , PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 第二步:初始化数据
-
JS实现简单的二元方程计算器功能示例
本文实例讲述了JS实现简单的二元方程计算器功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>二元方程</TITLE> <META NAME="Author" CONTENT=""> <META NAME="
-
JS数组返回去重后数据的方法解析
话不多说,请看代码: function removeRepeat(data) { var temp = ""; var mainData = []; for (var i = 0; i < data.length; i++) { if (!data[i].parent) { temp = data[i]; for (var j = 0; j < data.length; j++) { if (temp.DeliveryType == data[j].DeliveryType
-
Node.js学习入门
开始之前,安利一本正在看的书<站在两个世界的边缘>,作者程浩,上帝丢给他太多理想,却忘了给他完成理想的时间.OK,有兴趣的可以看一看. node.js如标题一样,我也是刚开始接触,大家一起学习,有不当的地方望指正.node.js是做什么的,有什么优势等问题.首先,它是什么,它是采用C++语言编写而成的,是一个JavaScript的运行环境,也就是说:可以编写系统级或者服务器端的JavaScript代码,交给node.js来解释执行.也就是说他是一个服务器端JavaScript解释器,它的目标是
-
IOS与网页JS交互详解及实例
IOS与网页JS交互 随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值.比如携程APP中一个热门景点的网页中,点击某个景点,可以跳转到原生中的该景点详情页控制器. 为此,我整理了三种最常用最便捷有效的OC与JS交互的方式,供大家学习交流. 第一种:JS给OC传值. 1. 技术方案:使用JavaScriptCore.framework框架 2. 使
-
JS求解三元一次方程组值的方法
本文实例讲述了JS求解三元一次方程组值的方法.分享给大家供大家参考,具体如下: // 求用js 码一段代码求 三元一次方程组的值! // a1 = y * b1 + z * c1 - d1 * x; (1) // a2 = y * b2 + z * c2 - d2 * x; (2) // a3 = y * b3 + z * c3 - d3 * x; (3) // (1) - (2) // a1 - a2 = y * (c1 - c2) + z * (d1 - d2) (4) // (1) - (
-
通过AngularJS实现图片上传及缩略图展示示例
通过AngularJS实现图片上传及缩略图展示示例,废话不多说了,具体如下: 从项目中截出的代码 HTML部分: <section> <img src="image/user-tuijian/tuijian_banner.png" /> <div> <form ng-submit="submit_form()"> <input type="text" name="aaa"
-
AngularJS框架的ng-app指令与自动加载实现方法分析
本文实例分析了AngularJS框架的ng-app指令与自动加载实现方法.分享给大家供大家参考,具体如下: ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的.如果想要实现自动加载,那么就不能让ng-app带有属性值. <html> <body ng-app> <div>div1:{{1+3*2}}</
-
深入理解Angularjs向指令传递数据双向绑定机制
下面来先看一个简单例子 <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../bootstrap.min.js"> </
-
过期软件破解办法实例详解
过期软件破解方法: 如果你看到了这篇博文,绝对保证不虚此行.仅仅5行脚本代码,即可破解99%的过期软件. 这件事的背景:最近在找了一些学习资料,其中有Rational Rose画的图,好久没用过它了.今天安装好,导入许可文件,结果问题出现了,提示没有激活.怎么回事??仔细一看,原来许可文件到2013年12月份就过期了(乌鸦飘过...) 在网上找了半天也没有找到一个新的许可文件,结果一狠心,手动改了一下日期,再启动,ok了,把时间再改回来.本来事儿到这儿就完了.但是结果光今天一天就手动改了好几次系
-
Highcharts＋NodeJS搭建数据可视化平台示例
前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建.下面分享一下整个开发过程的流程,以及使用Highcharts框架的经验. 一.数据的读取 由于数据库使用的是MySQL数据库,在NodeJS中,可以使用NodeJS中的mysql模块进行mysql数据库的相关操作,通过npm安装即可. 1.数据库基本配置 为了方便,我们最好先进行一个数据库连接的基本配置,mysql模块需要的配置信息如下: var connection = mysql.createConne
-
js实现复选框的全选和取消全选效果
在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: 以下是代码: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://hovertree.com/" /> <titl