1.2 Vue的MVVM

• view层:视图层,通常就是DOM层,主要作用向用户展示各种信息
• model层:数据层,从服务器请求的数据或者写死的数据
• viewmodel层:视图模型图,是view和model沟通的桥梁.一方面实现了数据的绑定,将model的必变实时反应到view中;另一方面实现了DOM的事件监听,dom发生事件改变model.

• 数据的代理(obj)

<div id="app">
	<h2>当前计数:{{counter}}</h2>
	<button type="button" @click="add">+</button>
	<button type="button" @click="sub">-</button>
</div>
<script type="text/javascript">
	const obj={
		counter:0
	}
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:obj,
		methods:{
			add:function(){
				this.counter++
			},
			sub:function(){
				this.counter--
			}
		}
	})
</script>

---

创建Vue实例传入的options

可以传入很多，现阶段先了解以下几项：

• el:

类型;string|HTMLElement（document.querySelector())

作用：决定Vue实例管理那一个DOM

• data:

类型：object|function（组件当中data必须是一个函数）

作用：Vue实例对应的数据对象

• methods:

类型：function

作用：定义属于实例的一些方法

---

插值操作-Mustache

Mustache：胡子/胡须，也就是双大括号

Museache语法中，不仅可以直接写变量，也可以写简单的表达式。{{firstName+lastName}}、{{firstName+' '+lastName}}、{{counter*2}}

---

v-once

只响应一次，后续不再根据数据变化做出响应。

<h2 v-once>{{message}}</h2>

---

v-html

解析HTML代码

<div id="app">
	<h2 v-html="url"></h2>
</div>
<script type="text/javascript">
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			url:"<a href='http://www.163.com'>163网站</a>"
		}
	})
</script>

---

v-text

和Mustache比较相似，都是用于显示数据

<div id="app">
	<h2 v-text="message">这里的数据会被覆盖，所以v-text不灵活</h2>
</div>
<script type="text/javascript">
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			message:'李银河'
		}
	})
</script>

---

v-pre

用于跳过编译，直接显示内容，使用场合很少。

<div id="app">
    //此处不解析message，直接显示{{message}}
	<h2 v-pre>{{message}}</h2>
</div>
<script type="text/javascript">
	const app=new Vue({
		//el指定要挂载的元素
		el:'#app',
		data:{
			message:'李银河'
		}
	})
</script>

---

v-cloak

防止Vue解析过慢时显示出未编译的Museache标签。

相当于在标签中增加了一个v-cloak属性，解析过后就删除了v-cloak属性

需要设置css样式才能实现效果。

<style type="text/css">
	[v-cloak]{
		display: none;
	}
</style>
<div id="app">
	<!-- 正常情况下此处因为延时，短时间内会直接显示 -->
	<h2>{{message}}</h2>
	<!-- 此处因为使用了v-cloak，将不会直接显示{{message}},但v-cloak还要使用CSS事先将其dispaly:none -->
	<h2 v-cloak>{{message}}</h2>
</div>
<script type="text/javascript">
	setTimeout(()=>{
		const app=new Vue({
			//el指定要挂载的元素
			el:'#app',
			data:{
				message:'李银河'
			}
		})
	},1000)
</script>