重温vue笔记-02-基本概念

阿呆_
191 阅读4分钟

vue的基本概念

vue 是一个渐进式的 JavaScript 框架

  1. 渐进式：逐渐增强

  2. 框架

    1. 库： 一系列方法的集合（jQuery就是一个库）

      特点：库不会强求用户如何去开发，想要方法。调用即可，不会做过多的约束

    2. 框架：一套完整的解决方案（vue就是一个框架）

      特点：框架中会自己写好大量的代码，我们需要按照框架的规则去编写代码

vue是一个MVVM的框架

vue是一个MVVM的框架

后端的框架模式 MVC

M：model 数据模型（跟数据库操作相关的）

V：view 视图（展示页面相关的）

C：controller 控制器（业务逻辑）

mvc模式 数据模型（操作数据库相关的） 视图（页面展示） 控制器（业务逻辑） mvc模式不太适合前端 前端不需要操作数据库所以演化出了mvvm模式
MVVM模式 数据模型（发送请求回来的数据） 视图（页面相关的） 视图模型（双向数据绑定）

模块化：可以将每个js文件当成一个模块，将不同的功能拆分到不同的js文件，方便维护 组件化：可以将页面拆分成一个个组件，每个组件都有独立的结构样式行为，方便复用

vue的插值表达式

vue的插值表达式：又叫小胡子语法

  1. 作用：可以使用 data 中的数据，渲染视图

  2. 语法：

    1. {{ msg }}

      支持三元运算符

  3. 注意点：

    1. 不是 data 中的数据不能使用
    2. 不能再插值表达式中编写 js 语句
    3. 不能再标签属性中，使用插值表达式

vue中的指令

v-bind指令

  1. 作用：使用 data 中的数据，给标签属性使用（设置标签属性）
  2. 语法：v-bind:属性名 = 属性值 简写： :属性名 = 属性值
  3. 注意点：不是 data 中的数据不能直接使用
  4. 对于类名和样式的增强
    1. 类名 :class = 值
      1. 传对象 对象有键和值, 键就是类名, 属性值是一个boolean值, true就是添加上这个类, false就表示不加
      2. 传数组 将来数组的每一项, 都会作为需要添加的类名 （不推荐）
      3. 直接在模板中编写 对象 或者 数组 :class="{ 类名: 布尔值.....}"
    2. 样式 :style = 值
      1. 传对象
      2. 直接在模板中编写对象 :style="{ backgroundColor: yellow..... }"

v-model指令

  1. 作用：给表单元素使用，可以实现双向数据绑定
    1. 双向数据绑定
      1. 视图变化了 => 数据自动更新
      2. 数据变化了 => 视图自动更新
  2. 语法：v-model = 值

v-on指令

  1. 作用：给元素注册事件
  2. 语法：v-on:事件名 = 事件处理函数 简写： @事件名 = 事件处理函数
  3. 注意：方法写在 methods 中
  4. 传递参数的说明
    1. @事件名='事件处理函数(参数1，参数2 ....)'
    2. 如果传参的时候需要拿到默认参数event（了解，因为vue有对应的修饰符）
      1. 不传参的时候，第一个参数默认就是event
      2. 传参了, 并且要拿到事件对象, 可以在模板中通过 $event 指代 当前的 event
      3. @事件名='事件处理函数(参数1，参数2，$event ....)'

v-text指令

  1. 作用：修改的是元素的innerText 不识别标签
  2. 完全被插值表达式所代替

v-html指令

  1. 作用：修改的是元素的innerHTML 可以识别标签
  2. 有安全问题

v-show指令

  1. 作用：控制元素的显示与隐藏 如果需要频繁的切换就用v-show
  2. 语法：v-show = 值 值是一个布尔值 true是显示 false是隐藏
  3. 原理: display: none/block的切换, css样式的控制

v-if指令

  1. 作用：控制元素的显示与隐藏 不会频繁切换, 推荐使用 v-if
  2. 语法：v-if= 值 值是一个布尔值 true是显示 false是隐藏
  3. 原理: 动态添加或者移除元素

v-if v-else指令

  1. 作用：判断一个值，做出相对应的语句
  2. 语法：v-if="age >= 80" v-else
  3. 注意：v-if 和 v-else 必须连着写

v-for指令

  1. 作用：可以遍历数组或者对象用于渲染视图
  2. 语法：
    1. 遍历数组：v-for="(item, index) in 数组名" item是遍历的每一项, index下标
    2. 遍历对象：v-for="(value, key) in 对象名" value是值, key是属性名
  3. 注意：推荐设置 key 属性, 用以提升渲染性能
    1. 给标签添加了一个唯一的标识, 可以复用标签和内容
    2. 避免一些就地复用的bug
    3. 推荐设置key为 item.id

v-pre指令

  1. 作用：vue会跳过设置了v-pre指令的元素内容的解析

v-once指令

  1. 作用：会解析, 但是只会解析渲染一次, 如果数据发生了修改, 不会再更新了

v-cloak指令

  1. 作用：可以解决插值表达式的闪烁问题，特点: 添加到元素上, 会在vue完成渲染之后, 会自动被移除
  2. 实际，根本不会有闪烁问题
avatar
文章
阅读
粉丝