Vue基础介绍

MVVM设计模式

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

• MVVM，一种软件架构模式，决定了写代码的思想和层次

  • M： model数据模型 (data里定义)

  • V： view视图 （html页面）

  • VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

  • V（修改视图） -> M（数据自动同步）

  • M（修改数据） -> V（视图自动同步）

在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

 

 vue好处：vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 挺高开发效率

vue基础指令介绍：

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

一、给标签属性设置vue变量的值 v-bind：

每个指令, 都有独立的作用

• 语法：v-bind:属性名=“变量名”

• 简写：:属性名=“变量名”

我是a标签
  

二、给标签绑定事件 v-on

• 语法：v-on：事件名=“要执行的少量代码”

                   v-on：事件名=“methods中的函数”

                   v-on：事件名=“methods中的函数（实参）”

• 简写：@事件名=“methods中的函数” 【简写方式更常用】

你要买商品的数量: {
    {count}}
增加1
增加1个
一次加5件

减少

v-on事件对象：vue事件处理函数中, 拿到事件对象

• 语法：无传参, 通过形参直接接收
•            传参, 通过$event指代事件对象传给事件处理函数

v-on修饰符  在事件后面.修饰符名 - 给事件带来更强大的功能

语法：  @事件名.修饰符="methods里函数"

• .stop - 阻止事件冒泡

• .prevent - 阻止默认行为

• .once - 程序运行期间, 只触发一次事件处理函数

v-on按键修饰符  给键盘事件, 添加修饰符, 增强能力

语法:

• @keyup.enter - 监测回车按键

• @keyup.esc - 监测返回按键

三、v-model：value属性与vue数据变量, 双向绑定到一起

• 语法: v-model="vue数据变量"

• 双向数据绑定

  • 数据变化 -> 视图自动同步

  • 视图变化 -> 数据自动同步

• 演示: 用户名绑定 - vue内部是MVVM设计模式

v-model修饰符

语法:

• v-model.修饰符="vue数据变量"

  • .number 以parseFloat转成数字类型

  • .trim 去除首尾空白字符

  • .lazy 在change时触发而非inupt时

四、v-text和v-html  更新DOM对象的innerText/innerHTML

• 语法:

  • v-text="vue数据变量"

  • v-html="vue数据变量"

• 注意: 会覆盖插值表达式

五、v-show和v-if  控制标签的隐藏或出现

• 语法:

  • v-show="vue变量"

  • v-if="vue变量"

• 原理

  • v-show是通过display：none将元素隐藏（可以在频繁切换时使用）

  • v-if 是直接从DOM树上删除

• 高级

  • v-else使用

六、v-for  列表渲染, 所在标签结构, 按照数据数量, 循环生成

• 语法

  • v-for="(值, 索引) in 目标结构"

  • v-for="值 in 目标结构"

• 目标结构:

  • 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

• 注意:

  v-for的临时变量名不能用到v-for范围外

v-for更新监测：

当v-for遍历的目标结构改变, Vue触发v-for的更新，如果使用一个数组的方法没有导致原数组结构更新，此时就不会改变页面中通过v-for遍历的结构

这些方法会触发数组改变, v-for会监测到并更新页面：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

这些方法不会触发v-for更新

• slice()

• filter()

• concat()

• map()

• reduce()

• find()

注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

总结: 改变原数组的方法才能让v-for更新