vue基础学习1

新手上路丶
99 阅读4分钟

image.png# MVVM模式

视图与模型的双向绑定，即数据的变动会导致页面的变化。视图与模型分开。

MVVM设计模式

设计模式

  • 一种思想

MVVM

  • 组成

    • Model（数据模型）

    • View（视图）

    • VM（视图模型）

      • 视图和模型的双向绑定

  • 好处

    • 实现了数据驱动，让我们专注于数据，提升开发效率
    • 方便于单元测试

组件化开发

1. 提升维护性

2. 复用性

脚手架

概念：帮助创建项目的工具

Vue的脚手架@vue/cli

    1. 安装：npm i @vue/cli -g

    1. 创建项目：vue create 项目名

    • 项目名不能有中文、特殊符号，不建议用大写字母

    1. 运行项目

    • 在项目的根目录运行

      • package.json所在的目录
      • cd 目录名

    • npm run serve

      • serve命令在package.json

脚手架项目结构

  • node_modules

    • 第三方依赖包

  • public/index.html

    • 浏览器运行的网页

  • src/App.vue

    • 页面的根组件

  • src/main.js

    • 项目的入口文件

  • package.json

    • 项目依赖列表文件

  • vue.config.js

    • 脚手架项目的配置文件

      • 修改配置，重新运行npm run serve

vue文件

一个vue文件就是一个组件

组成

  • template

    • html代码
    • 只能有一个根标签

  • script

    • JavaScript代码

  • style

    • 样式代码

    • css、less、sass

      • less和sass需要安装依赖才能使用

插值表达式

作用：把表达式的结果插入到指定的位置

表达式

  • 变量

    • 声明在data函数的返回对象里

  • 对象.属性

  • 三元表达式

  • 数字、字符串、布尔值

  • 函数调用

    • 函数声明在methods对象里

  • 加减乘除

指令

指令是标签属性

  • 属性名="值"
  • vue的指令，都以v-开头

v-bind

  • 作用：给标签绑定属性
  • 语法，:属性名="表达式"

v-on

  • 作用：给标签绑定事件

  • 语法

      • hello有一个参数，事件对象
      • 要获取事件对象，传入$event

  • 修饰符

    • .prevent

      • 阻止默认行为

    • .stop

      • 阻止事件冒泡

    • .enter

      • 回车事件触发

    • .esc

      • esc事件触发

v-show和v-if

  • v-show

    • 原理：控制样式display来显示或者隐藏

  • v-if

    • 原理：创建或者删除标签来显示或者隐藏

    • 多条件控制

      • v-else
      • v-else-if
      • 多个条件之间，不能插入别的标签

v-model

  • 作用：表单内容和vue变量的双向绑定

    • 可以用于读取表单
    • 可以用于写入表单

  • 修饰符

    • .number

      • 内容转换为数字赋值给变量

    • .trim

      • 去掉首尾空白符赋值给变量

    • .lazy

      • change事件后更新变量，对于input是失去焦点更新变量

v-text

  • 作用：把内容作为字符串直接显示
  • textContent

v-html

  • 作用：把内容作为html解析渲染

v-for

  • 作用：循环遍历生成列表

  • 语法

    • 支持的数据

      • 数组

        • 获取索引

      • 对象

        • value是值，key是键

      • 数字

        • item从1开始，包含10

vue的渲染

就地更新

  • 数据改变，vue会尽可能复用旧的DOM，对比变化，只更新变化的部分

虚拟DOM

  • 是什么

    • js对象
    • 描述的是标签的信息

  • 为什么

    • 虚拟dom对比性能高
    • 对比出变化的内容，减少dom操作，性能

虚拟dom diff算法

    1. 根节点

    • 如果类型变化，不再复用，删除旧dom，重新创建dom树
    • 如果类型不变，对比根节点属性，然后对比子节点

    1. 列表默认索引对比

    • 如果提供了key，按key进行对比
    • key主要是在列表顺序变化的时候，性能提升很明显

动态样式绑定

style

  • 样式名如果带横线

    • 小驼峰

      • fontSize

    • 单引号

      • 'font-size'

class

  • 类名如果带横线

    • 单引号

      • :class="{'text-center': true}"

计算属性

作用：根据一些数据计算出来的属性

特征

  • 依赖变化，会重新运算
  • 有缓存，只有依赖变化才重新运算，性能更好

怎么用

  • 只计算，不修改

    • 函数要返回值

  • 如果要修改计算属性

    • get

      • 计算逻辑

    • set

      • 修改计算属性的逻辑
      • 当修改计算属性，会触发set函数
      • set函数有一个参数，就是要修改的值

什么时候用，当你的一些数据是根据其他数据算出来的时候

  • 比如，购物车的总价，成绩的总分、平均分

侦听器

作用：侦听数变化

侦听基本类型

  • 字符串
  • 数字
  • 布尔值
  • newValue是新值，oldValue是旧值

侦听引用类型（对象、数组），需要深度侦听

image.png

  • deep

    • 深度侦听

  • immediate

    • 立即执行

  • handler

    • 数据改变的时候触发handler
    • newValue、oldValue

组件

为什么要用组件化开发

  • 维护性
  • 复用性

组件的使用

  • 创建

    • 写一个vue文件

      • template

        • 只能有一个根标签

      • script

      • style

  • 引入组件

    • 哪里使用，哪里引用

image.png

  • 注册组件（局部注册）

image.png

-   组件名建议命名

    -   不推荐用大写

    -   组件名建议有业务含义，建议多个单词横线分隔

        -   add-subject

  • 使用

    • 注册的组件名作为标签名

image.png -

父传子

  • 父组件传参数给子组件

image.png

  • 子组件接收参数

image.png

子传父

  • 背景：子组件不能修改父组件的数据，给父组件发一个事件，让父组件亲自改

    • 单向数据流

  • 子组件给父组件发事件

image.png

  • 父组件监听事件

image.png

avatar
文章
阅读
粉丝