vue3 命令使用手册及常用概念

• npm create vue@latest 创建脚手架

• npm i 安装依赖

• npm run dev 运行

• 选项式API：用包含多个选项的对象来描述组件的逻辑。

• data、methods 、 mounted 、

• {{}} 插值 ，绑定数据，动态跟新, {} 结构

• v-once 数据发生改变，插值的内容不会更新

• v-text 识别文本指令，不建议标签内加内容，会被替换

• v-html 识别标签指令，不建议标签内加内容，会被替换

• v-bind ，简：: 动态的绑定一个或多个 attribute，也可以是组件的 prop

• [] 属性绑定动态参数

• :class (v-bind:class 的缩写) 传递一个对象、数组来动态切换 class

• :style 属性名字使用驼峰

• v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用,本质是属性绑定和事件绑定的结合 ,原理：通过input触发事件获取当前$event.target.value，然后赋值给当前变量。

  • .number trim lazy

• v-on，简： @ 给元素绑定事件监听器 click
  事件修饰符：由点开头的指令后缀来表示的

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .self - 只有事件从元素本身发出才触发处理函数。
  • .once - 最多触发一次处理函数。
  • .left - 只在鼠标左键事件触发处理函数：
  • .right - 只在鼠标右键事件触发处理函数。
  • .middle - 只在鼠标中键事件触发处理函数。

  按键修饰符

  • .enter => enter键
  • .tab => tab键
  • .delete (捕获“删除”和“退格”按键) => 删除键
  • .esc => 取消键
  • .space => 空格键
  • .up => 上
  • .down => 下
  • .left => 左
  • .right => 右

• v-if v-else-if v-else
• v-show
• v-for="(value, index) in items 搭配 `` :key=“id” `
• directives:{ } :自定义局部指令
• computed: {} ：计算属性，计算属性值会基于其响应式依赖被缓存（实时更新）
• watch:{} :监听器，听函数可以接受2个参数，第一个是newVal,第二个oldVal
  • immediate: true// 初始化的时候调用一次函数，是否立即触发该函数
  • handler: fun (newVal){}函数
  • deep: true,监听对象时有用，'属性’默认已有，无影响
• 响应式数组：
  • 变更方法
    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort((a, b) => b - a)
    • reverse()
  • 替换数组：filter()，concat() 和 slice() 返回数组
• 生命周期：（before）Create （before）Mount beforeUpdate beforeUnmount
  • 特殊：
    • activated():：当被激活的 keep-alive 组件重新进入时调用。
    • deactivated：当被激活的 keep-alive 组件离开时调用。
    • errorCaptured：在捕获阶段处理错误时调用。
• vue核心：MVVM 组件 Model, View, ViewModel
• props 父组件向子组件传值,遵循着单向绑定原则fathon->son,prop 是只读的
• Prop 校验，type: String default: "我是默认值" required: true
• 单项数据流:父组件修改数据的同时，子组件是可以检测到的，并进行响应式变化
• this.$emit() :# 触发与监听事件 子组件向父组件传递数据
• 组件间的访问方式：ref( Reference)定义 (this) $refs .访问 $parent $root
• <slot> </slot> 匿名插槽 具名插槽 <template v-slot:名字> <slot name="title"> </slot> 作用域插槽，也叫带数据的插槽
• provide (提供) 和 inject (注入)

概述

web前端三大主流框架都是Angular、React、Vue。
相比老版本的变化（区别）：

• 性能提升 （打包体积，渲染速度，内存使用）

• 源码升级（使用proxy代替defineProperty，重写虚拟dom）

• 支持typescript

• 新特性（组合式Api,内置组件，生命周期等）

渐进式框架

MVVM

• MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分Model, View, ViewModel

• m model 数据

  • 数据层 Vue中数据都放在 data 里面

• v view 视图

  • Vue 中 view即我们的HTML页面

• vm（ view-model）控制器 将数据和视图层建立联系

  • vm 即 Vue 的实例 就是 vm

MVVM 实现了将业务(数据)与视图进行分离的功能。 解耦 耦合 关系密切度 降低耦合性

目录

.vscode ------- 官方推荐使用vscode编辑器，并推荐下载对应插件   （Vue - Official）
 node_modules - 依赖文件
.gitignore ---- git忽略文件
 public ------- 脚手架根目录，里面存放页签图标
 env.d.ts ----- 是环境变量文件，主要是让Ts认知Vue，让Ts知道这是一个Vue文件
 src ---------- 源代码目录，
 		assets---存放静态资源
 		components---组件
 		main.js---入口文件
 index.html --- 入口文件
 package.json - 包管理文件
 tsconfig.json- ts配置文件
 vite.config.js 工程的配置文件

API风格

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。

选项式 API

使用选项式 API（Options API），用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。

选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

插值{{ }}

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法, (即双大括号)：

同时每次 message 属性更改时它也会同步更新。

指令

指令是带有 v- 前缀的特殊 attribute。

一个指令的任务是在其表达式的值变化时响应式地更新 DOM。

Class 与 Style 绑定

Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

插槽

渲染作用域

父级模版里面的所有内容都是在父级作用域中编译的，子模版里的所有内容都是在子作用域中编译的。

作用域插槽

绑定数据
Search.vue

<template>
    <div>
        <!-- 定义插槽 -->
        <!-- <slot :info="searchValue"></slot> -->
        <slot :u="user"></slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchValue: "searchValue值",
            user: {
                username: 'zs',
                age: 23
            }
        }
    }
}
</script>

App.vue

<template>
  <Search>
    <!-- 在组件内部定义一个template -->
    <template v-slot="scopeSlot">
      <!-- {{ scopeSlot.info }} -->
      {{ scopeSlot.u.username }}
    </template>

    <!-- 对象结构 -->
    <!-- <template v-slot="{ u }">
      {{ u.username }}
    </template> -->
  </Search>
</template>

<script>
import Search from './components/Search.vue'
export default {
  components: {
    Search
  },
}
</script>