vue基础

Vue概述

vue：渐进式javascript框架

声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

• 易用：熟悉HTML、CSS、javascript知识后，可快速上手Vue
• 灵活：在一个库和一套完整框架之间自如伸缩
• 高效：20kB运行大小，超快虚拟DOM

Vue基本使用

传统开发模式对比

原生js

输出

Hello World

jQuery

输出

Hello World

Vue.js之实现Hello World的基本步骤

Vue基本使用步骤

1.需要提供标签用于填充数据

2.引入vue.js库文件

3.可以使用vue的语法做功能了

4.把vue提供的数据填充到标签里面

 

        
{{msg}}
    
    
    
    

3.Vue代码运行原理分析

• 概述编译过程的概念（Vue语法->原生语法。vue代码通过vue框架编译成原生js代码）

Vue模板语法

如何理解前端渲染

把数据填充到HTML标签中

前端渲染的方式

• 原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中

缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来

• 使用前端模板引擎

与字符串拼接相比，代码明显规范了很多，它拥有自己的一套模板语法规则

优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期维护

缺点：没有专门提供事件机制

• 使用vue特有的模板语法

模板语法概览

插值表达式

指令

1.什么是指令

• 指令的本质式自定义属性
• 指令的格式：以v-开始（比如:v-cloak）

2.v-cloak指令用法

• 插值表达式存在的问题：“闪动”
• 如何解决该问题：使用v-cloak指令
• 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

 

        
{{msg}}
    
    
    

数据绑定指令

• v-text 填充纯文本

1. 相比插值表达式更加简洁
2. 没有“闪动”问题

输出

HTML

• v-pre 填充原始信息

1. 显示原始信息，跳过编译过程（分析编译过程）

  

        
{{msg}}
    
    
    
    

双向数据绑定

数据的变化导致页面内容的变化，页面内容的变化导致数据的变化

• v-model指令用法

    

        
{{info}}
        

            
        
    
    
    

MVVM设计思想

1. M（model）
2. V（view）
3. VM（View-Model）

事件绑定

vue处理事件

• v-on指令用法

    

        
{{num}}
        

            点击
        
    
    
    

• v-on简写形式

  

        
{{num}}
        

            点击1
        
    
    
    

事件函数的调用方式

• 直接绑定函数名称

    

        
{{num}}
        

            点击2
        
    
    
    

• 调用函数

    

        
{{num}}
        

            点击3
        
    
    
    

事件函数的参数传递

• 直接绑定函数名称方式

    

        
{{num}}
        

            绑定事件函数名称方式
        
    
    
    

• 调用函数方式

    

        
{{num}}
        

            调用函数方式
        
    
    
    

事件修饰符

1.阻止冒泡

   

        
{{num}}
        

            点击1
        
    
    
    

2.阻止默认行为

   

        

            百度
        
    
    
    

按键修饰符

1.enter键

    

        

            

                用户名：
            
            

                密码：
            
            

                
            
        
    
    
    

2.delete键

    

        

            

                用户名：
            
            

                密码：
            
            

                
            
        
    
    
    

自定义按键修饰符

规则：自定义按键修饰符名字是自定义的，但是对应的是按键对应event.keyCode值

案例：简单计算器

需求：实现简单的加法计算，分别输入数值a和数值b，点击按钮，结果显示在下面

分析：

1.通过v-model指令实现数值a和数值b的绑定

2.给计算按钮绑定事件，实现计算逻辑

3.将计算结果绑定到对应位置

   

        
简单计算器
        

            数值A:
            
                
            
        
        

            数值B:
            
                
            
        
        

            计算
        
        

            计算结果
            
        
    
    
    

属性绑定

Vue动态处理属性

• v-bind指令用法

        百度
        切换
    
    
    

• 缩写形式

    

        百度
        切换
    
    
    

v-model的底层实现原理分析

原始版

    

        
{{msg}}
        
    
    
    

升级版

   

        
{{msg}}
        
    
    
    

最终版

    

        
{{msg}}
        
    
    
    

样式绑定

1.class样式处理

• 对象语法

    
    

        
测试内容
        切换
    
    
    

• 数组语法

    
    

        
测试内容
        切换
    
    
    

样式绑定相关语法细节

