01. vue是什么

最新推荐文章于 2022-09-02 09:19:34 发布

碵蝎

最新推荐文章于 2022-09-02 09:19:34 发布

阅读量829

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/QQ408896436/article/details/56675358

版权

vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

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>

碵蝎

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
01. vue是什么

vue是什么?在很久很久以前，我们用脚本修改某个html标签里的值的时候，是这样的：document.getElementById('#test').innerHTML = 'HELLO'现在使用了vue之后，你只需要修改一个值为HELLO，模块里的数据就会被更新。你在也不需要查找节点，然后更新数据vue具有如下特点：简洁： HTML 模板 + JSON 数据，再
复制链接

扫一扫