初识Vue.js

时间:2021-1-18 作者:admin

初识Vue.js

     MVC 和 MVVM设计模式
     Vue的使用
     Vue的生命周期
     Vue过滤器

MVC 和 MVVM设计模式

    MVC

	Model(模型):主要负责数据处理和运算
	View(视图):主要负责显示数据和用户交互
	Controller(控制器):主要负责接受输入的数据并控制选择使用哪个View显示

    MVVCM

	Model(模型) 、View(视图) 、ViewModel(控制器)

Vue的使用

    第一个Vue应用Demo

初识Vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="no-cache" />
		<title></title>
	</head>
	<body>
		<div id="app">
			{{ message}}
		</div>
		<script src="../js/vue.min.js"></script>
		<script>
			var elame={
				message:"Hello World"
				
			};
			var vm=new Vue({
				el:'#app',
				data:elame
			});
			
		</script>
	</body>
</html>

    双向数据绑定Demo

初识Vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="no-cache" />
		<title></title>
	</head>
	<body>
		<div id="app">
			{{ message}}
			<br />
			<input type="text" v-model="message"/>
		</div>
		<script src="../js/vue.min.js"></script>
		<script>
			var elame={
				message:"Hello World"
				
			};
			var vm=new Vue({
				el:'#app',
				data:elame
			});
			
		</script>
	</body>
</html>

Vue的生命周期

    Demo

初识Vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="no-cache" />
		<title></title>
	</head>
	<body>
		<div id="app">
			{{ title}}
			
		</div>
		<script src="../js/vue.min.js"></script>
		<script>
			
			var vm=new Vue({
				el:'#app',
				data:{
					title:''
				},
				created:function(){
					this.title="生命周期钩子函数"
					
				},
				mounted:function(){
					console.log(this.$el);
					console.log("模型title值:",this.title);
					console.log("mounted()钩子函数执行中。。。")
				}
			});
			
		</script>
	</body>
</html>

Vue过滤器

    全局创建过滤器
Vue.filter("过滤器名",function(val){
			//过滤语句
		});
    局部创建过滤器
var em=new Vue({
	el:#id,
    filters{
    	过滤器名:function(val){
    		//过滤语句
    	}
    }
})
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。