1.对象绑定和数组绑定可以结合使用

    
     

        
测试内容
        切换
    
    
    

2.class绑定的值可以简化操作

   
    

        

        切换
    
    
    

3.默认的class如何处理？默认的class会保留

 
    

        

        切换
    
    
    

2.style样式处理

• 对象语法

方法一：

        

        切换
    
    
    

方法二（简化版）：

        

        切换
    
    
    

• 数组语法（原有的样式会被覆盖）

    

        

        切换
    
    
    

分支循环结构

• v-if
• v-else-if
• v-else

    

        
优秀
        
良好
        
一般
        
比较差
    
    
    

v-show

原理：控制元素的样式是否显示

        
测试v-show
        点击
    
    
    

v-if与v-show的区别

• v-if控制元素是否渲染到页面
• v-show控制元素是否显示（已经渲染到页面）

v-for遍历数组

语法：

 
{{item}}

示例：

   

        
水果列表
        

            
{{item}}
        
    
    
    

输出

水果列表
apple
orange
banana

复杂版：

 

        
水果列表
        

            

                {{item.ename}}
                ----
                {{item.cname}}
            
        
    
    
    

输出：

水果列表
apple ---- 苹果
orange ---- 橘子
banana ---- 香蕉

语法

{{item+'----'+index}}

示例：

    

        
水果列表
        

            
{{item+'----'+index}}
        
    
    
    

输出

水果列表
apple----0
orange----1
banana----2

key的作用：帮助Vue区分不同的元素，从而提高性能

{{item+'----'+index}}

v-for遍历对象

语法：

{{v+'----'+k+'----'+i}}

示例：

  

        
{{v+'----'+k+'----'+i}}
    
    
    

输出：

zhangsan----uname----0
12----age----1
male----gender----2

v-if与v-for结合使用

语法：

{{v+'----'+k+'----'+i}}

示例：

        
{{v+'----'+k+'----'+i}}
    
    
    

输出：

12----age----1

案例：Tab选项卡

效果：

代码：

    
    

        

            

                
{{item.title}}
            
            

                
            
        
    
    
    

Vue常用特性

表单操作

• input单行文本

• radio单选按钮

        

            男
            女
            
        
    
    
    

• checkbox复选按钮

    

        

            爱好
            
            
            
            
        
    
    
    

• select下拉列表

单选

        

            职业
            
                请选择职业...
                教师
                软件工程师
                律师
            
            
        
    
    
    

多选

        

            职业
            
                请选择职业...
                教师
                软件工程师
                律师
            
            
        
    
    
    

• textarea文本域

    

        

            个人简介
            
            
        
    
    
    

表单域修饰符

• number:转化为数值

        
        点击
    
    
    

• trim:去掉开始和结尾空格

        
        点击
    
    
    

• lazy:将input事件切换为change事件（input事件当输入的时候会触发，change事件当鼠标离开的时候触发）

        
        
{{msg}}
        点击
    
    
    

自定义指令

自定义指令的语法规则（获取元素焦点）

Vue.directive('focus', {
            inserted: function (el) {
                //el表示指令所绑定的元素
                el.focus();
            }
        })

自定义指令用法

示例：

带参数的自定义指令(改变元素的背景色)

局部指令

计算属性

为何需要计算属性

表达式的计算逻辑可能会比较复杂，使用计算属性可以使用模板内容更加简洁

原始做法：

    

        
{{msg}}
        
{{msg.split('').reverse().join('')}}
    
    
    

输出

Hello
olleH

计算属性做法：

    

        
{{msg}}
        
{{reverseString}}
    
    
    

输出

Nihao
oahiN

计算属性与方法的区别

• 计算属性是基于它们的依赖进行缓存的
• 方法不存在缓存

        
{{reverseString}}
        
{{reverseString}}
        
{{reverseMessage()}}
        
{{reverseMessage()}}
    
    
    

浏览器中输出：

oahiN
oahiN
oahiN
oahiN

控制台中输出：

computed
methods
methods

侦听器

数据一旦发生变化就通知侦听器所绑定方法

应用场景

数据变化时执行异步或开销较大的操作

侦听器做法：

        

            名：
            
                
            
        
        

            姓：
            
                
            
        
        
{{fullName}}
    
    
    

输出

