自学前端之vue篇

vue概述

Vue.js 是一套构建用户界面的渐进式框架

特点:

• 响应式编程
• 组件化
• 轻量
• 模块化
• 简洁

vue.js技术栈

• vue-cli
• vue-router
• vuex
• es6
• npm
• webpack
• bable
• weex

环境搭建

• 方案1 直接script 引入
  下载官网独立的js文件
  使用script标签引入vue.js文件

• 方案2 命令行工具

1.全局安装 vue-cli
npm install -g @vue/cli

2.创建一个新的空项目 并下载依赖模块
vue create my-project

3.进项目目录 并运行服务器
npm run serve

MVVM

1. 旧前端代码三大部分划分:
   (1)HTML 只负责保存页面的静态内容
   (2)CSS 只负责保存页面所需的静态css样式
   (3)JS 负责所有页面上的增删改查操作！

2. 问题:
   (1). HTML和css因为缺少程序必须的要素(变量、分支、循环)，就好像生活不能自理的小婴儿！
   (2). 所有增删改查操作，都要js程序来负责，导致大量重复的代码！

3. MVVM设计模式: 对前端代码重新划分: 还是三部分
   (1). 界面(View): 增强版的:
   　　 a. 等于HTML+CSS
   　　 b. HTML增加了变量、分支、循环等程序功能
   (2). 模型对象(Model):　专门保存页面所需的变量和事件处理函数的对象
   (3). 视图模型(ViewModel)对象: 专门负责自动将变量和事件处理函数送到界面中指定位置——将界面和模型对象绑定在了一起。

4. MVVM最大的优点: 因为ViewModel可自动维护模型对象内容与界面之间保持一致，所以减少了大量重复的编码！

5. Vue框架正是基于MVVM设计模式实现的！

6. Vue的绑定原理:
   其实就是new Vue的原理:
   (1). 先创建一个vue类型的子对象
   　a. 引入data对象:
   　　　1).自动为data对象中每个变量都 请了保镖(访问器属性)！
   　　　　　结果: 任何位置访问data中的变量时，其实根本就不是直接访问data中变量，仅仅访问的是为data中的变量请的同名保镖而已
   　　　　　结果: 只要外界试图修改data中的变量时，注定会触发保镖的set()方法。
   　　　2).new Vue()还自动在每个变量的set()函数内植入了一个通知函数
   　　　　　 结果: 只要外界试图修改data中的变量时，注定会触发保镖的set()方法中的通知函数。整个vue框架就知道一个变量的值被修改了！
   　b. 引入并打散methods对象: 结果：
   　　　 1) Methods中所有函数默认直接隶属于new Vue()对象
   　　　２).导致methods中的函数进入new Vue()后和data中变量的保镖(访问器属性)平级
   　　　 3).所以，methods中的方法想访问data中的变量，必须加this.变量名
   (2).构建虚拟DOM树:
   　　a. 什么是虚拟DOM树: 通过扫描完整版DOM树创建出的一棵新DOM树
   　　b. 过程:
   　　　　1). new Vue()会查找到el属性指定的界面上的父元素
   　　　　2). 扫描找到的父元素及其子元素
   　　　　3). 碰到"@事件名=函数名"，就自动翻译为on事件名=函数名——自动绑定事件
   　　　　4). 碰到所有"{{变量名}}"：
   　　　　　　i. 先将可能变化的元素对象加入到虚拟DOM树中
   　　　　　　ii. 并且首次替换元素内容中{{变量名}}为变量的初始值
   (3). 结果: 每次只要data中的变量被修改时:
   　　　 a. 自动调用变量的set()函数
   　　　 b. set()中内置的通知函数向vue框架发出通知，说xx变量发生了改变
   　　　 c. 框架会自动扫描虚拟DOM树
   　　　 d. 查找受本次变量修改影响的所有DOM元素
   　　　 e. 自动利用已经提前封装好的DOM增删改查操作，只更新页面上受影响的元素。其他不受该变量影响的元素，保持不变！

总结:

1. VUE绑定原理: 访问器属性+虚拟DOM树
   　　　　　　访问器属性+观察者模式+虚拟DOM　(深层次)
