您现在的位置是：首页 >学无止境 >Vue的学习网站首页学无止境

vue的介绍

1.VUE是什么

概念：vue是一个用于构建用户界面的渐进式的框架。

构建用户界面:基于 数据 动态 渲染 页面

渐进式:循序渐进的学习

框架:一套完整的项目解决方案,提升开发效率↑(理解记忆规则)

规则→官网

渐进式：

Vue的两种使用方式：

1.Vue核心包开发

 场景：局部 模块改造

2.Vue核心包&Vue插件 工程化开发

 场景：整站 开发

2.创建Vue实例，初始化渲染

创建Vue实例，初始化渲染步骤：

1.准备容器（Vue所管理的范围）

2.引包(官网寻找)（开发版本包/生产版本）{下载开发版本，}
3.创建Vue实例 new Vue()

4.添加配置项→渲染数据

el 指定挂载点

data 提供数据

实例：

3.插值表达式{ {}}

插值表达式是一种Vue的模板语法

1.作用:利用表达式进行插值,渲染到页面中

表达式:是可以被求值的代码,JS引擎会将其计算出一个结果

2. 语法:{ { 表达式 }}

3.注意点:

(1)使用的数据必须存在(data)

(2)支持的是表达式,而非语句,比如:if for ...

(3)不能在标签属性中使用{}}插值

实例：

Vue核心特性：响应式

如何访问or修改?

data中的数据,最终会被添加到实例上

1访问数据:“实例.属性名”

2修改数据:“实例.属性名”=“值”

实例：

Vue指令

Vue会根据不同的指令,针对标签实现不同的功能。

指令:带有v-前缀 的 特殊 标签属性

v-html:

作用:设置元素的innerHTML，解析字符串标签

语法:v-html="表达式”

实例：

v-show

1.作用:控制元素显示隐藏

2.语法:v-show=“表达式”表达式值true显示,false隐藏

3.原理:切换 display:none 控制显示隐藏

4.场景:频繁切换显示隐藏的场景

v-if

1.作用:控制元素显示隐藏(条件渲染)

2. 语法:v-if="表达式”表达式值true显示,false 隐藏

3.原理:,基于条件判断,是否创建 或 移除 元素节点

4.场景:要么显示,要么隐藏,不频繁切换的场景

 v-else v-else-if

1.作用:辅助v-if 进行判断渲染

2. 语法:v-else v-else-if="表达式”

3.注意:需要紧挨着v-if一起使用

v-on

1.作用:注册事件 =添加监听 + 提供处理逻辑

2. 语法:

1 v-on:事件名="内联语句”

2 v-on:事件名="methods中的函数名"

3.简写:@事件名

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

v-on调用传参

 v-bind

1.作用:动态的设置html的标签属性 → src url title ...

2.语法:v-bind:属性名="表达式”

3.注意:简写形式:属性名="表达式”

v-for

v-for 中的 key

语法:key属性=“唯一标识”

作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

key作用:给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。。

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

注意点:

1. key 的值只能是 字符串 或 数字类型

2. key 的值必须具有 唯一性

3.推荐使用id作为key(唯一),不推荐使用index作为key(会变化,不对应)

v-model

1.作用:给 表单元素 使用,双向数据绑定→可以快速 获取 或 设置 表单元素内容

1数据变化 →视图自动更新

2视图变化→数据自动更新

2.语法：v-model=’变量‘

指令修饰符

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

1按键修饰符

@keyup.enter→ 键盘回车监听

2 v-model修饰符

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

v-model.number →转数字

3 事件修饰符

@事件名.stop→阻止冒泡

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

v-bind 对于样式控制的增强

为了方便开发者进行样式控制,Vue扩展了v-bind的语法,可以针对class类名和style 行内样式 进行控制

v-model 应用于其他表单元素

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

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

计算属性：

computed 计算属性 vs methods 方法

computed 计算属性:

作用:封装了一段对于数据的处理,求得一个结果。

语法:

1写在computed 配置项中

2作为属性,直接使用→ this.计算属性 { { 计算属性 }}

methods 方法:

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

语法：

1写在 methods 配置项中

2作为方法,需要调用 → this.方法名(){ { 方法名()}}@事件名="方法名”

缓存特性(提升性能):

计算属性会对计算出来的结果缓存,再次使用直接读取缓存,

依赖项变化了,会自动重新计算→并再次缓存

计算属性完整写法：

watch侦听器(监视器)

作用:监视数据变化,执行一些业务逻辑 或异步操作。

语法:

1（优先）简单写法→简单类型数据,直接监视，监视简单类型的变化

2完整写法 → 添加额外配置项(深度监视复杂类型,立刻执行)

(1) deep:true 对复杂类型深度监视
(2)immediate:true 初始化立刻执行一次handler方法

