vue-day3

vue特性

1：数据驱动视图

vue会监听数据的变化，从而自动重新渲染界面

 2：双向绑定

在填写表单时，双向绑定可以在不操作DOM的前提下，自动把用户填写的数据同步到数据源中

1：mvvm

mvvm是vue实现数据驱动视和双向绑定的核心原理。他把每个页面都拆分成三个部分

View：当前页面所渲染的DOM结构

Model：当前渲染时所依赖的数据源

ViewModel：表示vue实例，是mvvm的核心

 mvvm的工作原理

ViewModel作为mvvm的核心，它把当前数据源和页面结构链接在一起

 2：使用vue

 3：vue指令与过滤器

 一：内容渲染指令

1：v-text

 

 2：v-html

 

 3：{{}} 插值表达式

 二：v-bind属性绑定指定

v-bind的属性绑定，简写 ：（用冒号代表属性绑定）

为元素的属性动态绑定属性值

 

扩展： JavaScript表达式，渲染语法可以进行一些简单的表达式操作

 三：v-on事件绑定指令

原生DOM事件onclick，oninput，onkeyup

替换为vue事件绑定为：v-on:click ,  v-on:input ,  v-on:keyup

vue事件绑定简写 @click ,  @input ,  @keyup

注意:通过v-on绑定的事件处理函数，需要在methods节点中声明

方法定义在methods节点中

事件对象$event

$event为特殊变量专门指向事件对象

 

 注意可以通过.target.style来改变绑定元素的样式

对当前元素进行操作

事件绑定传参

 

 事件修饰符

在原生js中经常调用prevenDefault（阻止默认行为）或stopPropagation（阻止冒泡）。

在vue中也有此类修饰符如

.prevent         阻止默认行为

.stop              阻止冒泡

.capture        以捕获形式触发当前事件处理函数

.once             绑定指触发一次

.self                只在event.target是当前元素自身时触发事件处理函数

使用：

 键盘事件修饰符

 四：v-model双向绑定指令

应用场景，辅助在不操作DOM的情况快速获取表单数据

 v-model的修饰符

.number                自动将输入的值转为数值类型

.trim                      自动过滤用户输入的首尾空白字符

.lazy                      在“change”时非“input”时更新

  五：条件渲染指令v-if,v-show

 v-if和v-show的区别

实现原理

v-if是动态的创建或移除DOM元素，从而控制元素在页面上的显示隐藏

v-show指令是动态的更改属性style=“display:none;”样式，从而控制元素在页面上的显示隐藏

性能消耗

v-if有更高的切换开销，运行条件很少时推荐使用v-if

v-show有更高的初始渲染开销，要频繁的切换，推荐使用v-showv-else

v-else和v-if配合使用

 v-else-if也要配合v-if使用

六：列表渲染

v-for用基于一个数组来循环渲染相似的UI结构

v-for需要使用  item in items 或者（item，index） in items 的特殊语法，其中：

item代表当前循环项

items代表当前要循环的数组

index当前索引

注意item，index索引为形参，可以根据需要重新命名列如（dataj，i） in items

 

 

 

 注意：当列表数据发生变化时，默认情况下vue会尽可能的复用已存在的Dom元素，从而提升渲染的性能，但是这样会导致有状态的列表无法被正确更新

为了保证在有状态的列表被正确更新的前提下，提升渲染性能，此时需要每一项提供一个唯一的key属性

 key值只能是字符串或者数字类型

key值必须唯一

建议把数据项的id值作为key值

七:过滤器(vue2可以用，vue3已经不用了)

过滤器常用于文本格式化

过滤器被添加在表达式的尾部，由管道符进行调用

 过滤器可以用在两个地方：插值表达式和v-bind属性绑定

定义在filters节点

 私有过滤器和全局过滤器

 连续调用多个过滤器

过滤器传参

 

 过滤器仅在vue2x和1x中支持，在vue3版本中剔除了过滤器的相关功能，

官方建议使用计算属性或者方法代替被剔除的过滤器功能