美文网首页
2018-08-09

2018-08-09

作者: ellacheng | 来源:发表于2018-08-09 19:47 被阅读0次

MVVM 是什么?

M 是model数据模型

V 是views 试图模型

VM 是监听module数据模型和view数据模型的

vue 的使用方法
vue的快捷方式

插值表达式的合法用法

1.表达式
2.三元运算符

插值表达式的作用: 处理数据模型的, 渲染data数据

v-text 指令可以用来渲染文本,增强html标签功能

v-开头的都是指令
v-text和差值表达式的区别, 差值表达式写在innerHTML位置, 二v-text 写在标签属性里
所以常用的是差值表达式

v-html

可以用来渲染带标签的文本, 在网站上动态渲染比较危险,容易导致xss攻击

v-bind

用来动态绑定属性, v-bind:属性名="data里面的属性"

v-bind 的简写方式

:src="data里面的属性"
v-bind 想绑定什么属性就绑定什么属性

循环渲染

v-for 可以渲染数组和对象
1.渲染数组
1)在标签的属性位置写上v-for = "item in arr",
item 代表数组中的每一项, arr 表示要渲染的数组
2)v-for="(item,index) in arr"
2.渲染对象
v-for ="value in obj"
v-for = "(value, key, index) in obj"

v-model 双向数据绑定,就是view 和model数据同步绑定.实时更新

但是只能用在input select textarea 3个标签

v-on 用来监听dom 事件

使用方法: 1.在标签的属性位置, 写上v-on:任意的事件类型="执行的函数"
在methods对象里面定义函数, 注意在methods里面获取data 中的属性, 要加上this,
2.@任意事件类型="执行的函数"
3.通过执行函数添加参数
4.通过执行函数添加event参数传递事件对象, 只能是event,不能带引号
5.事件修饰符可以给时间添加特殊功能 .prevent(代表组织默认行为) .stop
6.可以给键盘的按键相关事件添加按键修饰符, 例如enter,输入框

v-if 控制元素的显示和隐藏

v-if = "布尔值", true代表元素显示, false 隐藏

v-show 控制元素的显示和隐藏

v-show = "布尔值", true代表元素显示, false 隐藏
两者区别
v-if 通过控制dom来控制元素的显示和隐藏,涉及到一异步数据渲染的时候
v-show 通过样式display来控制元素的显示和隐藏, 大量操作dom的时候,

相关文章

网友评论

      本文标题:2018-08-09

      本文链接:https://www.haomeiwen.com/subject/qogcbftx.html