Vue 生命周期 和 生命周期的四个阶段

工程化开发&脚手架 Vue CLI

开发 Vue的两种方式:

1.核心包传统开发模式:基于html/css/js文件,直接引入核心包,开发Vue。
2.工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。

问题:

1 webpack 配置不简单

2 雷同的基础配置

3 缺乏统一标准

需要一个工具,生成标准化的配置!

基本介绍:

Vue CLI是Vue官方提供的一个全局命令工具。

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处:

1.开箱即用,零配置

2. 内置 babel 等工具

3. 标准化

使用步骤:

1.全局安装(一次):yarn global add@vue/cli 或 npmi @vue/cli-g
2.查看 Vue版本:vue -- version

3.创建项目架子:vue create project-name(项目名-不能用中文)
4.启动项目:yarn serve 或 npm run serve(找package.json)

组件化开发&根组件

1组件化:一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。

好处:便于维护,利于复用→提升开发效率。

组件分类:普通组件、根组件。

2 根组件:整个应用最上层的组件,包裹所有普通小组件。

     

                                        

App.vue文件(单文件组件)的三个组成部分

1.三部分组成:

 template:结构(有且只能一个根元素)

script: js逻辑

style:样式(可支持less,需要装包)

2. 让组件支持 less

(1)style标签,lang="less"开启less功能
(2)装包:yarn add less less-loader

普通组件的注册使用：

组件注册的两种方式:

1.局部注册:

只能在注册的组件内使用

步骤：

创建.vue文件(三个组成部分，单文件组件)

在使用的组件内导入并注册，并局部注册 components(组件名：组件对象)

使用:

当成 html标签使用‘<组件名></组件名>`

注意:

组件名规范→大驼峰命名法,如:HmHeader

2.全局注册:

所有组件内都能使用（比如通用性组件）

使用:

当成 html标签使用‘<组件名></组件名>`

步骤：

1.创建.vue文件(三个组成部分，单文件组件)

2 main.js 中导入并进行全局注册Vue.component（组件名，组件对象）

注意:

组件名规范→大驼峰命名法,如:HmHeader

main.js

快速生成结构：<vue

技巧:

一般都用局部注册,如果发现是通用组件,再抽离到全局。

综合案例-组件拆分

组件的三大组成部分注意点

组件的样式冲突 scoped

默认情况:写在组件中的样式会 全局生效

1. 全局样式:默认组件中的样式会作用到全局

2. 局部样式:可以给组件加上scoped属性,可以让样式只作用于当前组件

scoped原理

1. 当前组件内标签都被添加data-v-hash值 的属性

2.css选择器都被添加[data-v-hash值]的属性选择器

最终效果:必须是当前组件的元素,才会有这个自定义属性,才会被这个样式作用到

data是一个函数

组件通信

组件通信,就是指 组件与组件之间的数据传递。

组件的数据是独立的,无法直接访问其他组件的数据。

想用其他组件的数据→组件通信

1.两种组件关系分类 和 对应的组件通信方案

父子关系      →      props & $emit

非父子关系   →    provide & inject 或 eventbus

通用方案       →     vuex

父子通信流程图:

1.父组件通过props将数据传递给子组件

2.子组件利用 $emit通知父组件修改更新

父子通信方案的核心流程

1.父传子props:

1.父中给子添加属性传值

2.子props接收

3.使用

2.子传父$emit:

1.子$emit发送消息

2.父中给子添加消息监听

3.父中实现处理函数

父→子

父组件通过props将数据传递给子组件

动态属性加冒号：

父属性：

子属性：

子→父
子组件利用 $emit通知父组件,进行修改更新

子组件：

父组件：

prop

Prop定义:组件上注册的一些 自定义属性

Prop作用:向子组件传递数据

特点:

可以 传递 任意数量 的prop

可以 传递 任意类型 的prop

实例：

父组件：

子组件：

props校验

1基础写法（类型校验）

  

2.完整写法：

口诀：谁的数据谁负责

非父子通信（拓展）-event bus 事件总线

作用:非父子组件之间,进行简易消息传递。(复杂场景→Vuex)

1.创建一个都能访问到的事件总线(空Vue实例)→utils/EventBus.js

2.A组件(接收方),监听Bus实例的事件

3.B组件(发送方),触发Bus实例的事件

实例：

非父子通信（拓展）-provide&inject

provide & inject作用:跨层级共享数据
1. 父组件 provide提供数据

2. 子/孙组件 inject取值使用

V-model原理

1. 表单类基础组件封装思路

父传子:父组件动态传递prop数据,拆解v-model,绑定数据

子传父:监听输入,子传父传值给父组件修改

本质:实现了实现 子组件 和 父组件数据 的双向绑定

