Vue基础
Vue指令
Vue概述
Vue之HelloWorld
【02-Vue之HelloWorld-使用vue方式渲染数据】
#app 数据渲染区域， el:#app指定元素挂载， data:{数据名称: 数据值}要挂载的内容区域
模板语法概述
【03-模板语法概述-使用vue模板遍历渲染数据】
将data中的数据渲染到vue模板中， [{each 数据对象 as value}} {{value}}
指令概念与v-cloak指令用法
【04-指令概念与v-cloak指令用法-解决了文字闪动问题】
<div v-clock>{{mag}}</div>
数据填充相关3个指令的用法
【05-数据填充相关3个指令的用法-v-text/v-html/v-pre原始信息】
数据响应式概念与v-once用法
【06-数据响应式概念与v-once用法-数据渲染到页面后，数据不可二次修改】
双向数据绑定与v-model指令用法
【07-双向数据绑定与v-model指令用法-一般使用在输入框】
输入框中的值发生改变，v-model能监听到，且修改数据v-model会实时更新数据
MVVM设计思想分析
【08-MVVM设计思想分析-model+view+view-model】
model要渲染的数据+view要渲染到那个元素中+view-model（dom事件监听， data数据绑定）
事件绑定基本用法
【09-事件绑定基本用法-v-on:click / @click】
事件函数参数传递方式
【10-事件函数参数传递方式-函数名(要传递的参数， 触发的事件对象event)】
元素的调用 v-on:click="handle('123', $event)"
事件修饰符的用法
【11-事件修饰符的用法-】
v-on:click.stop阻止冒泡，
v-on:click.prevent阻止默认行为
按键修饰符的用法
【12-按键修饰符的用法】
v-on:keyuo.有意义的名称--->对应有意义的处理函数（v-on:keyup.delete-->清空输入框值的处理函数）。 v-on:keyup.enter按下回车键--->handelSubmit:function(){conole.log(this.uname)}就打印表单中的数据内容
自定义按键修饰符
【13-自定义按键修饰符】
v-on:keyup.自定义按键名称=事件处理函数（v-on:keyup.aaa=handle处理函数）只要按下了该按键，就会触发该按键对应的处理函数。 定义按键键码值：Vue.config.keyCode.按键的名称=键码值（Vue.config.keyCode.aaa=65）
简单计算器案例
【14-简单计算器案例】
其实就是点击计算触发了事件处理函数，函数中键data中的属性值，通过parseInt相加的和赋值给data中的result，将result展示在计算结果中 v-text=result
属性绑定基本用法
【15-属性绑定基本用法-v-bind:href / :href】
指令v-model底层原理分析
【16-指令v-model底层原理分析】
一个v-model相当于2个事件：
1 v-bind:value=要绑定的数据，
2 v-on:input="$event.target.value"
样式绑定之class绑定对象用法
【17-样式绑定之class绑定对象用法-class{ }对象方式】
class{ }对象方式：
1定义类名完成样式布局，
2使用样式v-bind:class(类名: data中属性，值为true就会添加该样式)，v-bind:class={类名1, data中的属性1，类名2, data中的属性2}
样式绑定之class绑定数组用法
【18-样式绑定之class绑定数组用法-class [ ] 数组方式】
1：定义类名，
2：将类名放在data属性中，当做值，
3：将data中的值放在数组中渲染给元素 v-bind:class"[data属性名1，data属性名2]"
样式绑定之class绑定3个细节用法
【19-样式绑定之class绑定3个细节用法】
1：可以数组中，嵌套{ }对象，
2：可以在data中定义一个属性：接收一个对象{ }， 对象中有多个类名，且值为true， 3：元素本身已有class类样式，还可以v-bind:class绑定data中的属性值。【具体看分析图】
样式绑定之style绑定用法
【20-样式绑定之style绑定用法-style { }对象形式， style [ ]数组形式】
1style { }对象形式： v-bind:style{color颜色名: data中的属性名}该属性名是data中直接的属性名，
2 style [ ]数组形式：v-bind:style="[data属性名1，data属性名2]"，该属性名是属性名: { }对象中有多个属性
分支结构用法
【21-分支结构用法-v-if/v-else/v-else-if, v-show】
v-if判断条件一，v-else判断条件二，v-else-if判断条件三，v-if判断条件四 ，因为判断的是data中的某个属性，如果该属性的值满足判断条件，就会执行该判断条件中的语句。 v-show如果data中的属性的值是true，该元素就会显示，反之则隐藏
循环结构遍历数组与key的作用分析
【22-循环结构遍历数组与key的作用分析-循环结遍历数组v-for='每一项 in 要遍历的数据'】
1：在data中定义一个属性，对应的是数组，数组中有单个的值，也有多个{ }对象，遍历方式：v-for="(item, index) in list :key="item.id"",item表示每一项，index就是对象中的id值
循环结构遍历对象
【23-循环结构遍历对象-v-for(v, k, i)】
1：在data中定义一个属性，对应的是对象中有多个属性。
2：v-if结合遍历使用：v-if v===12 v-for (属性值v, 属性名k，索引 i )in 遍历的对象
遍历展示真实数据
需求分析与UI概览
实现模板布局
切换样式处理
事件处理
1：遍历展示真实数据
2：数据默认隐藏，根据currentIndex默认显示第一张和第一个tab高亮显示
3：绑定点击事件，点击时让currentIndex=index,点那个哪个就高亮
常用特性概述与表单效果概览
表单基本操作
【02-03 表单基本操作】
表单元素被选中的规则：
1：通过v-model绑定data中的属性，该属性中的值就是表单对象中要显示的内容。 2：data中属性可以是单个值，多个值则放在数组中，每一项用' '引号包裹，逗号隔开。 3：多选框规律：因为v-model绑定了data中的属性，该元素中的value=1值，对应的就是data属性数组中的值，有几个多选框就会显示几个。
表单域修饰符用法
【04-表单域修饰符用法-3种常见修饰】
1：v-mode.number：转换为number类型，方便运算。
2：v-model.trim能去除前后空格，中间去不了。
3：v-model.lazy lazy将事件切换为change类型事件，经测试输入框失去焦点才触发该修饰符
自定义指令基本用法
【05-自定义指令基本用法】
1：在元素中使用该自定义指令，
2： 全局定义自定义指令：Vue.directive('focus')全局声明focus自定义指令， inserted：function(el){el.focus}函数中让该元素自动获取焦点
自定义指令-带参数
【06-自定义指令-带参数】
1：在元素中使用该自定义指令，
2： 全局定义自定义指令：Vue.directive('focus')全局声明focus自定义指令， inserted：function(el， 参数1)el.style.backargroundColor=参数1.value.color，能通过它拿到输入框中msg的对应属性名为color的值，相当于把blue直接赋值给了样式
自定义局部指令用法
【07-自定义局部指令用法】
局部指令只能在该组件中使用，定义方式写在vue实例中，按顺序一般写在methods后面，directive事件对象中该color属性，通过bind指定了事件处理函数，函数中拿到输入框的值，将该属性的值赋值给样式，完成样式修改。
计算属性基本用法
【08-计算属性基本用法-computed】
导师说计算属性嫩格式逻辑复杂的函数，用它能内容更加简洁，目前没太大感觉：compuetd计算属性名，对应{ }对象，对象中的属性名对应了处理函数function, 该函数的处理结果能返回给计算属性
计算属性与方法的区别
【09-计算属性与方法的区别】
计算属性：如果不发生改变，就会从缓存中拿结果，效率高，性能好。 方法，每次刷新页面都会触发该方法，使用性能开销要大。
侦听器基本用法
【10-侦听器基本用法-watch】
使用场景一般用于异步或者开销较大的操作，比如通过ajax接口拿数据，和settimeout异步任务
过滤器基本用法
【12-过滤器基本用法】
1 全局过滤器 ：1 使用 ：{{data中的属性名 | 过滤器名称 | 过滤器名称}}Vue.filter('过滤器名称',处理函数)。
2：局部过滤器，一般写在data后面，filter: { 过滤器名称:事件处理函数}。 注意多个过滤器 | 竖线隔开就可以了。
侦听器案例
【11-侦听器案例】
该案例核心方法：1：在methods中定义异步函数，在侦听器中调用该方法，因为侦听器能实时拿到最新的数据， 但是侦听器中的属性名必须和data中的属性名一致，通过w-model.lazy实时接收到用户输入的值，去做出验证。【简单点说，就是methods中封装的异步任务，用watch中执行了】务
带参数的过滤器案例
【13-带参数的过滤器案例】
过滤器中的(参数1：就是data中的属性名, 参数2：调用过滤器传递的参数)，实际应用场景，就是根据第二参数，自定义格式化日期。
实例的生命周期
【14-实例的生命周期-分为3个大阶段】
阶段一渲染：
阶段二数据改动，更新数据：
阶段三：销毁vue实例会触发， 该阶段中，我们主要记住mounted函数，以为页面数据已经渲染完成，我们之后会常用它调用ajax接口去渲染页面数据。
自己用中文画的Vue图解：↓↓↓
由于Vue知识体系庞大，一文半章是很难讲清楚的，于是在接下来的，将拆分为每个章节，逐一进行讲解：→→→→ 【web前端 - 精简系列】，将Vue全家桶和微信小程序分章节，一一讲完！
目前web前端 - 精简系列更新如下：↓↓↓
