Vue起步01-------浅解mvvm模型以及v-model指令

最新推荐文章于 2024-04-23 17:20:00 发布

燃情雪

最新推荐文章于 2024-04-23 17:20:00 发布

阅读量478

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/h1234561234561/article/details/89814130

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习前端三大框架之一的Vue时，首先我们得知道它的运作设计的基本模式----mvvm模式
一，mvvm模式
01，模型图
在这里插入图片描述
02，图解
m：模型，数据模型data
v：视图，html模板视图
vm：视图模型，创建的Vue的实例对象vm
DOM Listeners：Vue实例所挂载的目标对象中DOM节点的监听，并将改变值通过vm传递给model数据模型data
Datas Bindings：数据绑定，由于View里面的显示数据是绑定model中的Data数据，所以将DOM Listeners所监听的数据改变值同步到View，就实现了数据动态绑定。

二，基本结构
el：通过CSS选择器指定实例Vue的载体目标
data：数据的初始化，也就是上述的数据模型data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue_基本结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 
			/*
			 * v-model实现数据同步。
			 *mvvm模型
			 *m:模型，数据模型data
			 *v:视图，html模板视图
			 *vm:视图模型，创建的Vue的实例对象vm
			 *在实例对象vm中实现数据双向绑定的vm中主要是存在DOM Listeners和Datas Bindings
			 *DOM Listeners:DOM树的监听事件，并将改变值通过vm传递给model数据模型data
			 *Datas Bindings:数据绑定，由于View里面的显示数据是绑定model中的Data数据，所以就实现了数据动态绑定
			 */ -->
			<input type="text" v-model="name"/>
			<p>Hello,{{name}}</p>
			<p v-text="name"></p>
		</div>
	</body>
	<script src="js/vue2.0.js"></script>
	<script type="text/javascript">
		/**
		*注意：let是没有预处理机制的，所以所有调用行为都得在其初始化initialize之后才有效
		* 若是使用var声明，因为它不是声明函数，所以预处理机制只会在编译之前对其做声明处理
		* 而不做赋值处理
		*/
		let data = {
			name: "burningSnow",
			age: 21,
			gender: "male",
			select: ""
		}
		//防止外部代码对其data对象obj进行更改,冻结其对象obj使其他代码不能删除或更改任何属性。
		//Object.freeze(obj);
		//obj.name = "燃情雪";//无效
		//创建实例Vue对象
		const vm = new Vue({
			//提供一个实例的挂载目标，通过CSS选择器指定根元素RootElement
			el: '#app',
			//初始化数据
			data: data,
			methods: methods
		})
		
		/**
		 * 可以通过vm.$el获取根元素节点
		 * 注意：Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
		 */
		console.log(vm.$el === document.querySelector("#app"));//true
		console.log(vm.$data === data);//true
	</script>
</html>

三，v-model指令【多用于表单】
01，v-model指令其实是一个语法糖，是结合了v-bind指令属性绑定和数据模型data对象中的属性值更新【利用相应的触发事件实现】

02，可应用标签

<input>

<select>

<textarea>

03，语法糖实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue_v-model指令</title>
	</head>
	<body>
		<div id="app">
		//利用input事件
			<input type="text" :value="name" @input="Input"/>
			<p>Hello,{{name}}</p>
			//利用change事件
			<select :value="select" @change="Select">
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<p>selected:{{select}}</p>
			//利用input事件
			<textarea :value="textarea" @input="Textarea"></textarea>
			<p>{{textarea}}</p>
		</div>
	</body>
	<script src="js/vue2.0.js"></script>
	<script type="text/javascript">
		let data = {
			name: "burningSnow",
			age: 21,
			gender: "male",
			select: "",
			textarea: "你好"
		}
		
		let methods = {
			Input: function() {
				let e = event;
				this.name = e.target.value;
			},
			Select: function() {
				let e = event;
				this.select = e.target.value;
			},
			Textarea: function() {
				let e = event;
				this.textarea = e.target.value;
			}
		}
		
		const vm = new Vue({
			el: '#app',
			data: data,
			methods: methods
		})
	</script>
</html>

菜鸟爬行中…

燃情雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue起步01-------浅解mvvm模型以及v-model指令

学习前端三大框架之一的Vue时，首先我们得知道它的运作设计的基本模式----mvvm模式一，mvvm模式01，模型图02，图解m：模型，数据模型datav：视图，html模板视图vm：视图模型，创建的Vue的实例对象vmDOM Listeners：Vue实例所挂载的目标对象中DOM节点的监听，并将改变值通过vm传递给model数据模型dataDatas Bindings：数据绑定...
复制链接

扫一扫