vue是什么?
在很久很久以前,我们用脚本修改某个html标签里的值的时候,是这样的:
document.getElementById('#test').innerHTML = 'HELLO'
现在使用了vue之后,你只需要修改一个值为HELLO,模块里的数据就会被更新。你在也不需要查找节点,然后更新数据
vue具有如下特点 :
简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。数据驱动: 自动追踪依赖的模板表达式和计算属性。
组件化: 用解耦、可复用的组件来构造界面。
轻量: ~24kb min+gzip,无依赖。
快速: 精确有效的异步批量 DOM 更新。
模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。
缺点 :
不支持ie8(包括ie8)以下的浏览器
官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/api/
vue具体有什么用?
我们先来看一个简单的需求 :(如下图)
1、从input框中填好数据
2、点击create按钮,生成到下面的表单中
3、表单中的delete键,能删除该行的数据
不使用vue框架编写的代码如下 :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<div class='div1'>
<p>name: <input type='text'></p>
<p>age : <input type='text'></p>
<p>sex : <select>
<option value='boy'>boy</option>
<option value='girl'>girl</option>
</select>
</p>
<a id='create' href="javascript:">create</a>
</div>
<div>
<table border="1" width="200" style='text-align:center;' cellspacing="0" cellpadding="0">
<tr>
<td>name</td>
<td>age</td>
<td>sex</td>
<td>delete</td>
</tr>
</table>
<table id='table2' border="1" width="200" style='text-align:center;' cellspacing="0" cellpadding="0">
<tbody>
<tr class='num1'>
<td>tom</td>
<td>18</td>
<td>men</td>
<td><a href="javascript:addEvent(1)">delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src='http://www.lcfbk.top/zepot.js'></script>
<script>
var num = 1;
$('#create').on('click', function(){
var name = $('#app .div1 input').eq(0).get(0).value;
var age = $('#app .div1 input').eq(1).get(0).value;
var sex = $('#app .div1 select').get(0).options[$('#app .div1 select').get(0).selectedIndex].value;
var msg = '<tr class=num'+(++num)+'><td>'+name+'</td><td>'+age+'</td><td>'+sex+'</td><td><a href="javascript:addEvent('+num+')">delete</a></td></tr>'
$('#table2 tbody').append(msg);
$('#app .div1 input').eq(0).get(0).value = $('#app .div1 input').eq(1).get(0).value = '';
});
function addEvent(val){
$('#table2 .num'+val).remove();
}
</script>
</body>
</html>
以上的脚本,有几个很蛋疼的问题
1、可读性差
2、需要获取元素,然后查找节点,在插入数据进行更新
3、若需要插入一大段数据,需要用字符串的形式插入。如上面的
<tr class=num'+(++num)+'><td>'+name+'</td><td>'+age+'</td><td>'+sex+'</td><td><a href="javascript:addEvent('+num+')">delete</a></td></tr>'
4、需要引入zepot.js, 不然代码量会更多
5、编写速度慢,易出错
在来看看使用vue来编写 (主要看脚本部分)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<div>
<p>name: <input type='text' v-model='newPerson.name'></p>
<p>age : <input type='text' v-model='newPerson.age'></p>
<p>sex : <select v-model='newPerson.sex'>
<option value='boy'>boy</option>
<option value='girl'>girl</option>
</select>
</p>
<a href="javascript:" v-on:click='createPerson'>create</a>
</div>
<div>
<table border="1" width="200" style='text-align:center;' cellspacing="0" cellpadding="0">
<tr>
<td>name</td>
<td>age</td>
<td>sex</td>
<td>delete</td>
</tr>
</table>
<table border="1" width="200" style='text-align:center;' cellspacing="0" cellpadding="0">
<tr v-for='(person,index) in people'>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
<td><a href="javascript:" v-on:click='deletePerson(index)'>delete</a></td>
</tr>
</table>
</div>
</div>
</div>
<script src='vue.js'></script>
<script>
var vm = new Vue({
el : '#app',
data : {
newPerson : {
name : '',
age : '',
sex : 'boy',
},
people : [{
name : 'tom',
age : 12,
sex : 'boy'
}]
},
methods : {
createPerson : function(){
this.people.push(this.newPerson);
this.newPerson = {name : '', age : '', sex : 'boy'}
},
deletePerson : function(index){
this.people.splice(index,1);
}
}
})
</script>
</body>
</html>
运行后,效果是和上面的代码是一致的。而且可读性很好,不需要自己获取节点更新数据。我们只要改变数据,页面就会自动进行更新。相信大家已经看到了vue的强大之处了。当然vue的功能不仅仅只有这样而已。
如何使用?
下载好vue.js的插件后,直接导入到html文件中即可。如 :<script src='vue.js'></script>
第一个例子,hello vue
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
{{txt}}
</div>
<script src='../js/vue.js'></script>
<script>
var vm = new Vue({
el : '#app',
data : {
txt : 'hello vue'
}
});
</script>
</body>
</html>