计算属性做法

        

            名：
            
                
            
        
        

            姓：
            
                
            
        
        
{{fullName}}
    
    
    

输出：

侦听器案例：验证用户名是否可用

需求：

输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示重新输入，如果不存在，提示可以使用

需求分析：

1.通过v-model实现数据绑定

2.需要提供提示信息

3.需要侦听器监听输入信息的变化

4.需要修改触发的事件

        

            用户名：
            
                
            
            {{tip}}
        
    
    
    

过滤器

过滤器的作用

格式化数据，比如将字符串化为首字母大写，将日期格式化为指定的格式等

自定义过滤器

用法一：

        
        
{{msg | upper}}
    
    
    

方法二：

    

        
        
测试数据
    
    
    

局部过滤器

        
        
测试数据
    
    
    

带参数的过滤器

 

        
{{date | format('yyyy-MM-dd')}}
    
    
    

输出：

2020-3-15

生命周期

vue实例的产生过程

数组相关API

1.变异方法（修改原有数据）

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

2.替换数组（生成新的数组）

• filter()
• concat()
• slice()

示例：

        

            
                
                添加
                删除
                替换
            
        
        

            
{{item}}
        
    
    
    

数组响应式变化

修改响应式数据

• Vue.set(vm.items,indexOfItem,newValue)
• vm.$set(vm.items,indexOfItem,newValue)

1. 参数一表示要处理的数组的名称
2. 参数二表示要处理的数组的索引
3. 参数三表示要处理的数组的值

Vue.set(vm.items,indexOfItem,newValue)

    

        

            
{{item}}
        
    
    
    

vm.$set(vm.items,indexOfItem,newValue)

        
{{info.name}}
        
{{info.age}}
        
{{info.gender}}
    
    
    

案例：图书馆管理

效果如下：

1.图书列表

• 实现静态列表效果
• 基于数据实现模板效果
• 处理每行的操作按钮

2.添加图书

• 实现表单的静态效果
• 添加图书表单域数据绑定
• 添加按钮事件绑定
• 实现添加业务逻辑

3.修改图书

• 修改信息填充到表单
• 修改后重新提交表单
• 重用添加和修改方法

4.删除图书

• 删除按钮绑定事件处理方法
• 实现删除业务逻辑

常用特性应用场景

• 过滤器（格式化日期）
• 自定义指令（获取表单焦点）
• 计算属性（统计图书数量）
• 侦听器（验证图书存在性）
• 生命周期（图书数据处理）

案例代码如下：

 
    

        

            

                
图书管理
                

                    

                        编号
                        
                        名称
                        
                        提交
                    
                
            
            

                图书总数：
                {{total}}
            
            

                

                    

                        
编号
                        
名称
                        
时间
                        
操作
                    
                
                

                    

                        
{{item.id}}
                        
{{item.name}}
                        
{{item.date}}
                        

                            修改
                            |
                            删除
                        
                    
                
            
        
    
    
    

组件注册

全局组件注册基本使用

输出

点击了2次 点击了4次 点击了6次

组件注册注意事项

1.data必须是一个函数

2.组件模板内容必须是单个根标签

3.组件模板内容可以是模板字符串

4.如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件

局部组件注册基本使用

输出

HelloWorld
HelloTom
HelloJerry

组件间数据交互

父组件向子组件传值

1.组件内部通过props接收传递过来的值

2.父组件通过属性将值传递给子组件

        
{{pmsg}}
        
        
    
    
    

输出

父组件中的内容
子组件本身的数据-----来自父组件的值-----undefined
子组件本身的数据-----动态绑定属性-----hello

props属性名规则

• 在props中使用驼峰形式，在普通的模板标签中需要使用短横线的形式
• 字符串形式的模板中没有这个限制

props属性值类型

• 字符串 String

        
{{pmsg}}
        
    
    
    

输出：

父组件中的内容
hello

• 数值 Number

    

        
{{pmsg}}
        
    
    
    

输出：

父组件中的内容
24
1313

• 布尔值 Boolean

    

        
{{pmsg}}
        
    
    
    

输出

父组件中的内容
boolean
string

• 数组 Array

        
{{pmsg}}
        
    
    
    

输出：

父组件中的内容
apple
orange
banana

• 对象 Object

        
{{pmsg}}
        
    
    
    

