Vue MVVM模式and语法、命令

柔情只为你懂 2023-07-19 15:27 50阅读 0赞

###  ###

*  MVVM双向数据绑定
 *  语法、命令
 *   *  v-model
     *  \{ \{ \}\}模板语法
     *  v-text
     *  v-html
     *  v-bind
     *  v-on
     *  v-for
 *  计算属性

# MVVM双向数据绑定 #

Model - View – ViewModel 模型－视图－视图模型  
![在这里插入图片描述][20200331105907881.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70]  
View改变后通过事件监听（Dom Listeners）通知model 使dom改变  
Model改变时通过数据绑定更新view

# 语法、命令 #

## v-model ##

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

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

效果： input内容改变 p标签内容随着改变  
![在这里插入图片描述][2020033111113823.png]

## \{ \{ \}\}模板语法 ##

输出纯文本内容

<p>{ {  message }}</p>
    
    data:{ 
    	message: 'message'
    }

效果：  
![在这里插入图片描述][20200331111448990.png]

## v-text ##

输出纯文本内容

<h1 v-text="vText">222</h1>
    
    data:{ 
    	vText: '<p>v-text</p>',
    }

效果：（data中的内容会覆盖标签的内容）  
![在这里插入图片描述][2020033111172311.png]

## v-html ##

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

<h3 v-html="vHtml">s777s</h3>
    
    data:{ 
    	vHtml: '<p>v-html</p>',
    }

效果：（data中的内容会覆盖标签的内容）  
![在这里插入图片描述][20200331141157662.png]

## v-bind ##

用于属性绑定

语法 v-bind:title="msg"
    简写 :title="msg"
    
    <input :type="bind" name="" id="" value="按钮" :title="vbind" />
    
    data: { 
    	bind:'button',
    	vbind:'这是title'
    }

效果：  
![在这里插入图片描述][20200331142316413.png]

## v-on ##

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

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

## v-for ##

相当于js中的for循环，可以直接将索引带出来  
![在这里插入图片描述][20200331143100527.png]

<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'}
    	]
    }

效果：  
![在这里插入图片描述][20200331143441665.png]

# 计算属性 #

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

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

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

[20200331105907881.png]: /images/20230528/f9191cd8b536461eaeda138c1036171d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hxYWlueW8_size_16_color_FFFFFF_t_70]: /images/20230528/7eb78f8d1c0c46c4a8131d88750503ae.png
[2020033111113823.png]: /images/20230528/83c1f34c843944c7a360a7a2283addd2.png
[20200331111448990.png]: /images/20230528/a7d1e179504d43b39383f80f849c1d81.png
[2020033111172311.png]: /images/20230528/391ec381d56d434aac8b7426194b46d1.png
[20200331141157662.png]: /images/20230528/ecdc78fd55b5472d9a1f07d541c1b894.png
[20200331142316413.png]: /images/20230528/5b220b6942f246de9426af23f2d57c77.png
[20200331143100527.png]: /images/20230528/1fd39334538546dbac7a63d9f47b3163.png
[20200331143441665.png]: /images/20230528/8c1713f0b56746988dd551fe2c427ad3.png