初识Vue.js（二）

傷城~ 2022-05-25 03:47 146阅读 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 语法） “\{ \{ \}\}”是最基本的文本插值语法，它会自动将我们双向绑定的数据实时显示出来

大括号里面的内容会被替换成《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直接用@来缩写。