2. 虚拟DOM树的优点: 4点:
   (1). 内容少！仅保存可能变化的元素。不变的元素一个都不包含
   (2). 遍历快！
   (3). 避免大量重复代码！——自动执行DOM增删改查操作
   (4). 效率高！每次变量更改时，只修改个别受影响的元素，其他元素保持不变！
   
   
   
   
   　
   
   
   

vue.js 指令

v-bind 单向绑定

(1). 问题: 如果元素的属性值可能随变量自动变化，则不能用{{}}标记！
(2). 解决:
　　a. 标准: <元素 v-bind:属性名="js表达式">
　　b. 原理: new Vue()在扫描页面时，只要发现v-bind，就会自动计算="“中的js表达式，并将计算结果自动设置为当前属性的属性值
　　c. 简写: <元素 :属性名="js表达式">
　　d. 强调: 如果属性名前加了:，则=后”“中不需要再写{{}}，”“就充当了{{}}的作用！原来{{}}中能写什么，”"中就能写什么！
(3). 总结: 今后只要元素的属性值可能随变量自动变化时，都用:属性名="js表达式"方式来绑定，不能用{{}}。

v-show

(1). 需求: 控制一个元素的显示隐藏:
(2). 如何: <元素 v-show="返回bool类型的js表达式">
(3). 原理:
　　a. new vue()扫描到v-show时，就会先自动计算=后的js表达式的值，得到一个bool值。
　　b. 如果执行结果为true则，当前元素什么都不干，默认显示！
　　c. 如果执行结果为false则，当前元素自动添加display:none，隐藏

v-if和v-else

(1). 需求: 两个元素二选一显示
(2). 如何:
　　　<元素1 v-if="返回bool值的表达式">
　　　<元素2 v-else>
(3). 强调:
　　a. v-if和v-else两个元素必须紧挨着，中间不能插入其他元素
　　b. v-else后不要加任何=，和程序中if else的else后不加表达式道理一样。
(4). 原理:
　　a. new Vue()扫描到v-if时，先自动计算=后的表达式的值
　　b. 如果v-if后表达式的值为true，则保留v-if所在的元素1，删除v-else所在元素2
　　c. 如果v-if后表达式的值为false，则删除v-if所在的元素1，保留v-else所在元素2
(5). v-show vs v-if 差别: （高频笔试题）
　　a. v-show通过display:none方式控制显示隐藏，因为不修改DOM树，所以效率略高
　　b. v-if通过删除元素方式控制显示隐藏，所以要修改DOM树，效率略低。

v-else-if

(1). 需求:多个元素多选一显示
(2). 如何:
　　　　<元素1 v-if="返回bool值的表达式">
　　　　<元素2 v-else-if="返回bool值的表达式">
　　　　... ...
　　　　<元素n v-else>
(3). 强调:
　　　a. v-if、v-else-if和v-else多个元素必须紧挨着，中间不能插入其他元素
　　　b. v-else后不要加任何=，和程序中if else的else后不加表达式道理一样。
(4). 原理:
　　　a. new Vue()扫描页面时，如果遇到v-if就先执行=后的表达式，获得bool值结果
　　　b. 如果v-if表达式的值返回true，则保留v-if，删除其余v-else-if和v-else的元素
　　　c. 如果v-if表达式的值返回false，则先后继续执行后续v-else-if的表达式。只要碰到一个v-else-if表达式的值为true，则仅保留着个v-else-if的元素，删除其余v-if v-else-if和v-else
　　　d. 如果之前的v-if和v-else-if的表达式值都为false，才保留最后一个v-else元素，删除其余v-if和v-else-if的元素

v-for

