Vue MVVM模式and语法、命令
程序员文章站
2024-02-08 21:57:34
...
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调用总会执行该函数。
鉴于两者的区别,我们根据其需求和场景进行合理的选择。