一个例子轻松学会Vue.js
作者:饥渴计科极客杰铿 发布时间:2024-05-02 17:38:47
标签: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组件学习教程进行学习。
0
投稿
猜你喜欢
- 解决问题: 不使用for计算两组、多个矩形两两间的iou使用numpy广播的方法,在python程序中并不建议使用for语句,python中
- 一 MySQL WorkbenchMySQL Workbench提供DBAs和developers一个集成工具环境:1)数据库设计和建模2)
- 一. 什么是装饰器知乎某大佬如是说:内裤可以用来遮羞,但是到了冬天它没法为我们防风御寒,聪明的人们发明了长裤,有了长裤后宝宝再也不冷了,装饰
- 使用ASP设置指定站点CPU最大使用程度'=============================================
- js:controller:
- 网上看到一些例子,对于一个简单的3 级联动,都加上什么Struts, Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什
- 一、概述spark 有三大引擎,spark core、sparkSQL、sparkStreaming,spark core 的关键抽象是 S
- Doing INTERSECT and MINUS in MySQL Doing an INTERSECT An INTERSECT is
- 本周SELECT b.item,IFNULL(a.COUNT,0) AS VALUEFROM ( SEL
- 本文实例讲述了Python实现监控Nginx配置文件的不同并发送邮件报警功能。分享给大家供大家参考,具体如下:因为项目中经常涉及到多个Ngi
- 事先说明哦,这不是一篇关于Python异常的全面介绍的文章,这只是在学习Python异常后的一篇笔记式的记录和小结性质的文章。什么?你还不知
- 环境搭建下载安 * eego,bee1.开启gomod设置代理go env -w GO111MODULE=ongo env -w GOPROX
- 在一台新的申请服务器上安装Oracle,在创建数据库实例时,遇到Enterprise Manager配置失败问题,无法进行远程连接。操作系统
- 1、查看数据库的字符集数据库的字符集必须和Linux下设置的环境变量一致,不然会有乱码。以下两个sql语句都可以查到:select * fr
- 解决MySQL中文乱码的问题看到从数据库中取出的数据全部是“?????”,太让人郁闷了。网上有很多方法来解决这个问
- 今天在老师工作室做项目的时候,突然看到一个页面用了2种不同的传值类型,突然有了兴趣,想弄明白本质的区别,虽然以前用的知道2种的用法,但是还是
- 文章背景:某天,我的一个同事给我看了CSDN上面的一篇关于编程语言排行榜的文章,里面我看到VB还是排名很不错的,我就说,asp(vbscri
- 测试:IE6、IE7、FF3.014突发奇想的效果,主要突出构思,效果还比较粗糙,好好创意一下,应该可以引申出一些比较有新意的图片切换效果。
- 1.创建空字典>>> dic = {}>>> type(dic)<type 'dict&#
- 使用MySQL,安全问题不能不注意。以下是MySQL提示的23个注意事项:1、如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就