(1). 需求: 根据数组中的内容反复生成多个相同结构的元素
(2). 如何:
　　　<要反复生成的元素 v-for="(value,i) of 数组/对象">
(3). 强调:
　　　a. 要反复生成的元素，只需要写一个当做模板即可！
　　　b. v-for一定要写在要反复生成的元素上，而不是要反复生成的元素的父元素上。
　　　c. v-for of，即可遍历数组，又可以遍历对象——　统一了for in和for of
(4). 原理:
　　　a. new Vue()扫描到v-for，会自动遍历of后的数组或对象
　　　b. 每遍历到数组中一个元素或对象中一个成员，都会将当前HTML元素自动创建一个新的副本。
　　　c. 在要反复生成的元素身上或其子元素中，可以将v-for的两个变量value和i用于动态绑定内容。其中　: value变量会自动获得当前正在变量的元素值或属性值。i会自动获得当前数组元素的下标或对象成员的属性名。
(5). 强调: 凡是用v-for时，必须同时绑定一个:key属性
　　　　a. 问题: 因为v-for每次反复生成的元素之间除了内容之外，单看元素是无差别的。即使将来只更改了数组中一个元素值，因为v-for无法区分反复生成的多个元素，就无法只精准更新一个元素。V-for只能采用笨办法，将v-for负责的所有元素重新生成一遍。——效率极低
　　　　b. 解决: 让v-for反复生成的每个元素都有一个唯一的标识。如果数组中某一个元素发生改变，v-for可凭借这唯一的标识找到一个页面元素，只更新一个页面元素即可。其余页面元素保持不变——效率高！
c. 如何:
<要反复生成的元素 v-for="(值,下标) of 数组或对象" :key="下标">

(6). V-for还会数数！
　　　a. <要反复生成的元素 v-for=“i of 一个整数” :key=“i”>
　　　b. 原理:
　　　　　1). V-for从1开始循环，每次递增1，到of后给的整数值结束.
　　　　　　　相当于for(var i=1;i<=一个整数;i++){ … }
　　　　　2). 每循环一次就将当前元素创建一个新的副本
　　　　　3). 变量i会依次接住每次+1后的新值。变量i可用于元素内容中的绑定语法。

v-on

a. 标准: <元素 v-on:事件名="处理函数名(实参值)">
b. 简写:
　　　1). <元素 @事件名="处理函数名(实参值)"＞
　　　2). 如果处理函数不需要实参值，则()可省略: <元素 @事件名="处理函数名">
c. 页面所需的所有事件处理函数都应该集中定义在methods对象中

v-html

(1). 问题: 如果要绑定的变量值是一段HTML代码，则使用{{}}绑定，会保持HTML代码的原样，而不经过编译，直接显示在页面上。
(2). 解决: 今后，只要要绑定的变量值是一段HTML代码，则必须用v-html指令代替{{}}来绑定。
(3). 如何:<元素 v-html="变量或js表达式">
(4). 优点: v-html会先将变量中的HTML片段交给浏览器解析成可以给人看的东西，然后才替换进元素的内容中。

v-cloak和v-text 防止用户短暂看到{{}}

(1). 问题: 当网速慢时，如果js代码还未下载执行，则用户有可能短暂看到页面上的{{}}语法——尴尬！
(2). 解决: 2个办法:
　a. v-cloak指令:
　　1). 原理: 在new Vue()下载执行前，先将所有带{{}}的元素暂时隐藏。等到new Vue()下载执行完，再自动将所有{{}}的元素显示出来。
　　2). 2步:
　　　　　i. 先在网页的style中定义一个属性选择器:　[v-cloak]{ display:none }。
　　　　　 　意为所有带有v-cloak属性属性的元素，暂时隐藏
　　　　　ii. 在有{{}}内容的元素上加上v-cloak属性，不用加=
　　3). 结果: 所有带有v-cloak的元素，都暂时隐藏。直到new Vue()下载并执行完，自动找到所有v-cloak的元素，删除v-cloak属性。这些元素才显示出来！
　　
　　b. v-text指令:
　　　　1). 原理: 既然不想看到{{}}，就可以用一种特殊的指令代替{{}}，功能还一样！因为指令都是写在元素的属性中。即使没有加载完，用户也不可能看到元素的属性！
　　　　2). 如何: 1步
　　　　　　　　i. <元素 v-text="变量或js表达式">
　　　　　 　 　ii. 原理: 当v-text的内容计算好之后，会自动将执行后的结果代替元素的内容
　　　　3). 问题: 如果元素的内容就是由固定的内容和变化的变量拼接起来的，则被迫使用模板字符串！<元素 v-text="模板字符串">
　　　　4). 简写: 如果v-text后跟的是一个模板字符串，则可以省略""，只保留模板字符串的反引号``即可！<元素 v-text=模板字符串>

