Vue MVVM模式and语法、命令

MVVM双向数据绑定

Model - View – ViewModel 模型－视图－视图模型


View改变后通过事件监听（Dom Listeners）通知model 使dom改变
Model改变时通过数据绑定更新view

语法、命令

v-model

v-model 在表单元素上创建双向数据绑定

<input v-model="vModel" />
<p>{{ vModel }}</p>

data:{
	vModel: "v-model"
}

效果： input内容改变 p标签内容随着改变

{{ }}模板语法

输出纯文本内容

<p>{{ message }}</p>

data:{
	message: 'message'
}

效果：

v-text

输出纯文本内容

<h1 v-text="vText">222</h1>

data:{
	vText: '<p>v-text</p>',
}

效果：（data中的内容会覆盖标签的内容）

v-html

解析过html元素后输出纯文本内容，相当于innerHTML

<h3 v-html="vHtml">s777s</h3>

data:{
	vHtml: '<p>v-html</p>',
}

效果：（data中的内容会覆盖标签的内容）

v-bind

用于属性绑定

语法 v-bind:title="msg"
简写 :title="msg"

<input :type="bind" name="" id="" value="按钮" :title="vbind" />

data: {
	bind:'button',
	vbind:'这是title'
}

效果：

v-on

用于监听dom事件、绑定事件 method中都是方法和函数。 js中的事件都可以使用

语法：v-on:click="say"  or  v-on:click="('参数',$event)"
简写：@click="say"
说明：绑定的事件从methods中获取

v-for

相当于js中的for循环，可以直接将索引带出来

<ul>
	<li v-for="item in items">
		{{item.msg}}
	</li>
	<li v-for="(item,index) in items">
		{{index+1}}-{{item.msg}}
	</li>
</ul>

data: {
	items :[
		{msg :'a'},
		{msg :'b'},
		{msg :'c'},
		{msg :'d'}
	]
}

效果：

计算属性

在一些比较复杂或是数据量比较大的，并存在一些依赖关系的时候，计算属性的优势就会凸显出来，此时使用计算属性会大大提高我们的性能。

计算属性：计算属性是基于依赖进行缓存的，只要依赖的数据没发生改变，我们就可以直接返回缓存的数据，而不需要每次都重复执行数据操作。

methods：只要发生重新渲染，method调用总会执行该函数。
鉴于两者的区别，我们根据其需求和场景进行合理的选择。