likes
comments
collection
share

Vue2入门教程，简单易懂

作者站长头像
站长
· 阅读数 32

Vue基础

MVVM💥💥

本质：一种架构模式（编写代码的方式）。

理解：不需要操作dom的代码编写方式。

特点：（需要记忆）

  1. 数据驱动视图： 数据变化，页面会自动变化。 （我们不操作dom）
  2. 数据双向绑定：页面变化， 数据会自动变化。 （我们不操作dom）

组件

本质：一个.vue文件，就是一个组件

特点：由三部分组成

  1. template：书写html代码

    • 注意：必须有一个根节点

  2. script：书写JS代码

  3. style：书写样式代码

插值表达式

作用： 给标签设置内容

语法：{ { 表达式 } }

v-on

作用：绑定事件

语法：v-on:事件名="..."

推荐：👍@事件名="..."

<button @click="少量的代码" > 123 <button>
<button @click="函数名" > 123 <button>
<button @click="函数名(参数)" > 123 <button>

事件对象获取

// 函数通过形参获取
<button @click="函数名" > 123 < /button>
    

 // 通过$event传入事件对象   
 <button @click="函数名(参数1， $event)" > 123 </button>

鼠标事件修饰符

作用：给事件增强功能

语法：@鼠标事件.修饰符="..."

种类（常用）:

  1. .prevent：阻止默认行为

  2. .stop：阻止事件冒泡

按键修饰符

作用：给事件增强功能

语法：@键盘事件.修饰符="..."

种类:

  1. .enter：监听回车按键触发
  2. .esc： 监听Esc按键触发

v-if和v-show

作用：控制标签的显示和隐藏

语法：v-if="布尔值"。 布尔为true，标签显示。 为false，标签不显示

区别：

  1. v-show：通过样式display：none控制隐藏
  2. v-if：通过创建或销毁， 控制显示与隐藏

场景：

  1. 频繁创建，用v-show，节省性能

  2. 不频繁数据，敏感数据，使用v-if

v-if 和 v-else-if 和v-else

语法：

  1. v-if="布尔值"
  2. v-else-if="布尔值"
  3. v-else

注意：

  1. v-if、 v-else-if、 v-else三者之间，不能放入其它标签

v-model 💥💥💥

作用： 数据双向绑定

语法： v-model="变量名"

双向绑定：

  1. 数据变化，页面自动变化。
  2. 页面变化， 数据自动变化。

场景：💥💥

  1. 收集用户输入内容
  2. 回填表单数据

v-model修饰符

语法：v-model.修饰符="变量名"

种类：

  1. .number: 将收集的数据，转为数字格式，再存给变量
  2. .trim：去除首尾空白字符
  3. .lazy：失去焦点时，才收集数据

v-for

作用：创建多个标签

口诀：需要生成多个谁，就写在谁身上

语法：

  1. v-for="item in 数组" :key="数据.id"
  2. v-for="(item, index) in 数组" :key="数据.id"

key属性

作用： 提高dom更新效率

口诀： 💥💥💥有id用id，没id用唯一，没唯一用索引

:style 和 :class👍

作用：给标签添加样式

语法：:class="{类名：布尔值}" 为ture添加类名， 为false去除类名

语法: style="{css属性名: 值, 小驼峰属性名：值， '连字符属性名'： 属性值}"

计算属性

作用： 根据其它的数据， 计算得来一个新的值

优势：

  1. 只有依赖的数据变化， 才会重新计算

  2. 计算属性，自带缓存效果

注意💥：计算属性名称，不能和data数据 methods方法 其它的计算属性成名

语法：

  1. 简写写法：只读不改，用简写
computed: {
    xxx(){    
      return ... // 💥💥 必须有返回值
    }
}
  1. 完整写法: 需要对计算属性赋值时，用完整
computed: {
  xxx: {
    get() { // 💥💥 必须有返回值     
      return  ...
    },
    set(val) { // 形参val，是计算属性接收到的值
        
    }
  }
}

侦听器

  1. 简写写法 - 基本数据类型
watch:{
  被监听的数据名(){
        
  }
}
  1. 完整写法 - 引用数据类型
watch: {

  被监听的数据名:  {
    immediate: true
    deep: true,
    handler(){
        
    }
  }

}

组件注册

规范：

  1. 注册的组件：大驼峰，如HmButton

  2. 使用组件：小写+连字符, 如<hm-button>

  3. 文件名：

    1. 小写+连字符，如hm-button.vue
    2. 大驼峰，如HmButton.vue

组件通信-父传子

  1. 父组件内， 在自组件标签上， 写属性
  2. 子组件内， 通过props属性接收

组件通信-子传父

  1. 子组件内， 通过：$emit(“自定义事件”, 参数， 参数2)
  2. 父组件内， 子组件标签上，： @自定义事件名="函数式"

组件通信-单项数据流

💥 Vue 单项数据流：

  1. 👎不推荐子组件，直接修改父组件传来的数据
  2. 👍让父组件自己修改数据

v-model语法糖

本质：:value和@input，两个指令二合一

ref和$refs

作用：1获取dom； 2获取组件实例对象

步骤：

1.绑定ref属性： <标签名 ref="xxx"></标签名>

2.通过$refs.xxx获取： this.$refs.xxx

$nextTcik

作用：等dom更新结束， 再执行某些代码

语法:

this.$nextTick(() => {
    
    // dom更新后， 回调函数自动执行
    
})

动态组件

作用：在同一个位置，动态切换，显示不同的组件

步骤：

  1. 设置 <component :is="组件名称" >
  2. 切换组件名称 变量

插槽​

场景：当组件内， 有不确定的标签时， 使用插槽.

