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="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)