MVVM (Model-View-Viewmodel)

MVVM是什么?

• M 数据模型，主要来自后台数据
• V 视图层，前端页面
• VM 连接数据模型与视图层
• MVVM 是一种软件架构模式，类似于转换器，把数据暴露给视图层

VM是什么?

• VM在view(视图)层与model(数据模型)层建立连接，可以使用VUE对象实时监听数据变化,类似于一个中介，把数据传输给视图

插值表达式

• 用法：{{三元运算符}}，{{赋值表达式}},{{可以使用数组或字符串的方法}}
• 作用：根据需求改变数据

v-text 指令

• 写在标签属性里面，作用与插值表达式一样，将一短文本插入到DOM元素中

  <p v-text="attrName"><p>
  

v-html 指令

• 能够解析HTML标签
• 插值表达式、v-text指令、v-html指令区别

三种方式的区别

1.差值表达式用于需要对数据做处理时使用
2.v-text原样输出数据
3.v-html用于解析标签输出

v-bind 使用

• 用于给标签绑定属性值，写法：

  <img v-bind:src="param" />
  //简写方式 去掉v-bind 前面加上 :
  <img :src="param" />
  

• 绑定类似于a标签src时传参使用字符串拼接
• v-bind 绑定类名

  // :class="{'类名':布尔值(可以写表达式)}"
  <p :class="{'red':true}"><p>
  

ｖ-for

• 使用v-for 循环渲染 Array | Object | Number | String

  写法1：<li v-for="item in array | obj"></li>
  写法2：<li v-for="(item, index) in array | obj"></li>
  写法3：<li v-for="(value,key,index) in Object"></li>
  //写法3用于循环遍历对象 值、键、索引
  

• v-for 能够根据data数据变化自动刷新视图
  • 有两种情况不会触发视图更新
    1.使用Array.length改变数组长度时不会触发
    2.使用数组下标改变数组值时不会触发
  • 解决方式：
    • Vue.set(需要改变的数组,数组里的每一item,新的值)
    • Array.splice()
• :key的使用
  • 当使用v-for更新数据是，默认使用就地复用策略。如果改变了数组或对象中某个数据，默认会重新渲染所有数据
  • 为每个节点提供唯一标示，在删除或改变数据时只会重新渲染唯一标示对应的值

  <li v-for="(item,index) in arr" :key="index" ></li>
  

v-model 双向数据绑定

• 作用：view层和model层双向数据绑定，数据同步，互相影响，一个改变了另一个也会变
• 只可以使用在<select>、<input>、<textarea>标签里使用

v-on 绑定事件

• 在标签的属性位置使用 v-on:事件类型="执行函数"来绑定事件
• 简写：@事件类型="执行函数"
• 可以传递参数
• 通过执行函数中添加$event参数传递事件对象，只能是$event
• 事件修饰符可以给事件添加特殊功能 @click.stop .prevent ···
• 可以给按键相关的事件添加修饰符 .enter

v-if 和 v-show

• v-if和v-show可以用来控制元素的显示与隐藏。v-if="Boolean"、v-show="Boolean" true显示，false隐藏
• 两者区别
  • v-if通过控制控制DOM来控制
  • v-show通过控制display:none控制元素显示与隐藏
• 使用场景
  • 在大量操作DOM是使用v-show操作样式会比v-if删除DOM效率高
  • 在使用AJAX回调函数渲染数据时使用v-if
• 在使用 v-else-if前一个兄弟元素必须要有v-if或v-eles-if