初识Vue.js(二)

Vue.js 同时被 2 个专栏收录
9 篇文章 0 订阅

学习任何一个框架,从一个Hello World应用开始,是最快了解该框架的途径。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Vue实例</title>
		
	</head>
	<body>
		<div id='app'>
			<input type="text" v-model="name" placeholder="请输入你的名字">
			<h1> 你好,{{name}}</h1>		
		</div>
		<script src="img/js/vue.js"></script>
		<script>
			var app=new Vue({
				el:'#app',
				data:{
					name:''
				}	
			})
		</script>
	</body>
</html>

这是一段简单的不能再简单的代码,但却展示出了Vue.js最核心的功能:数据的双向绑定,在输入框输入的内容会实时展示在页面的h1标签内。

什么是指令

  • 在vue中提供一些对于页面+数据的更为方便的操作,这些操作就叫做指令。
    • 譬如在HTML页面中这样使用
  • 在vue中v-xxx就是vue的指令
  • 指令就是以数据去驱动DOM行为的,简化DOM操作

常用的指令

  • v-text 不可解析html标签
  • v-html 可解析html标签
  • v-if 做元素的插入(append):true和移除(remove)false操作。
  • v-else-if
  • v-else
  • v-show display:none 和display:block的切换
  • v-for
    • 数组 item,index
    • 对象 value,key ,index

2.1 Vue实例与数据绑定

vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)

例子:

  • 单向数据绑定 内存改变影响页面改变。这里的内存是js中定义的变量。
  • v-bind就是对属性的简单赋值,当内存中值改变,还是会触发重新渲染

vue双向数据流 v-model ,后面不需要接value, 只作用于有value属性的元素。

例子:

  • 双向数据绑定 页面对于input的value改变,能影响内存中name变量
  • 内存js改变name的值,会影响页面重新渲染最新值

事件绑定v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名"

  • 事件名可以是原生也可以是自定义的

总结

v-model 双向数据绑定

  • vue页面改变影响内存(js)
  • 内存(js)改变影响vue页面

v-bind 单向数据绑定只是内存(js)改变影响vue页面

2.1.1 实例与数据
Vue.js应用的创建很简单,通过构造函数Vue就可以创建一个Vue的根实例,并启动Vue应用:

var app=new Vue({
el:document.getElementById('app'),
				data:{
					name:''
				}	
})

变量app就代表了这个Vue实例。事实上,所有的代码都是一个对象,写入Vue实例的选项内的。
首先,必不可少的一个选项就是el,el用于指定一个页面中已存在的DOM元素来挂载Vue实例,它可以是HTMLElement,也可以是Css选择器。

el:document.getElementById('app')

挂载成功以后,我们可以通过app.$el来访问该元素。Vue提供了很多常用的实例属性和方法。
回顾刚开始的Hello World代码,在input标签上,有一个v-model的指令,它的值对应于我们创建的Vue实例的data选项中的name字段,这就是Vue的数据绑定。
通过Vue实例的data选项,可以声明应用内需要双向绑定的数据。建议所有会用到的数据预先在data内声明,这样不至于将数据散落在业务逻辑中,难以维护。
Vue实例本身也代理了data对象里的所有属性,所以可以这样访问

	var app =new Vue({
				el:'#app',
				data:{
					
					aa:2
				}	
			})
	console.log(app.aa);	

除了显示的声明数据外,也可以指向另外一个已有的变量,并且他们之间默认建立了双向绑定,当修改其中一个的时候,另外一个也会一起变化。

var app =new Vue({
				el:'#app',
				data:myData
			})
		console.log(app.a);	
		//修改属性,原属性也随之修改
		app.a=2;
		console.log(myData.a);
		//修改原数据,Vue数据也随之修改
		//myData.a=3;
		//console.log(app.a);

2.1.2 生命周期
每个Vue实例创建的时候,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,我们可以利用这些钩子,在合适的时候执行我们的业务逻辑,类似于jQuery的ready()方法。

