初识Vue.js

初识Vue.js

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



MVC 和 MVVM设计模式

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

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



Vue的使用

    第一个Vue应用Demo

在这里插入图片描述

<!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

在这里插入图片描述

<!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

在这里插入图片描述

<!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){
    		//过滤语句
    	}
    }
})
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页