2. v-model 简化代码的核心步骤

子组件中:props通过value接收,事件触发input

父组件中:v-model给组件直接绑数据

.sync 修饰符

作用:可以实现 子组件 与 父组件数据 的 双向绑定,简化代码

特点:prop属性名,可以自定义,非固定为value

场景:封装弹框类的基础组件,visible属性 true显示false隐藏

本质:就是:属性名 和@update:属性名 合写

ref和$refs

作用:利用ref和$refs可以用于 获取dom元素,或组件实例

特点:查找范围→当前组件内(更精确稳定)

(1)获取 dom:

1.目标标签-添加ref属性

2.恰当时机,通过this.$refs.xxx,获取目标标签

实例：

代码：

2.获取组件：

1.目标组件-添加ref属性

2.恰当时机,通过this.$refs.xxx,获取目标组件,

就可以调用组件对象里面的方法

实例：

代码：

Vue异步更新、$nextTick

需求:编辑标题,编辑框自动聚焦

1.点击编辑,显示编辑框

2. 让编辑框,立刻获取焦点

问题:“显示之后",立刻获取焦点是不能成功的!

原因:Vue是异步更新DOM(提升性能)

代码：

$nextTick:等DOM更新后,才会触发执行此方法里的函数体

语法:this.$nextTick(函数体)

实例代码：

注意：

setTimeout(()=>{

this/$refs.inp.focus()

},1000)

也可以但是，等待的时间不精准

$nextTick等dom更新完，立刻去执行准备的函数体

自定义指令：

实例代码：

指令框自动获取焦点

全局指令：

v-focus可以使用多次

局部注册指令：

自定义指令-指令的值

实例：

1.inserted提供的是元素被添加到页面中时的逻辑

2.update指令的值修改的时候触发，提供值变化后dom更新的逻辑

指令值的语法:

1.v-指令名=“指令值",通过等号可以绑定指令的值

2.通过binding.value 可以拿到指令的值

3.通过update钩子,可以监听指令值的变化,进行dom更新操作

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

分析:

1.本质loading效果就是一个蒙层,盖在了盒子上

2.数据请求中,开启loading状态,添加蒙层

3.数据请求完毕,关闭loading状态,移除蒙层

1.准备loading类：

2.开启loading类：

box加上loading就是开启loading类状态

3.封装：

定义v-loading="isloading"并给它加逻辑：

关闭loading类：

核心思路:

(1)准备类名loading,通过伪元素提供遮罩层

(2)添加或移除类名,实现loading蒙层的添加移除

(3)利用指令语法,封装v-loading 通用指令

inserted 钩子中,binding.value判断指令的值,设置默认状态

update 钩子中,binding.value判断指令的值,更新类名状态

插槽-默认插槽

作用:让组件内部的一些 结构 支持 自定义

需求:要在页面中显示一个对话框,封装成一个组件

插槽基本语法:

1.组件内需要定制的结构部分,改用<slot></slot>占位

2.使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot

实例：

代码：

插槽使用的基本步骤

1.先在组件内用slot占位

2.使用组件时,传入具体标签内容插入

插槽-后备内容

实例：

如何给插槽设置默认显示内容：

在slot标签内,写好后备内容

插槽-具名插槽

效果：

3. v-slot:插槽名 可以简化成#插槽名

实例：

一旦插槽起了名字，就是具名插槽只支持定向分发

需要通过template标签包裹需要分发的结构，包裹成一个整体

组件内 有多处不确定的结构就使用具名插槽，步骤：

1.slot占位,给name属性起名字来区分

2. template配合 v-slot:插槽名分发内容

v-slot:插槽名 可以简化成#插槽名

插槽-作用域插槽

基本使用步骤:

1. 给slot标签,以添加属性的方式传值

2.所有添加的属性,都会被收集到一个对象中

3.在template中,通过‘#插槽名="obj"`接收,默认插槽名为default

实例：

作用域插槽使用步骤

(1)给slot标签,以添加属性的方式传值

(2)所有属性都会被收集到一个对象中

(3)template中,通过‘#插槽名="obj"`接收

单页应用程序:SPA-Single Page Application

例如：单页网易云音乐官网，多页京东官网

使用场景：

单页面应用：系统类网站/内部网站/文档类网站/移动端站点（Vue应用）

多页面应用：公司官网/电商类网站

路由的介绍

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

根据路由就能知道不同路径的,应该匹配渲染哪个组件

VueRouter 的介绍（Vue js官方的路由管理器）

目标:认识插件VueRouter,掌握VueRouter的基本使用步骤

作用:修改地址栏路径时,切换显示匹配的组件

说明:Vue官方的一个路由插件,是一个第三方包

官网:https://v3.router.vuejs.org/zh/

使用：