Vue.js

目录

1.Vue 是什么        

2.Vue 指令

3.生命周期

4.工程化开发 &脚手架 Vue CLI & 组件

5.V-model 原理

6.自定义指令

7.插槽

8.单页应用程序:

9.路由

10.ESlint 代码规范

11.vuex概述

12.vue3

---

1.Vue 是什么
        

官网：v2.cn.vuejs.org

        概念:Vue 是一个用于 构建用户界面①的 渐进式②框架3

Vue 的两种使用方式:

• ① Vue 核心包开发场景:局部 模块改造
• ② Vue 核心包 & Vue 插件 工程化开发场景:整站 开发

插值表达式 {{ }}：
        插值表达式是一种 Vue 的模板语法
        1.作用:利用表达式进行插值，染到页面中表达式:是可以被求值的代码，JS引擎会将其计算出一个结果

极简插件：

2.Vue 指令

        1.什么是 Vue 指令呢?
                指令就是带有 v- 前缀 的特殊 属性，不同属性 对应 不同的功能学习不同指令 →解决不同业务场景需求

Vue指令   v-html：
        如果需要动态解析标签，可以用哪个指令?语法?
                v-html="表达式"→动态设置元素 innerHTML

Vue指令    v-show  v-if:

        v-show

• 1.作用: 控制元素显示隐藏
• 2.语法: v-show="表达式"表达式值 true 显示， false 隐藏
• 3.原理:切换 display:none 控制显示隐藏
• 4.场景:频繁切换显示/隐藏的场景

        V-if

• 1.作用:  控制元素显示隐藏(条件渲染)
• 2.语法: v-if="表达式"表达式值 true 显示， false 隐藏
• .原理:基于条件判断，是否 创建 或 移除 元素节点
• 4.场景:要么显示，要么隐藏，不频繁切换的场景

Vue指令   v-else  v-else-if:

• 1.作用:辅助 v-if 进行判断渲染
• 2.语法: v-elsev-else-if="表达式
• 3.注意: 需要紧挨着 v-if 一起使用

Vue指令    v-on  :

简写：

注意:methods函数内的 this 指向 Vue 实例

Vue 指令 v-on 调用传参:

Vue 指令 v-bind    

• 1.作用:动态的设置html的标签属性→>src url title
• 2.语法: v-bind:属性名="表达式
• 省略:v-bind  => :  

v-bind 对于样式控制的增强  -   操作class:

        

Vue 指令 v-for:
        1.作用: 基于数据循环，多次渲染整个元素→ 数组、对象、数字..

省略:  index:      v-for="item in 数组"

    v-for 中的 key:
        语法:key属性="唯一标识"
        作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
注意点:

• 1.key 的值只能是 字符串 或 数字类型
• 2.key 的值必须具有 唯一性
• 3.推荐使用 id 作为 key(唯一)，不推荐使用 index作为 key(会变化，不对应)

                v-for 中的 key-不加 key
                        v-for 的默认行为会尝试 原地修改元素(就地复用)

Vue 指令 v-model:

        

v-model 应用于其他表单元素:
        常见的表单元素都可以用 v-model绑定关联 → 快速 获取 或 设置 表单元素的值它会根据 控件类型 自动选取 正确的方法 来更新元素

• 输入框 input:text      ->   value
• 文本域 textarea       ->  value
• 复选框 input:checkbox    ->   checked
• 单选框 input:radio       ->   checked
• 下拉菜单 select       ->     value

Vue 指令的修饰符：

        通过""指明一些指令 后缀，不同 后缀 封装了不同的处理操作 → 简化代码

• ① 按键修饰符

                @keyup.enter   ->  键盘回车监听

• ②v-model修饰符

                v-model.trim    ->     去除首尾空格

                v-model.number     ->     转数字

• ③ 事件修饰符

                阻止冒泡    ->     @事件名.stop

                阻止默认行为    ->    @事件名.prevent

        

计算属性：computed

        

computed 计算属性 vs methods 方法:

computed 计算属性:
        作用:封装了一段对于数据的处理，求得一个结果。

语法:

•         ① 写在 computed 配置项中
•         ② 作为属性，直接使用 →this.计算属性  {{计算属性 }}

methods 方法:
        作用:给实例提供一个方法，调用以处理业务逻辑。
语法:

•         ① 写在 methods 配置项中
•         ② 作为方法，需要调用 → this.方法名(){{方法名()}} @事件名="方法名

        缓存特性(提升性能):
            计算属性会对计算出来的结果缓存，再次使用直接读取缓依赖项变化了，会自动重新计算 →并再次缓存

计算属性完整写法:

watch 侦听器(监视器):

1. 简单写法 →简单类型数据，直接监视

2.完整写法 →添加额外配置项

3.生命周期

        

        Vue 生命周期 和 生命周期的四个阶段思考:什么时候可以发送初始化渲染请求?(越早越好)什么时候可以开始操作dom??(至少dom得渲染出来)Vue生命周期:-个Vue实例从 创建到 销毁 的整个过程。生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁

Vue 生命周期函数(钩子函数)：
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

             

4.工程化开发 &脚手架 Vue CLI & 组件

        

在文件中shift+右键  -> 

创建 ->  导入   ->   注册  ->  使用

        

组件的样式冲突 scoped：
默认情况:写在组件中的样式会 全局生效→ 因此很容易造成多个组件之间的样式冲突问题,

1. 全局样式:默认组件中的样式会作用到全局
2. 局部样式:可以给组件加上 scoped 属性,可以让样式只作用于当前组件

      

 data是一个函数:

组件通信：

prop:

       

5.V-model 原理

.sync 修饰符：

               

   

6.自定义指令

        自定义指令:自己定义的指令，可以封装一些 dom 操作，扩展额外功能

 自定义指令    v-loading指令封装：    

7.插槽

8.单页应用程序:

SPA-Single Page Application

9.路由

Vue中路由:路径 和 组件 的 映射 关系

         

编程式导航-基本跳转：

编程式导航-路由传参：

10.ESlint 代码规范

        

JavaScript Standard Style

11.vuex概述

        

12.vue3

        

      

• 1.setup选项的执行时机?
•         beforecreate钩子之前 自动执行
• 2.setup写代码的特点是什么?
•         定义数据+函数 然后以对象方式return
• 3.<script setup>解决了什么问题?
•         经过语法糖的封装更简单的使用组合式API
• 4.setup中的this还指向组件实例吗?
•         指向undefined

本质:是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型

        底层，包成复杂类型之后，再借助reactive 实现的响应式

        注意点:访问数据，需要通过.value

推荐:以后声明数据，统一用ref

        

  

                deep 深度监视，默认 watch 进行的是 浅层监视

• const ref1 =ref(简单类型)可以直接监视
• const ref2=ref(复杂类型)监视不到复杂类型内部数据的变化

模板引用的概念：
        通过ref标识获取真实的dom对象或者组件实例对象