v-pre

(1). 极端的问题: 如果元素的内容正文中刚好也包含{{}}，但是不想被vue编译，而是原样显示！
(2). 如何:<元素 v-pre> … {{xxx}}…

v-model 双向绑定

(1). 问题: 使用之前的12种指令，的确可以将new Vue()中的变量值更新到页面显示。但是都无法将页面中用户输入的新内容，自动反向更新会new Vue()中保存。
(2). 单向绑定: 只能将new Vue()中模型对象中变量值的修改更新到页面上显示。如果页面中元素内容发生变化，无法自动将更改更新回new Vue()中的模型对象中保存
之前的12种指令，都只是单项绑定而已。
(3). 解决: 今后只要希望自动获得用户在界面上输入或选择的新值，都只能用双向绑定
(4). 双向绑定: 既能将new Vue()中模型对象中变量值的修改更新到页面上显示。又能将页面中元素内容发生的变化，自动更新回new Vue()中的模型对象中保存
(5). 如何: <表单元素 v-model:可能变化的属性="变量">
(6). 强调:双向绑定几乎只用在表单元素上.
(7). 原理:v-model包含两部分原理
　　　(1). 从Model->View的绑定与之前讲解的绑定元素一样: 访问器属性+虚拟DOM树
　　　(2). 但是从View->Model的绑定是新的原理：new Vue()扫描到包含v-model的表单元素时，就自动为表单元素绑定οnchange=function(){}事件处理函数。意为当表单元素的值发生改变时，就自动触发。然后，在onchange事件处理函数内，包含自动获取当前元素值并更新回Vue中指定变量中保存的语句。

过滤器

1. 什么是过滤器: 专门对变量的原始值进行加工后再显示出来的一种特殊函数

2. 为什么: 有些时候，变量的原始值，不能直接给人看！人看不懂！所以需要先将原始值加工成人能看懂的内容，再显示出来
   比如: 性别: 1和0，要翻译为男和女
   再比如: 时间:毫秒数，要翻译为年/月/日 时:分:秒 人才能看懂

3. 何时: 今后要显示的变量原始值不能直接给人看，需要加工时，就用过滤器。

4. 如何: 2步
   (1). 定义过滤器:
   　　 Vue.filter(“过滤器名”,function( oldVal ){
   　　　　　　　return 过滤后的新值
   　　　　　　　 })
   (2). 在页面上使用过滤器:
   　　　比如: 在绑定语法的{{}}中使用:
   　　　 <元素>{{变量 | 过滤器名}}

5. 结果:
   　　(1). new Vue()扫描到绑定语法中的|，就会去Vue家找有没有指定名称的过滤器函数
   　　(2). 如果找到指定名称的过滤器函数，则自动调用过滤器函数:
   　　　　a. 将|左边的变量的原始值自动传给过滤器函数的oldVal形参
   　　　　b. 将过滤器执行的结果返回给new Vue()
   　　(3). new Vue()会用过滤器返回的加工后的结果，代替当前{{}}语法位置，显示给用户看。

6. 过滤器可以传参:
   (1). 定义过滤器: 预留
   　　 Vue.filter(“过滤器名”,function( oldVal , 自定义形参){
   　　　　　return 根据不同的自定义形参，过滤出不同的新值
   　　　 })
   (2). 在页面上使用过滤器:
   　　 比如: 在绑定语法的{{}}中使用:
   　　<元素>{{变量 | 过滤器名(自定义实参值)}}
   连接

7. 多个过滤器可以连用：
   <元素>{{变量 | 过滤器1 | 过滤器2 | …}}
   强调: 过滤器连用时，每个过滤器既可能接住变量的原始值，又可能接住的是上一个过滤器加工后的半成品。

axios

