阿尔方斯
阿尔方斯

VUE 爬坑笔记 （1）

MVVM (Model-View-Viewmodel)

MVVM是什么?

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

VM是什么?

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

插值表达式

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

v-text 指令

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

v-html 指令

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

三种方式的区别

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

v-bind 使用

  • 用于给标签绑定属性值，写法： 
    
//简写方式 去掉v-bind 前面加上 :
  • 绑定类似于a标签src时传参使用字符串拼接
  • v-bind 绑定类名 
    // :class="{'类名':布尔值(可以写表达式)}"

ｖ-for

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

v-model 双向数据绑定

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