2.1 Vue实例与数据绑定_vue自动把app变量指向dom元素-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40944700/article/details/88573075

2.1.1 实例与数据

<div id="app" >
	<input type="text" v-model="a" placeholder="你的名字" >
	<h1>你好，{{a}}</h1>
</div>
var app = new Vue({
	el:document.getElementById('app') , //或是'#app'
	data:{
		a:2
	}
})

1》变量app代表一个Vue实例。
2》配置项el必不可少，用于指定一个页面中已存在的DOM元素来挂载Vue实例，形式可以是HTMLElement,也可以是CSS选择器，挂载成功后可以访问该DOM元素的方式：app.$el。
3》配置项data用于声明应用内需要双向绑定的数据，建议所有会用到的数据都预先声明在data内，以免将数据散落在业务逻辑中难以维护。Vue实例本身也代理了data对象里的所有属性，因此可以这样访问：
console.log(app.a)； // 2
除了显示地声明数据外，也可以指向一个已有的变量，并且它们之间默认建立双向绑定，修改其中一个的值，另一个也会一起变化：

var mydata = {
	a:1
}
var app = new Vue({
	el:'#app',
		data:mydata
})							
console.log(app.a)；//1
//修改属性，原数据随着改变
app.a = 2;
console.log(mydata.a); //2
//反之，修改原数据，Vue属性也会修改
mydata.a = 3;
console.log(app.a); //3

2.1.2 生命周期

Vue生命周期钩子：
1》created 实例创建完成后调用，此阶段完成了数据的观测，但尚未挂载，el还不可用，需要初始化处理一些数据时会比较有用。
2》mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
3》beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener监听事件。
这些钩子与el和data类似，也是作为选项写入实例内，并且钩子的this指向的是调用它的Vue实例：

		<div is="app"></div>	
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>	
		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语法）“{{}}”时最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如：

	<div id="app">
		{{book}}
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				book:'《Vue.js实战》'
			}
		})
	</script>

大括号的内容都会被实时替换，比如下面的这个示例，实时显示当前的时间，每秒更新：

<div id="app">
	{{date}}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
	var app = new Vue({
		el:'#app',
		data:{
			date:new Date()
		},
		mounted:function(){
			var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
			this.timer = setInterval(function(){
				_this.date = new Date(); //修改数据date
			},1000);
		},
		beforeDestroy:function(){
			if(this.timer){
				clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
			}
		}
	})
</script>

输出HTML，而不是将数据解释后的纯文本，可以使用v-html：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 示例</title>
</head>
<body>
	<div id="app">
		<span v-html="link"></span>
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				link:'<a href="#">这是一个连接</a>'
			}
		})
	</script>
</body>
</html>

如果想显示{{}}标签，而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程，例如：

<span v-pre>{{这里的内容是不会被编译的}}</sapn>

在{{}}中，除了简单的绑定属性值外，还可以使用JavaScript表达式进行简单的运算、三元运算等，例如：

<div id="app">
	{{ number / 10 }}
	{{ isOK  ? '确定':'取消' }}
	{{ text.split(',').reverse().join(',') }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
	var app = new Vue({
		el:'#app',
		data:{
			number:100,
			isOK:false,
			text:'123,456'
		}
	})
</script>

Vue.js只支持单个表达式，不支持语句和流控制。另外，表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，例如Math和Date。以下是一些无效的示例：

<!--这是语句，不是表达式-->
{{var book = 'Vue.js实战'}}
<!--不能使用流控制，要使用三元运算-->
{{if(ok) return msg}}

2.1.4 过滤器
Vue.js支持在{{}}插值的尾部添加一个管道符“|”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给Vue实例添加选项filter来设置，例如实时显示时间，可以对时间进行格式化处理：

<div id="app">
	{{date | formatDate}}
</div>
<script>
	//在月份、日期、小时小于10前面补0
	var padDate = function(value){
		return value < 10 ? '0' + value : value;
	};
	var app = new Vue({
		el:'#app',
		data:{
			date:new Date()
		},
		filters:{
			formatDate:function(value){
				var date = new Date();
				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;
			}
		},
		mounted:function(){
			var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
			this.timer = setInterval(function(){
				_this.date = new Date(); //修改数据date
			},1000);
		},
		beforeDestroy:function(){
			if(this.timer){
				clearInterval(this.timer);//Vue实例销毁前，清除定时器
			}
		}
	})
</script>

同样的，也可以在创建Vue实例之前全局定义过滤器：

Vue.filter('formatDate',function(value){
	var date = new Date();
	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;
})
new Vue({
	//.....
})

过滤器可以串联：