$(document).ready(function(){
 /*当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档,因此无需选择器。*/
 
});

Vue的生命周期钩子与之类似,比较常用的有:

  • created 实例化创建完成之后调用,此阶段完成了数据的观测等,但是尚未挂载,$el还不可用,需要初始化处理一些数据的时候比较有用。
  • mounted el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。
  • beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener 监听的事件等。

这些钩子与el和data类似,也是作为选项写入Vue实例内,并且钩子的this指向的是调用它的Vue实例:

var app =new Vue({
				el:'#app',
				data: {
					a:2
				},
				created:function (){
					console.log(this.a);//2
				},
				mounted:function (){
					console.log(this.$el);
					
				}
			})

2.1.3 插值与表达式
使用双大括号(Mustache 语法) “{{ }}”是最基本的文本插值语法,它会自动将我们双向绑定的数据实时显示出来

<body>
		<div id='app'>
			{{book}}
		</div>
		<script src="img/js/vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					book: '《Vue.js实战》'
				}

			})
		</script>
	</body>

大括号里面的内容会被替换成《Vue.js实战》,通过任何方法修改数据book,大括号的内容都会被实时替换,比如下面的这个实例,实时显示当前的时间,每秒更新:

<body>
		<div id='app'>
			{{date}}
		</div>
		<script src="img/js/vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					date:new Date()
				},
				//实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el 还不可用。需要初始化处理一些数据时会比较有用  
        created:function () {  
  
        },  
       mounted:function(){
       	//声明一个变量指向Vue实例this,保证作用域一致。
       	this.timer=setInterval(function(){
       		_this.date=new Date();
       		
       		
       	},1000);
       },
       beforeDestroy:function(){
       	if(this.timer){
       		clearInterval(this.timer)
       	}
       	
       }
			})
		</script>
	</body>

在{{ }}中,除了简单的绑定属性值外,还可以使用JavaScript表达式进行简单的运算、三元运算符等。
vue只支持单个表达式,不支持语句和流程控制。另外,在表达式中,不能使用用户自定义的全局变量,只能使用Vue白名单内部的全局变量,例如Math和Date。
2.1.4 过滤器
Vue.js支持在{{ }}插值的尾部·添加一个管道符“|”对数据进行过滤,经常用于格式化文本,比如字母全部大写,货币千位使用逗号分隔等。过滤的规则是自定义的,通过给Vue实例添加选项filter来设置,例如时间格式化处理。

<body>
		<div id='app'>
			
			 {{ date | formatDate }}  
		</div>
		<script src="img/js/vue.js"></script>
		<script>
			//在月份、日期。小时等小于10时前面补0
			var padDate=function(value){
				return value<10 ? '0'+value:value;
			};
		</script>
		<script>
			
			var app = new Vue({
				el: '#app',
				data: {
					date:new Date()
				},
				filters:{
					 formatDate:function(value){
					var date=new Date(value);
					var year=date.getFullYear();
					var month=padDate(date.getMonth()+1);
					var day=padDate(date.getDate());
					var hours=padDate(date.getHours());
					var minutes=padDate(date.getMinutes());
					var seconds=padDate(date.getSeconds());
				//将整理好的数据返回出去
                return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds;  
				   }  
        },  
        //实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el 还不可用。需要初始化处理一些数据时会比较有用  
        created:function () {  
  
        },  
        //el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始  
        mounted:function () {  
            var _this = this;  //声明一个变量指向Vue实例this,保证作用域一致  
            this.timer = setInterval(function(){  
                _this.date = new Date();  //修改数据date  
            },1000)  
        },  
        //实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等  
        beforeDestroy:function(){  
            if(this.timer){  
                clearInterval(this.timer);  //在Vue实例销毁前,清除我们的定时器  
            }  
        }  
    })  
</script>  

	</body>

过滤器可以串联:

{{ message | filterA | filterB }}

在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数,因此可以接收参数:

