01 Vue基础

1. vue 概述#

Vue：渐进式JavaScript框架

vue官网 https://cn.vuejs.org/v2/guide/

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

• 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue

• 灵活：在一个库和一套完整框架之间自如伸缩

• 高效：20kB运行大小，超快虚拟DOM

2. vue基本使用

2.1 传统开发模式对比

原生JS

jq

2.2 Vue.js之HelloWorld基本步骤

	
{{msg}}

  

2.3 Vue.js之HelloWorld细节分析

1.实例参数分析

• el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
• data：模型数据（值是一个对象）

2.插值表达式用法

• 将数据填充到HTML标签中
• 插值表达式支持基本的计算操作

3.Vue代码运行原理分析

• 概述编译过程的概念（Vue语法→原生语法）

3. Vue模板语法

3.1 模板语法概述

1.把数据填充到HTML标签中

把数据填充HTMl标签中，这个过程叫前端渲染，产物则是静态html内容

2.前端渲染方法

• 原生js拼接字符串
• 使用前端模板引擎
• 使用vue特有的模板语法

3.原生js拼接字符串

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

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

4.使用前端模板引擎

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

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

5.vue模板语法概览

• 差值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构

3.2 指令

1.什么是指令？

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

2.v-cloak指令用法

• 插值表达式存在的问题：“闪动”(经常刷新浏览器插值表达式会出问题)

• 如何解决该问题：使用v-cloak指令

• 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

    
  
        
  {{msg}}
        
  {{1 + 2}}
    
    
    
  

3.数据绑定指令

• v-text

  • 填充纯文本 相比插值表达式更加简洁

• v-html 填充HTML片段

  • 存在安全问题
  • 本网站内部数据可以使用，来自第三方的数据不可以用

• v-pre 填充原始信息

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

    
  
        
  {{msg}}
        
  {{1 + 2}}
        
  
        
        
  
        
  {{msg}}
    
    
    
  

4.数据响应式

• 如何理解响应式

  • html5中的响应式（屏幕尺寸的变化导致样式的变化）
  • 数据的响应式（数据的变化导致页面内容的变化）

• 什么是数据绑定

  • 数据绑定：将数据填充到标签中

• v-once  只编译一次 
  

  •  显示内容之后不再具有响应式功能
    

    
  
        
  {{msg}}
        
  {{info}}
        
        
    
    
    
  

3.3 双向数据绑定

1.什么是双向数据绑定？

用户修改表单域数据 影响模型数据

2.双向数据绑定分析

• v-model指令用法

>3.MVVM设计思想

• M(model)
• V(view)
• VM(View-Model)

3.4 事件绑定

1.Vue如何处理事件？

• v-on指令用法

• v-on简写形式

2.事件函数的调用方式

• 直接绑定函数名称

  Hello

• 调用函数

  Say hi

3.事件函数参数传递

• 普通参数和事件对象

     Say hi
  

4.事件修饰符

• .stop 阻止冒泡

•   跳转
  

• .prevent 阻止默认行为

    跳转 
  

5.按键修饰符

• .enter 回车键

• .esc 退出键
  

6.自定义按键修饰符

• 全局 config.keyCodes 对象
  • Vue.config.keyCodes.f1 = 112

3.5 属性绑定

1.Vue如何动态处理属性？

• v-bind指令用法
  • 跳转

2.v-model的低层实现原理分析

演示

3.6 样式绑定

1.class样式处理

• 对象语法

• 数组语法

2.style样式处理

• 对象语法

• 数组语法

演示 class 样式处理

    
    
    
    




    

        

            测试1
        
        

            测试2
        
        

            测试3
        
        

            测试4
        
        切换
    
    
    

3.7 分支循环结构

1.分支结构

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

2.v-if与v-show的区别

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

3.循环结构

• v-for遍历数组

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

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

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

4.循环结构

• v-for遍历对象

• v-if和v-for结合使用

4. Vue常用特性

4.1 常用特性概览

• 表单操作
• 自定义指令
• 计算属性
• 侦听器
• 过滤器
• 生命周期

4.2 表单操作

1.基于vue的表单操作

• Input 单行文本
• textarea 多行文本
• select 下拉多选
• radio 单选框
• checkbox 多选框

2.表单域修饰符

• number：转化为数值

• trim：去掉开始和结尾的空格

• lazy : 将input事件切换为change事件

    
        
  
            
            
            
            
  {{msg}}
            点击
        
        
        
    
  

4.3 自定义指令

1.为何需要自定义指令？

内置指令不满足需求

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

Vue.directive('focus' {
	inserted: function(el) { 
		// 获取元素的焦点 
		el.focus();
	}
}) 

3.自定义指令用

4.带参数的自定义指令（改变元素背景色）

Vue.directive(‘color', {
	inserted: function(el, binding) {
		el.style.backgroundColor = binding.value.color;
	}
})

5.指令的用法

6.局部指令

directives: {
	focus: { // 指令的定义 
		inserted: function (el) {
			el.focus()
		}
	}
}

4.4 计算属性

1.为何需要计算属性？

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

2.计算属性的用法

computed: {
	reversedMessage: function () {
		return this.msg.split('').reverse().join('')
	}
}

演示

    

        
        
{{msg}}
        
{{reverseString}}
    
    
    

3.计算属性与方法的区别

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

5.5 侦听器

1.侦听器的应用场景

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

2.侦听器的用法

watch: {
	firstName: function(val){ 
		// val表示变化之后的值 
		this.fullName = val + this.lastName;
	},
	lastName: function(val) {
		this.fullName = this.firstName + val;
	}
}

5.6 过滤器

1.过滤器的作用是什么？

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

2.自定义过滤器

Vue.filter(‘过滤器名称’, function(value){
	 // 过滤器业务逻辑 
})

3.过滤器的使用

{{msg | upper}}
 
{{msg | upper | lower}}
 
 

4.局部过滤器

filters:{
	capitalize: function(){}
} 

5.带参数的过滤器

Vue.filter(‘format’, function(value, arg1){ 
	// value就是过滤器传递过来的参数
 })

6.过滤器的使用

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

5.7 生命周期

1.主要阶段

• 挂载（初始化相关属性）
  • beforeCreate
  • created
  • beforeMount
  • mounted
• 更新（元素或组件的变更操作）
  • beforeUpdate
  • updated
• 销毁（销毁相关属性）
  • beforeDestroy
  • destroyed

2.Vue实例的产生过程

• beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
• created 在实例创建完成后被立即调用。
• beforeMount在挂载开始之前被调用。
• mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
• beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
• updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
• beforeDestroy 实例销毁之前调用。
• destroyed 实例销毁后调用。

5.8 vue数组方法

1.变异方法(修改原有数据)

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

2.替换数组(生成新的数组)

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

3.修改响应式数据

• Vue.set(vm.items, indexOfItem, newValue)
• vm.$set(vm.items, indexOfItem, newValue)
  • 参数一表示要处理的数组名称
  • 参数二表示要处理的数组的索引
  • 参数三表示要处理的数组的值