天天看点
返回

Vue（一）（Vue和jQuery对比，基本指令，事件，计算属性，监听）

什么是Vue？

  • 概念：渐进式JavaScript框架
  • 作用：动态构件用户界面
  • 特点：前端js库，是一个精简的MVVM，它专注于MVVM模型的viewModel层，**通过双向数据绑定吧view和model层连接起来，**通过对数据的操作就可以完成对页面视图的渲染。

Vue和jQuery对比

  • jQuery：是使用选择器来选取DOM对象，对其进行赋值，取值，事件绑定等操作，其实和原生的HTML的区别是在于可以方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val()，它还是依赖DOM元素的值。
  • Vue：则是通过Vue对象将数据和View完全分离开了，对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象实现view层和model层相互的绑定，这就是MVVM模式。

一.Vue的特点

1.虚拟DOM
运行js的速度是很快的，大量的操作DOM就会很慢，时常在更新数据后会重新渲染页面，这样造成在没有改变数据的地方重新渲染了DOM节点，这样就造成了很大程度上的资源浪费。
利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的接口称为虚拟DOM。
当数据发生变化时，能够智能地计算重新渲染组件的最小代价并应用到DOM操作上。
2.Vue实例

每一个应用都是通过Vue这个构造函数创建根实例来启动Vue对象。对象包括挂载元素，数据，模板，方法等。

el：挂载元素选择器
data:代理数据
methods：定义方法

二 .Vue的使用

1.指令

Vue中指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上，指令以 v-开头。

常用指令

  • v-model：是作用于input/textarea等表单控件的双向数据绑定指令，当我们修改表单元素的内容，会自动的更新vue中的数据。
  • v-show:称为Vue中的条件渲染，它可以控制元素的隐藏和显示：通过元素的display属性值去控制。
  • v-if / v-else / v-else-if：也属于Vue中的条件渲染指令，作用于同v-show一样用于控制元素的显示和隐藏，不一样的是v-if的js表达式为假时，元素不会存在于DOM文档中的。
  • v-for：用于循环渲染一组数据（数组或者对象）

案例演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			用户名:<input type="text" name="username" id="" value="" v-model="name" />
			<h1 v-show="show">我是一段文本，会被显示</h1>
			<h1 v-show="hide">我是一段文本，会被隐藏</h1>
			<input type="text" name="" id="" value="" placeholder="输入你的成绩" v-model="score" />
			<h1 v-if="score>=80&&score<=100">优秀</h1>
			<h1 v-else-if="score>=60&&score<80">及格</h1>
			<h1 v-else-if="score<60">不及格</h1>
			<h1></h1>
			<ul v-for="obj in Arr">
				<li>{{obj.username}}&nbsp;{{obj.age}}</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				name:'张三',
				show:true,
				hide:false,
				score:0,
				Arr:[{
					'username':'张三',
					'age':19
				},
				{
					'username':'李四',
					'age':29
				},
				{
					'username':'王老虎',
					'age':24
				}]
			}
		})
	</script>
</html>

2.事件

（1）事件的绑定

Vue中，绑定事件采用@+事件属性名的方式，例如：@click点击事件。

（2）案例演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<!-- @click.prevent的方式可以阻止a标签的跳转 
			     @click.stop 阻止冒泡
				 @click.once 事件只触发一次-->
			<a href="v-if.html" @click.prevent="show()">点击</a>
			<!-- @keypress.enter 回车键
			      .delete 删除键-->
			输入信息:<input type="text" name="msg" id="" value="" placeholder="请输入内容" @keypress.enter="show1()"/>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				
			},
			methods:{
				show(){
					alert("a标签阻止跳转")
				},
				show1(){
					alert("正在搜索")
				}
			}
		})
	</script>
</html>

3.计算属性computed

（1）概念

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

（2）案例演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			姓:<input type="text" name="" id="" value="" v-model="xing"/>
			名字:<input type="text" name="" id="" value=""v-model="ming" />
		    全名:<input type="text" id="" value="" v-model="fullname" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				xing:'',
				ming:''
			},
			//计算属
			computed:{
				fullname:{
					//get函数中的属性一变化，这个get就调用
					get:function(){
						return this.xing+' '+this.ming
					},
					//fullname值发生变化 set方法就会被调用
					set:function(newValue){
						var arr=newValue.split(' ');
						this.ming=arr[0];
						this.xing=arr[1];
					}
				}
			}
		})
	</script>
</html>

4.属性值变化的监听watch

（1）概念

它是用来监测Vue实例上的数据变动

（2）案例演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="jisuan">
			<input type="text" name="" id="" value="" placeholder="请输入姓" v-model="xing" /><br>
			<input type="text" name="" id="" value="" placeholder="请输入名" v-model="ming" /><br>
			<input type="text" id="" value="" v-model="name" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#jisuan",
			data:{
				xing:'王',
				ming:'老五',
				name:'王 老五'
			},
			watch:{
				//name变化 ming和xing跟着变化 
				name:function(changename){
					var name=changename.split(' ');
					this.xing=name[0];
					this.ming=name[1];
				},
				//ming和xing变化 name跟着变化
				 xing:function(changexing){
					 this.name.split(' ')[0]=changexing
				 },
				 ming:function(changeming){
					 this.name.split(' ')[1]=changeming
				 } 
			}
		})
	</script>
</html>
JavaEE vue
上一篇: Vue入门（二）——基本语法和组件
下一篇: Vue入门（二）—— vue项目创建

继续阅读