锐客网

  1. 首页 > it技术 > >

2018-08-09

## vue day1
## 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="https://www.it610.com/article/data里面的属性"
v-bind 想绑定什么属性就绑定什么属性
## 循环渲染
v-for 可以渲染数组和对象
1.渲染数组
1)在标签的属性位置写上v-for = "item in arr",
item 代表数组中的每一项, arr 表示要渲染的数组
2)v-for="(item,index) in arr"
2.渲染对象
v-for ="valuein obj"
v-for = "(value, key, index) in obj"
## v-model 双向数据绑定,就是view 和model数据同步绑定.实时更新
【2018-08-09】但是只能用在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的时候,

    推荐阅读


    上一篇：029｜迷茫时，向一流智慧的人看齐

    下一篇：2021-03-20