1. 每种框架或函数库中都提供了专门的发送ajax请求的函数。用哪个框架，就要使用对应的哪种ajax函数。
   比如: jquery: $.ajax() vue: axios.get() react: xxx angularJS: xxx 微信小程序:xxx
2. 什么是: axios是基于Promise技术的，专门发送ajax请求的函数库——几乎专用于vue，但是其他框架也可使用
3. 如何:
   (1). 引入axios.js，获得一个axios对象
   (2). 因为大部分服务器端接口的域名和端口号部分都是一致的，只有服务端接口地址的相对路径部分不一致。所以axios允许先统一配置所有请求的基础路径
   axios.defaults.baseURL=“服务器端接口的统一基础路径”
   (3). 发送get请求:

axios.get("/接口相对路径",{
		　　params:{ 请求参数1: 值1, 请求参数2: 值2, ... }
　　　	})        
	.then(result=>{ //function(result){
		//成功收到响应结果后，自动执行.then中的箭头函数
		//result并不直接是返回结果
		//result.data 才是返回结果！
		//且返回结果已经被自动转为js数组或对象了
	})                

结果: 服务器接口地址?请求参数1=值1&请求参数2=值2&…

(4). 发送post请求:

axios.post("/接口相对路径","请求参数1=值1&请求参数2=值2&...")
		//延迟!!!
		.then(result=>{
			result.data才是服务器端响应结果
		})

生命周期

1. 问题: dom中和jquery中，都有页面加载完成事件可以在页面加载完成后自动执行一些页面初始化操作（发送ajax请求以及事件绑定）。但是dom中的window.onload和jquery中的$(function(){ … })，都不属于vue。今后其实有一个规定: 所有vue的js代码，都要写在new Vue()对象内部。new Vue()对象之外不应该有任何代码！

2. 何时使用生命周期: 在Vue中也想在页面加载后自动执行一些初始化操作时，都要用生命周期来做。

3. 什么是生命周期: 指一个Vue对象从创建到渲染出来让人看到所经历的整个过程:
   　　好像: 出生->幼儿园->小学->中学->大学->…

4. 一个Vue对象从创建到渲染出来让人看到，共可能经历4个阶段
   (1). 创建(create): ——必经阶段
   　　a. 创建new Vue对象，引入data对象，并请保镖
   　　b. 暂时没有虚拟DOM树

   (2). 挂载(mount): ——必经阶段
   　　a. 生成虚拟DOM树
   　　b. 首次渲染页面内容

   (3). 更新(update): ——只有data中的变量被更改时，才触发更新阶段

   (4). 销毁(destroy): ——只有调用$destroy()函数，销毁当前组件时，才触发销毁阶段

5. 如果希望在某个生命周期阶段自动执行一件事情，还必须使用生命周期钩子函数
   (1). 什么是生命周期钩子函数: 在vue对象创建到每个阶段时，自动调用的一种回调函数。
   (2). Vue对象加载过程中: 共经历8个生命周期钩子函数（每个生命周期阶段前后各有一个钩子函数）
   beforeCreate(){ … }
   a. 创建阶段(create)
   created(){ … }
   beforeMount(){ … }
   b. 挂载阶段(mount)
   mounted(){ … }
   beforeUpdate(){ … }
   c. 更新阶段(update)
   updated(){ … }
   beforeDestroy(){ … }
   d. 销毁阶段(destroy)
   destroyed(){ … }

6. 发送ajax请求的代码应该放在？
   (1). 肯定不能放在update阶段！因为update阶段不是必经阶段，不一定总是执行。必须修改data中的变量才触发。如果不修改data中的变量是不会触发的。所以放在update中的代码，在页面首次加载时，无法自动执行！

   (2).可以放在created()中，但是不保险:
   　　a. created()执行时，data对象已经有了，axios请求回来的结果，就可以放入data对象中
   　　b. 不保险: created()执行时，暂时还没有虚拟DOM树，可能无法完成一些DOM相关的操作。
   (3). 最保险的做法: mounted()中！
   　　a. 此时既有了data对象，可保存axios请求回来的数据，又有了虚拟DOM树，也可以执行一些DOM相关的操作。