Vue学习之路

最新推荐文章于 2023-03-10 10:43:13 发布

凡心所致

最新推荐文章于 2023-03-10 10:43:13 发布

阅读量228

点赞数

分类专栏： Vue学习之路

本文链接：https://blog.csdn.net/qq_38384568/article/details/80898965

版权

Vue学习之路专栏收录该内容

7 篇文章 0 订阅

订阅专栏

入门程序：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello world</title>
</head>
<body>
	<div id="app">
		<input type="text" v-model="name" placeholder="你的名字" />
		<h1>您好，{{name}}</h1>
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				name:''
			}
		});
	</script>
</body>
</html>

Vue.js应用创建，通过Vue的构造函数空就可以创建一个vue根实例，并启动Vue应用

var app = new Vue({
    //选项			
});

变量app就代表了这个Vue实例。事实上，几乎所有的代码都是一个对象，写入Vue实例的选项内的。

必不可少的选项就是el。el用于指定一个页面中已存在的DOM元素来挂载Vue，它可以是HTMLElement实例，有可以是CSS选择器。

比如：

<div id="app"></div>
	<script type="text/javascript">
		var app = new Vue({
			el:document.getElementById('app')  // 或者是'#app'
		})

	</script>

可以通过 app.$el 来访问该元素。

在input标签上的 v-model，它的值对应我们创建的Vue实例的data选项中的name字段，这就是vue的数据绑定。

Vue实例本身也代理了data对象里的所有属性，

<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				a:2
			}
		})
		console.log(app.a);	//2
	</script>

除了显示的声明数据外，也可以指向一个已有的变量

<div id="app"></div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		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
	</script>

Vue的生命周期钩子，比较常用的有:

created:创建完成后调用，这时候$el还不可用。

mounted：el挂载到实例上后调用，一般第一个业务逻辑会在这里，

beforeDestroy:实例销毁之前调用。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js的生命周期</title>
</head>
<body>
	<div id="app"></div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				a:2
			},

			created:function(){
				console.log(this.a);	//2
			},
			mounted : function(){
				console.log(this.$el);	//<div id="app"></div>
			}
		});
	</script>
</body>
</html>

插值和表达式

使用双大括号是最基本的文本插值方法，它会自动将双向绑定的数据实时的显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>插值和表达式</title>
</head>
<body>
	<div id="app">
		{{date}}
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		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);
				}
			}

		});

	</script>
</body>
</html>

有时候想输出HTML,而不是纯文本: v-html

实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>输出纯文本</title>
</head>
<body>
	<div id="app">
		<span v-html="link"></span>
		<span v-pre>{{这里的内容将不会被编译}}</span>
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				link:'<a href="http://www.baidu.com">这是一个连接</a>'
			}
			
		});
	</script>
</body>
</html>

如果想使用{{}}而又不想被编译，则使用:v-pre。如上图所示，如果不使用v-pre，则报错误。

简单运算：

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

Vue的过滤器

在插值的尾部添加一个管道符"|"，对数据进行过滤。经常用于格式化文本。过滤规则自定义，使用filters来设置。例如上面的时间显示实例。修改如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时间过滤器</title>
</head>
<body>
	<div id="app">
		{{date | formatDate}}
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<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:function(value){		//这里的value就是需要过滤的数据，也就是data。
					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;		//声明一个变量指向Vue实例this，保证作用域一致
				this.timer = setInterval(function(){
					_this.date = new Date();	//修改date。
				}, 1000);
			},
			beforeDestroy:function(){
				if(this.timer){
					clearInterval(this.timer);
				}
			}


		});

	</script>
</body>
</html>

二、指令与事件

指令：前缀v-，比如v-if，v-html，v-pre等。

例子：v-if

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-if 实例</title>
</head>
<body>
	<div id="app">
		<p v-if="show">显示这段文本</p>
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				show:true;
			}
		});
	</script>
</body>
</html>

例子：v-bind 动态更新HTML元素上的属性，如id、class

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-bind的用法</title>
</head>
<body>
	<div id="app">
		<a v-bind:href="url">链接</a>
		<img v-bind:src="imgUrl">
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				url:'https://www.github.com',
				imgUrl:'http://xxx.xxx.xxx/img.png'
			}
		});
	</script>
</body>
</html>

例子：v-on绑定事件监听器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vi-on绑定事件监听器</title>
</head>
<body>
	<div id="app">
		<p v-if="show">这是一段文本</p>
		<button v-on:click="handleClose">点击隐藏</button>
	</div>
	<script src="./js/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				show:true
			},
			methods:{
				handleClose:function(){
					this.show = false;
				}
			}
		});
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vi-on绑定事件监听器</title>
</head>
<body>
	<div id="app">
		<p v-if="show">这是一段文本</p>
		<button v-on:click="handleClose">点击隐藏</button>
	</div>
	<script src="./js/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				show:true
			},
			methods:{
				handleClose:function(){
					this.close();
				},
				close:function(){
					this.show=false;
				}
			}
		});
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vi-on绑定事件监听器</title>
</head>
<body>
	<div id="app"></div>
	<script src="./js/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				show:true
			},
			methods:{
				init:function(text){
					console.log(text);
				}
			},
			mounted:function(){
				this.init('初始化时调用');	//初始化的时候调用
			}
		});
		app.init('通过外部调用');
	</script>
</body>
</html>