种类3种：

  1. 匿名插槽
  2. 具名插槽
  3. 作用域插槽

1-匿名插槽​

场景： 组件内， 只有一处有不确定的标签时， 使用匿名插槽

步骤：

  1. 子组件内，使用<slot></slot>占位
  2. 父组件内，子组件标签夹着的内容区域，设置传给slot的内容

语法：

子组件.vue

// 1. 子组件内， 使用slot标签占位
<slot>默认值（如果父组件不传任何内容，默认值将显示）</slot>

父组件.vue

// 2. 父组件内，子组件标签夹着的内容区域， 传给`slot`内容
<hm-child>
  <xxx> 你要传给slot区域的内容 </xxx>
</hm-child>

2-具名插槽

场景：组件内， 有多处有不确定的标签时

简写：v-slot:xxx可以简化成#xxx

步骤：

  1. 子组件内，使用<slot/>占位，并给<slot /> 设置不同的name属性
  2. 父组件内，子组件标签夹着的内容区域，使用<template #xxx /> ，传给slot内容

语法：

  1. 👍 <slot name="xxx"/> 与 <template #xxx > 内容 </template>
  2. 👍 <slot /> 与 <template #default > 内容 </template>

示例：

子组件.vue：

<template>
  <slot name="xxx">默认值1</slot>
  <slot name="zzz">默认值2</slot>
</template>

父组件vue

<hm-child>
  <template #xxx>
    <span> 你要传给slot-xxx区域的内容 </span>
  </template>

  <template #zzz>
    <span> 你要传给slot-zzz区域的内容 </span>
  </template>
</hm-child>

3-作用域插槽

作用：组件内的数据，可以传给父组件使用

步骤：

  1. 子组件内，给标签，设置属性
  2. 父组件内，通过#xxx="对象变量"，接收数据

语法：

  1. <slot name="xxx" yes="确定" no="取消" /> 和 <template #xxx="{yes, no}" />
  2. <slot yes="确定" no="取消" /> 和 <template #default="{yes, no}" />

注意💥：

  1. 为什么叫作用域插槽？  父组件接收的数据，只能在<template #xxx="{}" />标签范围内使用

路由

路由参数

  1. 动态路由 ：

    1. .传：

      1. 改造动态路由， path: "路径名/:自定义属性名"
      2. 路径传参

    2. 接收: $route.params

    3. 场景： 必传参数

  2. 查询（搜索）字符串： ？aa=xx&bb=yy

    1. 传： 不用改造
    2. 接： $route.query
    3. 场景：可选参数

路由模式

种类：

  1. hash路由： 带#
  2. history路由： 不带#， 需要服务度端支持

语法：

new VueRouter({
  mode: "history" // 不写mode为hash路由
})

编程式导航​

了解-导航种类：

  1. 声明式导航： router-link
  2. 编程式导航： 通过JS跳转

跳转方式

this.$router.push("/路径")

this.$router.back() // 返回上一页

this.$router.go(-1) // 返回上一页

路由传参

// 传查询字符串：  ?keyword=123&name=xxx
this.$router.push({path: "/路径名", query: { 属性名: 值}})

// 传动态路由： 路径传值
this.$router.push('/路径名/' + 参数值)

概念​

脚手架​

本质：前端脚手架是一个npm包

作用：一键生成一个空的项目，已配置好需要的环境，提高程序员开发效率。

问题：

  1. vue2脚手架，如何使用？

    答案

  2. 项目名称，是否可以有中文或特殊符号？能否叫vue、webpack之类？推荐命名方式是什么？

    答案

    • ``

MVVM💥💥💥💥💥

本质：一种架构模式（编写代码的方式）。

理解：不需要操作dom的代码编写方式。

特点：

  1. 数据驱动视图： 数据变化，页面会自动变化。 （我们不操作dom）
  2. 数据双向绑定：页面变化， 数据会自动变化。 （我们不操作dom）

组件化开发

背景：现代前端项目，代码量非常大，需要分不同的文件管理代码。

本质：

  1. 一个大的页面，会先拆分成不同的小组件。
  2. 通过组装多个小组件，组合成一个页面。

优势：

  1. 便于维护
  2. 便于复用

钩子函数​

本质：某个时机，会自动执行的函数

常用的钩子函数：

  1. created： 创建后， 发请求，请求数据
  2. mounted： 渲染后，最先获取dom

扩展问题：

  1. Axios中有没有钩子函数？

Axios

参数位置：

  1. query 用 params
  2. body 用 data写

扩展：

ES6入门指南

面试题：

JS数据类型：

  1. ES6之前6种：

    1. string 、number、undefined、null、boolean、
    2. 对象 （易错点：💥💥 函数、数组、对象都属于对象数据类型）

  2. ES6新增了第7种：Symbol

diff算法-更新策略

设计目的：  比较新旧虚拟节点，找出需要更新的节点，从而最小化DOM操作的次数，提高页面的性能。

策略:

  1. 比较同级根元素：

    1. 如果类型变化，不复用该根元素。该元素及后代元素,，全部删除。
    2. 如果类型没变, 复用该根元素，对比属性，更新Dom属性。

  2. 比较同级兄弟节点：

    1. 如果不写key，下标相同的节点，进行对比。 根据策略1, 决定是否复用。
    2. 如果有写key，key相同的节点进行对比,，根据策略1, 决定是否复用。

Vue的声明周期

常用：四大阶段、8个钩子函数

  1. 创建- 前，后
  2. 挂载- 前，后
  3. 更新- 前，后
  4. 销毁- 前，后

👍增加使用场景

  1. created 发请求
  2. mounted最新获取dom，比如加载后立马激活input
转载自:https://juejin.cn/post/7272843829555642409
评论
请登录