Vue.js实战——数据绑定和第一个Vue应用（一）

最新推荐文章于 2022-10-09 09:03:02 发布

Aran_

最新推荐文章于 2022-10-09 09:03:02 发布

阅读量254

点赞数

分类专栏： # Vue基础文章标签： vue js javascript vue.js es6

本文链接：https://blog.csdn.net/Aran_/article/details/104668746

版权

Vue基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

参考：《Vue.js实战》梁灏

1. Vue实例与数据绑定

1.1 Vue实例与数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	 
	<div id="app"></div>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				a:2
			} 
			
		});
		console.log(app.a);
		console.log(app.$el);
	</script>
	</body>
</html>

app代表了这个Vue实例
el用于指定一个页面中已存在的DOM元素来挂载Vue实例，可以是HtmlElement，也可以是css选择器，挂载成功后，可通过app.$el来访问该元素
data选项可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护。

除显式声明数据外，亦可以指向一个已有的变量，且默认二者之间存在双向绑定关系，如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	 
	<div id="app"></div>
	<script type="text/javascript">
		var mydata = {
			a:2
		}
		var app = new Vue({
			el:"#app",
			data:mydata
			
		});
		console.log(app.a);
	 
		app.a = 3;
		console.log(mydata.a);//3
		
		mydata.a = 4;
		console.log(app.a); //4
		 
	</script>
	</body>
</html>

1.2 生命周期

常用的Vue生命周期钩子：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app"></div>
		
		<script type="text/javascript">
			var app = new Vue({
			  el:"#app",
			  data:{
				  a:2
			  },
			  created: function(){
			  	console.log(this.a);
			  },
			  mounted:function(){
			  	console.log(this.$el);
			  }
			});
		</script>
	</body>
</html>

1.3 插值与表达式

基本语法：{{ }}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插值与表达式</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">{{ date }}</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					date:new Date()
				},
				mounted() {
					 
					var _this = this
					this.timer = setInterval(function(){
					 
						_this.date = new Date();
					},1000);
				},
				beforeDestroy() {
					if(this.timer){
						clearInterval(this.timer);
					}
				}
			});
		</script>
	</body>
</html>

v-html用于输出HTML而非纯文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-html</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" v-html="link"></div>
		
		
		<script type="text/javascript">
			var app = new  Vue({
				el:"#app",
				data:{
					link:"<a href='http://www.baidu.com'>这是个链接，不是纯文本</a>"
				}
			})
		</script>
	</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>{{}}中的简单运算</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ number / 100 }}
			<br>
			{{ isOk ? '确定':'取消' }}
			<br>
			{{text.split(",").reverse().join(",")}}
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					number:100,
					isOk:false,
					text:'123,456'
				}
			})
		</script>
	</body>
</html>

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

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

1.4 过滤器

Vue.js 支持在{{ }}插值的尾部添加一个管道符“（|）”对数据进行过滤，通过给Vue实例添加选项filters来设置：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
	 <div id="app" v-cloak>{{ date | formatDate }}</div>
		 
		 <script type="text/javascript">
		 	//在月份、日期、小时等小于10时前面补0
			
			var padDate = function(value){
				return value <10 ? '0' + value : value;
			}
			
			var app = new Vue({
				el:"#app",
				data:{
					date:new Date()
				},
				filters:{
					formatDate(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; 
					}
				},
				mounted:function(){
					var _this = this;
					this.timer = setInterval(function(){
						_this.date = new Date();
					},1000);
				},
				beforeDestroy: () => {
					if(this.timer){
						clearInterval(this.timer);
					}
				}
			})
		 </script>
	</body>
</html>

Aran_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js实战——数据绑定和第一个Vue应用（一）

参考：《Vue.js实战》梁灏1.1 Vue实例与数据绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.min.js" type="text/javascript" ch...
复制链接

扫一扫