输出

父组件中的内容
zhangsan 12

子组件向父组件传值基本用法

1.子组件通过自定义事件向父组件传递信息

2.父组件监听子组件的事件

        
{{pmsg}}
        
    
    
    

子组件向父组件传值–携带参数

        
{{pmsg}}
        
    
    
    

非父子组件间传值

1.单独的事件中心管理组件间的通信

2.监听事件与销毁事件

     

        
父组件
        

            销毁
        
        
        
    
    
    

输出：

父组件
销毁
TOM:3
点击
JERRY:4
点击

组件插槽

组件插槽的作用

• 父组件向子组件传递内容（模板内容）

组件插槽基本使用

        有bug发生
        有一个警告
        
    
    
    

输出：

ERROR: 有bug发生
ERROR: 有一个警告
ERROR: 默认内容

具名插槽用法

用法一：

 

        
            
标题信息
            
主要内容1
            
主要内容2
            
底部信息
        
    
    
    

输出：

标题信息

主要内容1

主要内容2

底部信息

结构代码：

用法二：

 

        
            
            
主要内容1
            
主要内容2
            
        
    
    
    

输出：

标题信息1

标题信息2

主要内容1

主要内容2

底部信息1

底部信息2

结构代码：

作用域插槽

应用场景：父组件对子组件的内容进行加工处理

输出：

前后端交互模式

接口调用方式

• 原生ajax
• 基于jQuery的ajax
• fetch
• axios

URL地址格式

1.传统形式的URL

• schema://host:port/path?query#fragment

1. schema:协议。例如http、https、ftp等
2. host：域名或者IP地址
3. port:端口，http默认端口是80，可以省略
4. path:路径，例如/abc/a/b/c
5. query:查询参数，例如uname=zhangsan&age=12
6. fragment:锚点（哈希Hash）,用于定位页面的某个位置

2.Resful形式的URL

• HTTP请求方式

1. GET 查询
2. POST 添加
3. PUT 修改
4. DELETE 删除

Promise用法

• 异步调用效果分析

1. 定时任务
2. Ajax
3. 事件函数

• 多次异步调用的依赖分析

1. 多次异步调用的结果顺序不确定
2. 异步调用结果如果存在依赖需要嵌套

Promise概述

promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，它可以获取异步操作的消息

使用Promise主要有以下好处：

• 可以避免多层异步调用嵌套问题（回调地狱）
• Promise对象提供了简洁的API，使得控制异步操作更加容易

Promise基本用法

• 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
• resolve和reject两个参数用于处理呈贡与是白的两种情况，并通过p.then获取处理结果

Promise常用的API

1.实例方法

• p.then() 得到异步任务的正确结果
• p.catch() 获取异常信息
• p.finally() 成功与否都会执行（尚且不是正式标准）

function foo() {
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    resolve(123);
                    // reject('出错了');
                }, 100)
            })
        }
        // 方法一
        // foo()
        //     .then(function (data) {
        //         console.log(data);
        //     })
        //     .catch(function (data) {
        //         console.log(data);

        //     })
        //     .finally(function () {
        //         console.log('finished');

        //     })
        // -----------------------------------
        // 方法二
        foo()
        .then(function(data){
            console.log(data);       
        },function(data){
            console.log(data);
        })
        .finally(function(){
            console.log('finished');
            
        })
    

2.对象方法

• Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果
• Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果

axios用法

axios的基本特性

axios是一个基于Promise用于浏览器和node.js的http客户端

它具有以下特征：

1. 支持浏览器和node.js
2. 支持promise
3. 能拦截请求和响应
4. 自动转换JSON数据

axios基本用法

axios.get('http://localhost:3000/data').then(function (ret) {
            //    data是固定的用法，用于获取后台的实际数据
            console.log(ret.data);

        })

axios的常用API

• get 查询数据

GET传递参数

• post 添加数据

POST传递参数

• put 修改数据

put传递参数

• delete 删除数据

DELETE传递参数

axios的响应结果

响应结果的主要属性

• data：实际响应回来的数据
• headers：响应头信息
• status：响应状态码
• statusText：响应状态信息

axios的全局配置

axios拦截器

1.请求拦截器

2.响应拦截器

async/await的基本用法

async/await处理多个异步请求