{{ message | filterA('arg1', arg2) }}

这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 ‘arg1’ 作为第二个参过滤器应当用于简单的文本转换,如果要实现更为复杂的数据交换,应当使用计算属性。数,表达式 arg2 的值作为第三个参数。
2.2 指令与事件
指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀V-。指令的主要职责就是当其表达式的值改变时,相应地将某些行为应用到DOM上,以v-if为例:

<body>
		<div id='app'>
			<p v-if="show"> 显示这段文本</p>
			
		</div>
		<script src="img/js/vue.js"></script>
		<script>
			
			var app=new Vue({
				el:'#app',
				data:{
					show:true
					
				}
				
			})
		</script>
		

	</body>

当数据show的值为true时,p元素会被插入,为false市则会被移除。数据驱动DOM是Vue.js的和核心理念,所以不到万不得已时不要主动操作DOM,你只需要维护好数据,DOM的事情Vue会帮我们优雅的处理。
首先了解v-bind和v-on。
v-bind的基本用途是动态更新HTML元素上的属性,比如id,class等。

<body>
		<div id='app'>
			<a v-bind:href="url"> 链接 </a>
	      <img v-bind:src="imgUrl">		
		</div>
		<script src="img/js/vue.js"></script>
		<script>
			
			var app=new Vue({
				el:'#app',
				data:{
					url:'img/images/001.jpg',
					imgUrl:'img/images/002.png'
				}
				
			});
		</script>
		

	</body>

上述示例中的链接地址与图片的地址都与数据进行了绑定,当通过各种方式改变数据的时候,链接图片都会自动更新。

另外一个非常重要的指令就是v-on,它用来绑定事件监听器,这样我们就可以做一些交互了。

	<body>
		<div id='app'>
			<p v-if="show">这是一段文本</p>
			<button v-on:click="handleClose">点击隐藏</button>
		
		</div>
		<script src="img/js/vue.js"></script>
		<script>
			
			var app=new Vue({
				el:'#app',
				data:{
					show:true
				},
				methods:{
					handleClose:function(){
						this.show=false;
					}
					
				}	
			});
		</script>
	</body>

在button按钮上,使用v-on:click给该元素绑定了一个点击事件,在普通元素上,v-on可以监听原生的DOM事件,除了click外,还有dbclick、keyup、mousemove等,表达式可以是一个方法名,这些方法都写在Vue实例的methods属性内,并且是函数的形式,函数内的this指向的是当前Vue实例本身,因此可以直接使用this.xx的形式来访问或者修改数据,如示例中的this.show=false;把数据show修改了为false,所以点击按钮的时候,p元素被移除了。
表达式除了方法名字,也可以是一个内联语句,上例也可以改写为

<body>
		<div id='app'>
			<p v-if="show">这是一段文本</p>
			<button v-on:click="show=false">点击隐藏</button>
		
		</div>
		<script src="img/js/vue.js"></script>
		<script>
			
			var app=new Vue({
				el:'#app',
				data:{
					show:true
				}
				
			});
		</script>
	</body>

如果绑定的事件要处理复杂的业务逻辑,还是在methods里面声明一个方法,这样可读性强也便于维护。
Vue.js将methods里的方法也代理了,所以也可以像访问Vue数据那样来调用方法。

<body>
		<div id='app'>
			<p v-if="show">这是一段文本</p>
			<button v-on:click="handleClose">点击隐藏</button>
		
		</div>
		<script src="img/js/vue.js"></script>
		<script>
			
			var app=new Vue({
				el:'#app',
				data:{
					show:true
				},
				methods:{
					handleClose:function(){
					this.close();	
					},
				close:function(){
					this.show=false;
				}
					
				}
				
			});
		</script>
	</body>

2.3 语法糖

语法糖是在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发。
Vue.js的V-build和V-on指令都提供了语法糖,也可以说是缩写,比如v-bind,可以缩写为一个冒号:
v-on直接用@来缩写。

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值